创建 3D 控件交互

传统 UI(如菜单、体力条、计分)存在于 2D 或 3D 世界场景上的 2D 空间中。但有时一些 UI 需要存在于 3D 空间中,以便玩家与其进行交互(小键盘、虚拟菜单、物品栏或其他交互式 UI 元素)。在 VR 项目中此类情况更为普遍。UMG 通过 控件交互 组件支持这些类型的交互。

在此指南中,我们将创建一个包含按钮的控件。它可被放置在关卡中,由玩家进行点击。

步骤

在此指南中,我们使用的是启用了 Starter ContentBlueprint First Person Template

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

    WidgetInteraction_01.png

  2. 点击 Add Component 按钮,搜索并添加 Widget Interaction 组件。

    WidgetInteraction_02.png

  3. 点击左键 将 Widget Interaction 组件拖放到附加到 FP_GunSphere 组件上。

    WidgetInteraction_03.png

    此操作可使控件交互组件朝向枪对准的方向。

  4. 在控件交互组件的 Details 面板中,清零 Location 并勾选 Show Debug 选项。

    WidgetInteraction_04.png

  5. 事件图表 中添加一个 Right Mouse Button 鼠标事件节点。

  6. 将控件交互组件拖入图表,然后连出引线并添加一个 Press Pointer Key 节点。

    WidgetInteraction_05.png

  7. 连接到 Right Mouse Button 节点的 Pressed 引脚并将 Key 设为 Left Mouse Button。UMG 默认将点击事件注册为鼠标左键按下的结果,使用此节点可模拟鼠标右键按下的结果。 可使用任意 Key Input 事件调用此函数(如按下扳机或按键模拟鼠标左键点击)。

    WidgetInteraction_06.png

  8. 添加一个 Release Pointer Key 节点(设为 Left Mouse Button)并将其连接到 Right Mouse Button 节点的 **Released**引脚。

    WidgetInteraction_07.png

  9. Content Browser 中创建一个名为 InteractiveWidget控件蓝图

    WidgetInteraction_08.png

  10. Visual Designer 中移除 Canvas Panel,然后添加一个带 Text 控件的 Button。在此例中,我们只是添加一个可进行点击的按钮。按钮上的文本代表玩家点击该按钮的次数。可创建任意类型的交互式控件并使用控件交互组件(如滑条、组合框、复选框等可在世界空间中进行交互的内容)与其进行交互。

    点击查看全图。

  11. Style/HoveredButtonDetails 面板中,将 Tint 改为另一个颜色。

    WidgetInteraction_10.png

  12. TextDetails 面板中,将 Text 内容改为 0Font Size 增加到 48

    WidgetInteraction_11.png

  13. 图表 中创建一个名为 ValueText 变量,然后选择 Compile 并将 Value 设为 0。此变量将在玩家点击绑定到 Text 控件的按钮时更新。

    WidgetInteraction_12.png

  14. Text 控件的 Designer 标签上,点击 Text 旁的 Bind 选项并选择 Value 属性。

    WidgetInteraction_13.png

  15. EventsButton 控件的 Details 面板中,点击 On Clicked 旁边的 +。发生按键点击时,事件便会在 FirstPersonCharacter 蓝图中调用的内容上发生。

    WidgetInteraction_14.png

  16. Graph 标签上长按 Ctrl 拖入 Value 变量,然后在它后面使用 To String,之后是 String To Int。我们将把文本转换为字符串,然后从字符串转换为整数,以便在按键按下时增加数值。

    WidgetInteraction_15.png

  17. String To Int 引脚后使用设为 + 1Integer + Integer 节点。

  18. 按住 Alt 拖入 Value 变量进行设置,然后按下图所示将剩余的引脚和 OnClicked 事件连接起来。将 Integer + Integer 输出引脚和 Value 的文本输入引脚连接起来时将自动创建 ToText(int) 节点。

    WidgetInteraction_16.png

  19. Content Browser 中新建一个名为 ExampleWidget、基于 Actor蓝图,然后为其添加一个 Widget 组件。这代表 InteractiveWidget 控件蓝图的 3D 版本。

    WidgetInteraction_18.png

  20. User InterfaceWidget 组件的 Details 面板中,将 Widget Class 变更为 InteractiveWidget

    WidgetInteraction_19.png

  21. Content Browser 中,将 ExampleWidget 蓝图拖入关卡,根据需要进行缩放、旋转和放置。

    WidgetInteraction_20.png

  22. 点击 Play 在编辑器中进行游戏。

最终结果

在编辑器中进行游戏时,效果与以下视频相似。可使用 鼠标左键 用武器开火。指向按钮时将进入 悬停 状态(使其改变其风格)。在按钮上点击 鼠标右键 时,每次点击都会增加文本数值。

如以上步骤所述,我们使用鼠标右键注册点击事件,但也可使用游戏手柄按键来注册指针键按下/松开或运动控制器扳机键按下(如下所示)。在此我们将右运动控制器(带附加的控件交互组件)指向按钮并按下右扳机键注册一个按键点击。

WidgetInteraction_21.png