创建 3D 控件交互
传统 UI(如菜单、体力条、计分)存在于 2D 或 3D 世界场景上的 2D 空间中。但有时一些 UI 需要存在于 3D 空间中,以便玩家与其进行交互(小键盘、虚拟菜单、物品栏或其他交互式 UI 元素)。在 VR 项目中此类情况更为普遍。UMG 通过 控件交互 组件支持这些类型的交互。
在此指南中,我们将创建一个包含按钮的控件。它可被放置在关卡中,由玩家进行点击。
步骤
在此指南中,我们使用的是启用了 Starter Content 的 Blueprint First Person Template。
在 Content/FirstPersonBP/Blueprints 文件夹中,打开 FirstPersonCharacter 蓝图。
点击 Add Component 按钮,搜索并添加 Widget Interaction 组件。
点击左键 将 Widget Interaction 组件拖放到附加到 FP_Gun 的 Sphere 组件上。
此操作可使控件交互组件朝向枪对准的方向。
在控件交互组件的 Details 面板中,清零 Location 并勾选 Show Debug 选项。
在 事件图表 中添加一个 Right Mouse Button 鼠标事件节点。
将控件交互组件拖入图表,然后连出引线并添加一个 Press Pointer Key 节点。
连接到 Right Mouse Button 节点的 Pressed 引脚并将 Key 设为 Left Mouse Button。UMG 默认将点击事件注册为鼠标左键按下的结果,使用此节点可模拟鼠标右键按下的结果。 可使用任意 Key Input 事件调用此函数(如按下扳机或按键模拟鼠标左键点击)。
添加一个 Release Pointer Key 节点(设为 Left Mouse Button)并将其连接到 Right Mouse Button 节点的 **Released**引脚。
在 Content Browser 中创建一个名为 InteractiveWidget 的 控件蓝图。
在 Visual Designer 中移除 Canvas Panel,然后添加一个带 Text 控件的 Button。在此例中,我们只是添加一个可进行点击的按钮。按钮上的文本代表玩家点击该按钮的次数。可创建任意类型的交互式控件并使用控件交互组件(如滑条、组合框、复选框等可在世界空间中进行交互的内容)与其进行交互。
在 Style/Hovered 下 Button 的 Details 面板中,将 Tint 改为另一个颜色。
在 Text 的 Details 面板中,将 Text 内容改为 0、Font Size 增加到 48。
在 图表 中创建一个名为 Value 的 Text 变量,然后选择 Compile 并将 Value 设为 0。此变量将在玩家点击绑定到 Text 控件的按钮时更新。
在 Text 控件的 Designer 标签上,点击 Text 旁的 Bind 选项并选择 Value 属性。
在 Events 下 Button 控件的 Details 面板中,点击 On Clicked 旁边的 +。发生按键点击时,事件便会在 FirstPersonCharacter 蓝图中调用的内容上发生。
在 Graph 标签上长按 Ctrl 拖入 Value 变量,然后在它后面使用 To String,之后是 String To Int。我们将把文本转换为字符串,然后从字符串转换为整数,以便在按键按下时增加数值。
在 String To Int 引脚后使用设为 + 1 的 Integer + Integer 节点。
按住 Alt 拖入 Value 变量进行设置,然后按下图所示将剩余的引脚和 OnClicked 事件连接起来。将 Integer + Integer 输出引脚和 Value 的文本输入引脚连接起来时将自动创建 ToText(int) 节点。
在 Content Browser 中新建一个名为 ExampleWidget、基于 Actor 的 蓝图,然后为其添加一个 Widget 组件。这代表 InteractiveWidget 控件蓝图的 3D 版本。
在 User Interface 下 Widget 组件的 Details 面板中,将 Widget Class 变更为 InteractiveWidget。
在 Content Browser 中,将 ExampleWidget 蓝图拖入关卡,根据需要进行缩放、旋转和放置。
点击 Play 在编辑器中进行游戏。
最终结果
在编辑器中进行游戏时,效果与以下视频相似。可使用 鼠标左键 用武器开火。指向按钮时将进入 悬停 状态(使其改变其风格)。在按钮上点击 鼠标右键 时,每次点击都会增加文本数值。
如以上步骤所述,我们使用鼠标右键注册点击事件,但也可使用游戏手柄按键来注册指针键按下/松开或运动控制器扳机键按下(如下所示)。在此我们将右运动控制器(带附加的控件交互组件)指向按钮并按下右扳机键注册一个按键点击。