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

传统UI由2D或3D场景上的2D空间构成，如菜单、生命值条或得分显示等。 但有时需要玩家在3D环境中与UI部件进行交互，如键盘、虚拟菜单或物品栏（VR项目尤为普遍）。 通过 控件交互 组件，可创建如滑块、组合框、复选框等任意类型的交互控件，然后在3D环境中与其交互。

本操作指南使用按钮创建交互式控件，玩家可将鼠标悬浮于此按钮并点击，以增大数值。

1 - 编写控件交互脚本

首先，需要设置脚本，以指示鼠标与FirstPersonCharacter蓝图中的控件进行交互。

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

2. 在 First Person Camera > Mesh2P > FPGun > Sphere 下，添加 控件交互 组件。

   利用此操作可将交互焦点引导至枪口瞄准的位置。

3. 在该控件交互组件的 细节 面板中，将 位置 归零并选中 显示调试 。

4. 在 事件图表 中，添加 鼠标右键（Right Mouse Button） 鼠标事件。然后，将 控件交互 组件拖入，并添加 Press Pointer Key 节点。

5. 将鼠标右键节点的 Pressed 引脚连接到 Press Pointer Key 节点，然后将 键 设为 鼠标左键**。

   UMG默认将点击事件注册为鼠标左键按键结果。使用 Right Mouse Button 节点，可模拟按下鼠标右键时的交互。可使用任意键输入事件调用此函数（例如按下扳机按下或按钮模拟鼠标左键点击）。

6. 添加 Release Pointer Key 节点，将 键 设为 鼠标左键 。将鼠标右键节点的 Released 引脚连接到 松开指针键 。

   Pressed Pointer Key 和 Released Pointer Key 节点比较相似，因此务必再三确认，以确保使用正确节点。如无此类节点，整数计数器将无法正常工作。

1. 编译 并 保存 蓝图。最小化或关闭蓝图选项卡。

2 - 创建交互式控件

设置脚本后，需创建控件。对于该范例，添加可用鼠标右键点击的按钮。此按钮上的文本将表明点击该按钮的次数。

1. 前往 内容浏览器 > 新增 > 用户界面 ，创建名为 InteractiveWidget 的 控件蓝图 。

2. 在 视觉效果设计器 中，移除 画布面板 （中心高亮框），并添加 按钮 ，其上设有 文本 控件。

   点击查看大图。

3. 选择 按钮 元素，然后在 细节 面板中的 外观（Appearence）>样式（Style） 下，将悬停 色调 改为其他颜色。

4. 选择 文本 元素，然后在 细节 面板中，将 文本 改为 0，将 字体大小 改为 48。

5. 在事件图表中，创建名为 Value 的 文本 变量。 编译 蓝图并将 Value 设为 0 。
   

   此变量将在点击该按钮时更新。

6. 在视觉效果设计器中，选择 文本 元素，然后在 细节 面板中，将文本与刚创建的 值 属性 绑定 起来。

7. 在 按钮 元素的 细节 中，前往 事件 。找到 点击时 元素，并点击加号 + 。
   

   点击该按钮时，将触发FirstPersonCharacter蓝图中调用的此事件。
   

8. 在事件图表中，按住 Ctrl 键并将 值 变量拖到图表。然后，从引脚连出引线添加 To String 节点，之后添加 String To Int 节点。

   此操作将文本转换为字符串，然后将字符串转换为整数（Int），以便点击该按钮时增大数值。

9. 从 String To Int 引脚连出引线添加 Integer + Integer 节点，并将其设为 +1 。

10. 长按 Alt 键并将 值（Value） 变量拖入图表，并将 Integer + Integer 节点连接到 点击时 事件。

    连接 Value 节点时，蓝图将自动创建 ToText(int) 转换节点。

11. 编译 并 保存 蓝图。最小化或关闭蓝图选项卡。

3 - 创建控件蓝图

1. 在 内容浏览器 中，创建名为 ExampleWidget 且基于 Actor 的新 蓝图 ，然后将 控件 组件添加到蓝图。

   此将代表 InteractiveWidget 控件蓝图的3D版本。

2. 在控件 细节 面板中的 用户界面 下，将 控件 改为 InteractiveWidget 。

3. 在 内容浏览器 中，将 ExampleWidget 蓝图拖放到关卡中。按需缩放、旋转和调整位置。

4. 编译 并 保存 项目。点击 运行 与控件交互！

最终结果

在编辑器中运行时，将出现以下类似结果。可使用 鼠标左键 使武器开火，指向按钮时将进入 悬停 状态（导致其改变样式）。使用 鼠标右键 点击按钮时，文本值将增大。

注意：在步骤中将使用鼠标右键来注册点击事件，但可使用手柄按钮点击，注册按下/释放指针键或（如下所示）按下运动控制器扳机。现在将右运动控制器（接有控件交互组件）指向按钮并按右扳机注册点击按钮。