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

最近开始学习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 使用菜单锚显示弹出菜单
UE4官方文档UI学习：7.UMG 用事件驱动UI更新

---

本节内容

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

---

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

1.在 Content > FirstPersonBP > Blueprints 文件夹中，打开 FirstPersonCharacter 蓝图。
2.在 First Person Camera > Mesh2P > FPGun > Sphere 下，添加 WidgetInteraction 组件。

利用此操作可将交互焦点引导至枪口瞄准的位置。
3.在该控件交互组件的 细节 面板中，将 位置 归零并选中 显示调试。

4.在 事件图表 中，添加RightMouseButton鼠标事件。然后，将 WidgetInteraction 组件拖入，并添加 Press Pointer Key 节点。
5.将鼠标右键节点的 Pressed 引脚连接到 Press Pointer Key 节点，然后将Key设为LeftMouseButton。

UMG默认将点击事件注册为鼠标左键按键结果。使用 Right Mouse Button 节点，可模拟按下鼠标右键时的交互。可使用任意键输入事件调用此函数（例如按下扳机按下或按钮模拟鼠标左键点击）。

6.添加 Release Pointer Key 节点，将将Key设为LeftMouseButton。将鼠标右键节点的 Released 引脚连接到ReleasePointerKey。

2 - 创建InteractiveWidget

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

3.选择 按钮 元素，然后在 细节 面板中的 外观（Appearence）>样式（Style） 下，将Hovered的tint改为黄色。
4.选择 文本 元素，然后在 细节 面板中，将 文本 改为 0，将 字体大小 改为 48。

5.在事件图表中，创建名为 Value 的 Text 变量。编译蓝图并将 Value 设为 0。

6.在designer中，选择 文本 元素，然后在 细节 面板中，将文本与刚创建的value绑定 起来。

7.在 按钮 元素的 Details 中，前往Events。找到OnClicked，并点击加号 +。

8.在事件图表中，按住 Ctrl 键并将 值 变量拖到图表。然后，从引脚连出引线添加 To String 节点，之后添加 String To Int 节点。
9.从 String To Int 引脚连出引线添加 Integer + Integer 节点，并将其设为 +1。
10.长按 Alt 键并将 值（Value） 变量拖入图表，并将 Integer + Integer 节点连接到 点击时 事件。
11.编译 并 保存 蓝图。最小化或关闭蓝图选项卡。

3 - 创建控件蓝图

1.在 内容浏览器 中，创建名为 ExampleWidget 且基于 Actor 的BlueprintClass，然后添加Widget组件。

2.在控件 细节 面板中的 用户界面 下，将 WidgtClass 改为 InteractiveWidget。

3.在 内容浏览器 中，将 ExampleWidget 蓝图拖放到关卡中。按需缩放、旋转和调整位置。
这里有个坑：如果没有看到拖放出来的InteractiveWidget，可能是旋转角度不对，翻面过来即可见：

---

实现效果：

---

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