UE4创建3D小部件按钮交互

传统的用户界面由位于二维或三维世界顶部的二维空间(例如,菜单,状态指示器或显示结果)组成。但是,有时您可能希望在三维环境中拥有一个可供玩家进行交互的用户界面元素(键盘,虚拟菜单,清单或交互式界面的其他元素)。这在VR项目中更为常见,UMG支持使用Widget Interaction组件进行这些类型的交互。

incg影动UE4提供

步骤

对于本教程,我们使用启用了Starter Content的  Blueprint First Person模板
  1. Content / FirstPersonBP / Blueprints 文件夹中,打开FirstPersonCharacter项目,然后添加Widget Interaction类型的组件。Widget-Interaction_02-ue4 data-srcset="" />
  2. 拖动鼠标左键下降的Widget交互组件组件上方,贴FP_GunWidget-Interaction_03-ue4 data-srcset="" />

这将使我们能够沿喷枪指向的方向定向“小部件交互”组件。

3.在Widget Interaction组件的Details面板中,重置位置并选择Show Debug复选框Widget-Interaction_04-ue4 data-srcset="" />

4.在“ 事件图”内,通过右键单击添加“鼠标事件” ,拖动“小部件交互”组件并添加“ press pointer key节点Widget-Interaction_05-ue4 data-srcset="" />

5.连接到鼠标右键按下销,然后将Key设置为鼠标左键。Widget-Interaction_06-ue4 data-srcset="" />

默认情况下,由于单击了鼠标左键,UMG记录了单击事件,使用此节点将允许我们在单击鼠标右键时模拟此事件。您可以使用任何“键盘输入”事件来调用此功能(例如,按下触发器或按下按钮来模拟左键单击)。

6.添加Release Pointer Key节点(用于鼠标左键),并将其连接到鼠标右键节点的Released引脚。Widget-Interaction_07-ue4 data-srcset="" />

7.在内容浏览器中,  创建一个名为InteractiveWidgetWidget蓝图Widget-Interaction_08-ue4 data-srcset="" />

8.在Visual Designer中,删除“ 画布面板”,然后添加一个在按钮顶部带有“ 文本”小部件的按钮。Widget-Interaction_09-ue4 data-srcset="" />

对于此示例,我们只需添加一个可以单击的按钮。按钮上的文字将指示玩家已按下按钮多少次。您可以创建任何类型的交互式窗口小部件,并使用“窗口小部件交互”组件与之交互(使用滑块,组合框,复选框等内容,您可以在全局空间中进行交互)。

9.面板详细按钮样式/盘旋改变色调(色调)到另一种颜色。Widget-Interaction_10-ue4 data-srcset="" />

10.在“ 文本”的“ 详细信息”面板中文本内容更改为0并将字体大小增加到48Widget-Interaction_11-ue4 data-srcset="" />

11.在图形上,创建一个名为Value文本变量,然后编译并将其值设置为0Widget-Interaction_12-ue4 data-srcset="" />

这是当玩家单击绑定到文本小部件的按钮时我们将更新的变量。

12.在“ 文本”小部件的“ 设计器”选项卡上,选择“ 文本”旁边的“ 绑定”选项,然后选择“ 值”属性Widget-Interaction_13-ue4 data-srcset="" />

13.面板细节小部件按钮板块内活动,点击图标+旁边的点击了WidgetI-nteraction_14-ue4 data-srcset="" />

单击FirstPersonCharacter项目调用的按钮时,它将触发。

14.在Graph选项卡上,按住Ctrl键并拖动Value变量,然后使用To StringString To Int将其关闭。Widget-Interaction_15-ue4 data-srcset="" />

我们将文本转换为字符串,然后从字符串转换为Int,以便在按下按钮时可以增加值。

15.禁用String To Int输出,使用Integer + Integer节点设置为+ 1

16.按住Alt并拖动Value变量进行设置,然后将其余的联系人连接到OnClicked事件,如下所示。Widget-Interaction_16-ue4 data-srcset="" />

当您将Integer + Integer输出连接到Value中的文本输入输出时,将自动创建ToText(int)节点。

17.在内容浏览器中,创建一个名为ExampleWidget的新的基于Actor蓝图,并将Widget组件添加到其中。Widget-Interaction_18-ue4 data-srcset="" />

这将是我们的InteractiveWidget小部件的3D版本。

18.在“ 用户界面”部分内的Widget组件的“ 详细信息”面板中 ,将Widget Class的值更改为InteractiveWidgetWidget-Interaction_19-ue4 data-srcset="" />

19.在内容浏览器中,ExampleWidget蓝图拖动到级别和比例,然后根据需要旋转和定位。Widget-Interaction_20-ue4 data-srcset="" />

20.点击播放,在播放编辑。

最终结果

当您在编辑器中迷路时,您应该得到与以下类似的内容。您可以使用鼠标左键射击武器,当您指向该按钮时,您将进入“ 悬停”状态(强制其更改其样式)。当您单击鼠标按钮,文本值将每次增加。

如在这些阶段所述,我们使用鼠标右键注册点击事件,但是您可以使用按下游戏板的按钮注册击键/释放光标键或(如下所示)运动控制器触发器的动作。在这里,我们将Right Motion Controller(附带了Widget Interaction组件)指向按钮,然后单击Right Trigger来注册按钮单击。Widget-Interaction_21-ue4 data-srcset="" />

Author: incg_UE4

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注