2.控件蓝图设置

在此步中我们将创建互动式 UI 控件的布局,并对按键点击发生的情况编辑脚本。

步骤

  1. 打开 KeypadDisplayWB,用 缩放框(Size Box) 包裹的 文本框(Text Box) 替代层级中的 Canvas Panel

    Keypad04a.png

  2. 缩放框 设为 Desired on Screen 并用 100x50 覆盖 宽度高度

    Keypad04.png

  3. 文本框Hint Text 设为 1212 并将 Font Size 调为 28。例如玩家必须使用小键盘输入文本 1212 才能完成成功输入,可根据需要使用任意数值。

    Keypad05.png

  4. 打开 KeypadWB 并对 层级 进行设置,如下图所示创建 3 个按钮(按钮上的文本为 012)。还需要在层级中的每个按钮上按下 F2 修改按钮命名,以便辨认。

    Keypad06.png

  5. 添加第二个 水平框,内含两个带文本的 按钮,一个设为 Del,另一个设为 Ent。小键盘只拥有 3 个数字按钮,其他两个用于删除(Del)或提交(Ent)条目。

    Keypad07.png

  6. 长按 Ctrl 选中每个按钮,然后将每个按钮的 Is Focusable 选项设为 False。为保证设置正常工作,需确保进行交互的其他控件不会从 Keypad Display 控件处移开焦点。如这些选项设为 true,点击按钮时焦点将从 Keypad Display 移开,转移到阻止按键和数值传递到 Keypad Display 的按钮上。

    Keypad08.png

  7. Graph 上为每个按钮添加 OnClicked 事件。

    Keypad09.png

  8. 创建两个 变量,一个名为 CharToSend字符串 类,一个名为 WidgetInteraction控件交互组件

    Keypad10.png

  9. 按住 Alt 拖入 CharToSend,再连接到 OnClicked 事件,然后对变量值进行如下设置。

    Keypad11.png

  10. 按住 Ctrl 拖入 WidgetInteraction,然后在其后执行 WidgetInteraction,并连接 CharToSendOnClicked 事件。此处我们使用 Send Key Char 函数,因为 Slate 中的文本框未获取直接发送的键(例如它们无法识别 A 键已按下并发送 A)。它们将从 Send Char 获取信息,因此底层系统操作代码可执行此类操作,如确定 A 键按下时 Shift 是否为按下状态,或 A 键按下时 Caps Lock 是否为开启状态。

    Keypad12.png

  11. Del OnClicked 事件后,使用来自 WidgetInteraction 变量、设为 BackspacePress and Release Key

    Keypad13.png

  12. 创建一个名为 EnterPressed事件调度器 并从 OnClicked(Ent) 将其调用。

    Keypad14.png

最终结果

控件蓝图已设为显示小键盘和小键盘显示,下一步我们将把它们作为控件组件添加到 Actor 蓝图,使它们出现在关卡中。下一步完成后即可对系统进行测试,并在游戏进程中与两个元素进行交互。