UE4官方文档UI学习:5.UMG 创建3D控件交互

时间:2024-03-15 18:09:24

最近开始学习UE4,整理了一下UE4的UMG官方文档的主要内容。

目录:
UE4官方文档UI学习:1.UMG UI设计器快速入门
UE4官方文档UI学习:2.UMG 创建主菜单
UE4官方文档UI学习:3.UMG 创建暂停菜单
UE4官方文档UI学习:4.UMG 创建控件模板
UE4官方文档UI学习:5.UMG 创建3D控件交互
UE4官方文档UI学习:6. UMG 使用菜单锚显示弹出菜单


本节内容

创建一个3D的按钮控件
使用WidgetInteraction 组件


1 - 为FirstPersonCharacter编写控件交互脚本

1.在 Content > FirstPersonBP > Blueprints 文件夹中,打开 FirstPersonCharacter 蓝图。
2.在 First Person Camera > Mesh2P > FPGun > Sphere 下,添加 WidgetInteraction 组件。
UE4官方文档UI学习:5.UMG 创建3D控件交互
利用此操作可将交互焦点引导至枪口瞄准的位置。
3.在该控件交互组件的 细节 面板中,将 位置 归零并选中 显示调试。
UE4官方文档UI学习:5.UMG 创建3D控件交互

4.在 事件图表 中,添加RightMouseButton鼠标事件。然后,将 WidgetInteraction 组件拖入,并添加 Press Pointer Key 节点。
5.将鼠标右键节点的 Pressed 引脚连接到 Press Pointer Key 节点,然后将Key设为LeftMouseButton。
UE4官方文档UI学习:5.UMG 创建3D控件交互
UMG默认将点击事件注册为鼠标左键按键结果。使用 Right Mouse Button 节点,可模拟按下鼠标右键时的交互。可使用任意键输入事件调用此函数(例如按下扳机按下或按钮模拟鼠标左键点击)。

6.添加 Release Pointer Key 节点,将将Key设为LeftMouseButton。将鼠标右键节点的 Released 引脚连接到ReleasePointerKey。
UE4官方文档UI学习:5.UMG 创建3D控件交互

2 - 创建InteractiveWidget

下面开始制作一个场景中的3D控件——一个按钮,用于显示该按钮被点击的次数。
1.前往 内容浏览器 > 新增 > 用户界面,创建名为 InteractiveWidget 的 控件蓝图。
2.在 视觉效果设计器 中,移除 画布面板(中心高亮框),并添加 按钮,其上设有 文本 控件。
UE4官方文档UI学习:5.UMG 创建3D控件交互

3.选择 按钮 元素,然后在 细节 面板中的 外观(Appearence)>样式(Style) 下,将Hovered的tint改为黄色。
4.选择 文本 元素,然后在 细节 面板中,将 文本 改为 0,将 字体大小 改为 48。
UE4官方文档UI学习:5.UMG 创建3D控件交互
5.在事件图表中,创建名为 Value 的 Text 变量。编译蓝图并将 Value 设为 0。
UE4官方文档UI学习:5.UMG 创建3D控件交互
6.在designer中,选择 文本 元素,然后在 细节 面板中,将文本与刚创建的value绑定 起来。
UE4官方文档UI学习:5.UMG 创建3D控件交互
7.在 按钮 元素的 Details 中,前往Events。找到OnClicked,并点击加号 +。
UE4官方文档UI学习:5.UMG 创建3D控件交互

8.在事件图表中,按住 Ctrl 键并将 值 变量拖到图表。然后,从引脚连出引线添加 To String 节点,之后添加 String To Int 节点。
9.从 String To Int 引脚连出引线添加 Integer + Integer 节点,并将其设为 +1。
10.长按 Alt 键并将 值(Value) 变量拖入图表,并将 Integer + Integer 节点连接到 点击时 事件。
11.编译 并 保存 蓝图。最小化或关闭蓝图选项卡。
UE4官方文档UI学习:5.UMG 创建3D控件交互

3 - 创建控件蓝图

1.在 内容浏览器 中,创建名为 ExampleWidget 且基于 Actor 的BlueprintClass,然后添加Widget组件。
UE4官方文档UI学习:5.UMG 创建3D控件交互
2.在控件 细节 面板中的 用户界面 下,将 WidgtClass 改为 InteractiveWidget。
UE4官方文档UI学习:5.UMG 创建3D控件交互
3.在 内容浏览器 中,将 ExampleWidget 蓝图拖放到关卡中。按需缩放、旋转和调整位置。
这里有个坑:如果没有看到拖放出来的InteractiveWidget,可能是旋转角度不对,翻面过来即可见:
UE4官方文档UI学习:5.UMG 创建3D控件交互


实现效果:
UE4官方文档UI学习:5.UMG 创建3D控件交互


参考资料:
https://docs.unrealengine.com/zh-CN/Engine/UMG/HowTo/InWorldWidgetInteraction/index.html