创建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

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback