虚幻引擎5文档已被迁移至 Epic开发者社区

创建虚拟键盘交互

说明如何使用UMG创建3D虚拟键盘以及与3D虚拟键盘的交互。

Choose your operating system:

Windows

macOS

Linux

可结合 控件交互 组件和 控件 组件创建3D键盘或虚拟键盘，以便玩家输入特定字符。 控件交互组件将识别被点击的"按钮"，并将字符发送到Actor中执行显示的控件组件。

在此指南中，我们将创建一个可进行交互并提供文本框输入的键盘。作为本操作说明的一部分，我们将确哪些控件可聚焦，哪些不能聚焦。 这对玩家要输入数字的文本框十分重要，因为按下其他键时不能失去玩家聚焦。

阅读完此指南后，您将设置好一个可在 3D 游戏中进行交互的小键盘和显示。

为便于本指南说明，我们将使用 蓝图第一人称 模板项目。

1 - 角色设置

首先需要用控件交互组件设置角色，并创建资源来显示UI。

  1. 在 Content > FirstPersonBP > Blueprints 文件夹中，打开 FirstPersonCharacter 蓝图。

  2. 添加附加到 球体 的 WidgetInteraction 组件。在 细节（Details） 面板中，将 位置（Location） 归零，并勾选 显示调试（Show Debug） 。

    keypad01.1.png

    控件交互组件的朝向是玩家将枪指向的方向，在游戏中由调试标记代表。

  3. 在 事件图表表 中添加一个 鼠标右键（Right Mouse Button） 事件并拖入 控件交互（Widget Interaction） 组件。

  4. 从 控件交互（Widget Interaction） 拖出引线，添加 按下指针按键（Press Pointer Key） 和 松开指针按键（Release Pointer Key） 节点。将这两个键设置为 鼠标左键（Left Mouse Button） 。将鼠标右键（Right Mouse Button）的 按下（Pressed） 和 松开（Released） 引脚分别连接到相应的指针按键节点。

    Keypad02.jpg

    控件通过鼠标左键单击或触控功能按钮响应鼠标/触控交互，我们可使用 按下指针按键（Press Pointer Key） 函数来模拟这个操作。在示例中，我们使用 鼠标右键（Right Mouse Button） 来模拟鼠标左键单击，但也可以使用游戏手柄按钮按键和运动控制器扳机来触发按下指针按键（Press Pointer Key）函数。

  5. 在 内容浏览器 中，根据 名为 Keypad 和 KeypadDisplay 的 Actor 创建两个 蓝图类 。然后添加两个 控件蓝图 ： KeypadWB 和 KeypadDisplayWB 。

    Keypad03.jpg

现在我们的角色可以在场景中与控件互动了。接下来设置交互式控件。

2 - 控件蓝图设置

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

  1. 打开 KeypadDisplayWB 蓝图，删除 画布面板（Canvas Panel） 。在层级中，添加拥有 文本框（TextBox） 的 缩放框（Size Box） 。

    keypad04a.1.png

  2. 将 缩放框（Size Box） 的预览设置为 适应屏幕（Desired on Screen） ，并将 宽度（Width） 和 高度（Height） 重设为 100x50 。

    Keypad04.png

  3. 将 文本框（TextBox） 的 提示文本（Hint Text） 设置为 1212 ，并将 字体大小（Font Size） 调整为 28 。

    keypad05.1.png

    在此例中，玩家必须使用小键盘输入文本 1212 才能完成成功输入，可根据需要使用任意数值。

  4. 编译 并 保存 KeypadDisplayWB 蓝图。

  5. 打开 KeypadWB 蓝图，删除 画布面板（Canvas Panel） 。设置拥有3个按钮的 层级 ，每个按钮的文本分别为 0 、 1 和 2 。

    Keypad06.png

    可能还需要在层级中的每个按钮上按 F2 修改器名称，反应实际的按键。

  6. 添加第二个 水平框 ，其包含两个带文本的 按钮 ，一个设为 Del ，另一个设为 Ent 。

    Keypad07.png

    键盘上只有三个数字键，以及两个用来删除（ Del ）或输入（ Ent ）的键。

  7. 按住 Ctrl 并选择每个按钮，取消勾选 可聚焦（Is Focusable） （设为 False ）。

    Keypad08.png

    为保证设置正常工作，需确保进行交互的其他控件不会从键盘显示（Keypad Display）控件处移开聚焦。如果这些选项设为true，那么点按某个按钮时，聚焦就会从键盘显示（Keypad Display）控件转移到该按钮上。这就使我们无法将按键和值传递给键盘显示（Keypad Display）控件。

  8. 在 事件图表 上，为每个按钮添加 OnClicked 事件。

    Keypad09.png

  9. 创建两个 变量 ，一个是 字符串 类型，名为 CharToSend ；另一个是 控件交互组件 类型，名为 WidgetInteraction 。

    Keypad10.png

  10. 按住 Alt 并对每个 OnClicked 事件拖入 CharToSend 。将变量值设置为之前设置的按钮文本值： 0 、 1 和 **2*。

    Keypad11.png

  11. 按住 Ctrl 并拖入 WidgetInteraction 。从引脚拖出引线并添加 发送键字符（Send Key Char） 节点。将它连接到 CharToSend 变量和 OnClicked 事件。

    Keypad12.png

    我们使用 发送键字符（Send Key Char） 函数的原因是在Slate中按键不会直接发送到文本框。举例而言，如果我们按A键，Slate函数不会识别按键操作，因此不会发送A。相反，Slate函数会聆听Send Char，因此低级系统运行代码可以确定在按下A键时是否按住了Shift，或者按A时是否开启了Caps Lock。

  12. 从 Del OnClicked事件拖出引线，使用 按下和松开键（Press and Release Key） 并将这个键设置为 退格键 。将 WidgetInteraction 变量连接到按下和松开键（Press and Release Key）目标。

    Keypad13.png

  13. 创建一个名为**EnterPressed 的 事件调度器 ，并从 OnClicked(Ent)** 调用它。

    Keypad14.png

  14. 编译 并 保存 KeypadWB 蓝图。

我们的控件蓝图现已设为显示Keypad和Keypad Display。

3 - 设置Actor

接下来需要设置Keypad和Keypad Display Actor，然后再开始编写Keypad Actor的脚本。

  1. 打开 KeypadDisplay 蓝图并添加 控件（Widget） 组件（需要将类设为 KeypadDisplayWB 并勾选 按所需大小绘制（Draw at Desired Size） ）。

    keypad15.1.png

    "按所需大小绘制（Draw at Desired Size）"可以方便快捷地让渲染目标自动匹配控件蓝图中的理想大小。

  2. 编译 并 保存 KeypadDisplay 蓝图。

  3. 打开 Keypad 蓝图并添加 控件（Widget） 组件（需要将类设置为 KeypadWB 并勾选 按所需大小绘制（Draw at Desired Size） ）。取消勾选此控件组件的 窗口可聚焦（Window Focusable） 选项。

    keypad16.1.png

    我们不希望此组件将聚焦从Keypad Display控件移开，因此需要取消勾选此项。

  4. 添加 WidgetInteraction 组件并取消选中 启用命中测试（Enable Hit Testing） （设置为false）。

    keypad17.1.png

该控件互动组件意味着我们无需引用玩家角色中的WidgetInteraction组件。这让我们能够禁用命中测试，因为不希望生成任何悬停效果。

WidgetInteraction组件创建时，它们的 虚拟用户索引（Virtual User Index） 默认设置为"0"，而且它们都使用此虚拟用户索引ID进行通信。由于玩家角色中的WidgetInteraction组件的"虚拟用户索引（Virtual User Index）"也为"0"，这与引用它的效果相同。

4 - 编写键盘Actor脚本

在最后一部分中，我们将控件蓝图作为 控件 组件添加给Actor，并定义玩家单击 Enter 按钮时发生的事件。我们还设置了一个游戏中测试，如果代码正确，将在屏幕上输出 Success ；如果代码不正确，将在屏幕上输出 Wrong Code 。

  1. 在 Keypad 蓝图 事件图表 中，从 事件开始播放（Event Begin Play） 拖出引线，并添加 转换为KeypadWB（Cast to KeypadWB） 节点。然后，添加一个 控件 组件，拖出引线以添加 获取用户控件对象（Get User Widget Object） 。将返回值连接到转换 对象 引脚。

    Keypad18.png

  2. 从 作为KeypadWB（As Keypad WB） 引脚拖出引线，添加 设置控件交互（Set Widget Interaction） 节点，添加 控件交互（Widget Interaction） 组件，将它连接到设置控件交互（Set Widget Interaction）。

  3. 从 作为KeypadWB（As Keypad WB） 引脚拖出引线，调用 分配按下Enter（Assign Enter Pressed） 节点，此操作将创建 按下Enter（Enter Pressed） 自定义事件。

    Keypad19.png

    现在选择Enter按钮时将会调用这个自定义事件。我们可以用来检查是否输入了正确代码。

  4. 创建 键盘显示对象引用（Keypad Display Object Reference） 变量并命名为 TargetDisplay 。选中 实例可编辑（Instance Editable） 。

    keypad20.1.png

  5. 创建 文本（Text） 变量，命名为 GoalText 。 编译 蓝图并将 默认值（Default Value） 设为 1212 。

    keypad21.1.png

  6. 按住 Ctrl 键并拖入 TargetDisplay ，将其与 控件（Widget） 和 用户控件对象（User Widget Object） 相连。然后添加 转换为KeypadDisplayWB（Cast to KeypadDisplayWB） 节点，并将返回值连接到 对象（Object） 。

    Keypad22.png

  7. 从 作为KeypadDisplayWB（As KeypadDisplayWB） 引脚拖出引线，将其与 可编辑文本框（Editable Text Box） 和 GetText(Text Box) 相连。从返回值拖出引线，添加 等于（Equals） 节点。拖入 目标文本（Goal Text） 并将它连接到 等于（Equals） 节点。

    Keypad23.png

    如果重命名文本框，需要搜索新名称以找到组件。

  8. 添加有两个 打印字符串 的 分支 。将字符串文本设为 成功（Success） （True），将另一个设为 错误代码（Wrong Code） （False）。

    Keypad24.png

  9. 编译 并 保存 Keypad 蓝图。

  10. 在视口中，将 Keypad 和 KeypadDisplay 蓝图拖到关卡中，并根据需要旋转/安置它们。

  11. 在 Keypad Actor 的 细节（Details） 面板中，将 目标显示（Target Display） 变量设置为关卡中的 KeypadDisplay 。

    keypad25.1.png

  12. 保存 视口，选择"运行"与控件进行互动。

最终结果

接近键盘显示，将指针瞄准显示，单击右键聚焦。现在可以查看按钮，并在按钮上单击右键发出 Send Key Char 命令，并将值传递到显示。 此例中我们使用鼠标右键和关卡中的控件进行交互，也可切换使用游戏手柄或运动控制器的按键。

此例在正确代码是否被输入时仅在屏幕上显示内容，也可替换为一些事件的触发，如开门、生成敌人或其他形式的游戏性事件。

欢迎帮助改进虚幻引擎文档！请告诉我们该如何更好地为您服务。
填写问卷调查
取消