创建3D控件交互

创建游戏内控件交互的方法范例。

Windows
MacOS
Linux

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

欲了解更多信息,参见控件交互组件页面。

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

1 - 编写控件交互脚本

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

本操作指南将使用蓝图 第一人称模板,同时启用 初学者内容包

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

    WidgetInteraction_01.png

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

    widgetinteractionNEW_02.png

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

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

    WidgetInteraction_04.png

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

    WidgetInteraction_05.png

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

    WidgetInteraction_06.png

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

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

    WidgetInteraction_07.png

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

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

2 - 创建交互式控件

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

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

    WidgetInteraction_08.png

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

    点击查看大图。

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

    WidgetInteraction_10.png

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

    WidgetInteraction_11.png

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

    WidgetInteraction_12.png

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

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

    WidgetInteraction_13.png

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

    WidgetInteraction_14.png

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

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

    widgetinteractionNEW_14.1.png widgetinteractionNEW_14.2.png

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

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

    widgetinteractionNEW_16.2.png

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

    widgetinteractionNEW_16.png

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

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

3 - 创建控件蓝图

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

    widgetinteractionNEW_17.png

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

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

    widgetinteractionNEW_18.png

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

    WidgetInteraction_20.png

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

最终结果

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

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

WidgetInteraction_21.png

欢迎来到全新虚幻引擎4文档站!

我们正在努力开发新功能,包括反馈系统,以便您能对我们的工作作出评价。但它目前还未正式上线。如果您对此页面有任何意见与在使用中遭遇任何问题,请前往文档反馈论坛告知我们。

新系统上线运行后,我们会及时通知您的。

发表反馈意见