UE4官方文档UI学习：4.UMG 创建控件模板

最近开始学习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更新

---

本节内容

需求背景：实现一个菜单栏，该菜单栏中有若干个外观相同，但点击效果不同的按钮。

之前我们知道了如何创建控件蓝图，但是我们如何将某个控件蓝图，作为一个实例，在其他控件蓝图中重复使用呢？本节将创建控件蓝图CustomButton，作为一个通用的按钮。

本节新增知识点：
Set Style节点
事件调度器
PrintString 节点

---

1 - 设置按钮控件

1.右键点击 内容浏览器，创建两个 控件蓝图，一个命名为 CustomButton，另一个命名为 HUD。

2. 删除 CustomButton 空间蓝图中的 画布面板。然后，添加按钮，并右键点击，选中 用于包裹（Wrap With） > （Size Box）。
3. 在 Size Box 细节 面板中，将 宽度覆盖 改为 300，高度覆盖 改为 100。也可将图形布局改为 实际屏幕显示（Desired on Screen），以了解按钮的实际大小。

4.长按 Ctrl 键并从 我的蓝图 面板中拖出 按钮。然后，拖出引脚并添加 设置样式（Set Style） 节点。确保选中 Variable Apperance 节点，而非 Button Function 节点。

5. 将 Event Construct 节点连接到 Set Widget Style 节点，然后右键点击 控件样式 并选择 升级为变量。

6.将新变量命名为 ButtonStyle，然后 编译 蓝图。然后，将 法线 > 图像 样式设为以下纹理。

7.右键点击 法线 部分，然后选择 复制。然后，将图像设置粘贴到 悬停 值和 按下 值。所有三个数值现应具有相同图像纹理。

8.展开 悬停 并将 着色 颜色改为任意颜色（如黄色）。

9.在 ButtonStyle 中，勾选 实例可编辑（Instance Editable） 和 生成时公开（Expose on Spawn）。

利用此操作，可在其他蓝图中使用该控件蓝图时，修改此变量的值。

10.选择 Button 变量，然后点击 + 号将 OnClicked 节点添加到图表。
11.在 MyBlueprint 面板中，选择 EventDispatchers ，新建名为 ButtonClicked 的 事件调度器。
12.将 ButtonClicked 拖入图表，选择 call，然后将该节点连接到 OnClicked 事件。

如此一来，就可以通过刚刚创建的事件调度器，对不同的按钮实现额外的脚本。

---

2 - 将按钮控件添加到HUD控件

1.打开 HUD 控件蓝图，并向 画布面板 添加 垂直框。将框的尺寸调小。
2.在 用户创建 下的 选用板 中，向 垂直框 添加三个 自定义按钮。

3.在事件图表中，点击 + 将 点击按钮 事件添加到图中。现在应有3个事件，每个按钮一个。

此为 CustomButton 控件蓝图中创建的 事件调度器，点击此特殊按钮时其将进行响应。

4.对于各 ButtonClicked 事件，拖出引脚并将 PrintString 节点连接到各事件。在 字符串中 文本框中添加不同文本。

5.从关卡编辑器主工具栏前往 蓝图，并选择 打开关卡蓝图。
6.在事件图表中点击鼠标右键，并添加 Event BeginPlay 节点。将节点连接至 Create Widget 节点，并将 类 设为 HUD。

7.添加 Add to Viewport 节点，并将其连接至 Create HUD Widget 节点。然后，将 Get Player Controller 函数添加到 Set Show Mouse Cursor 节点，并勾选此复选框（将其设为True）。

---

运行效果：

此外，ButtonStyle 为公开变量，可修改默认的样式，例如中间按钮修改图案如下：