ue4 umgui设计 生命值和能量条

ue4 umgui设计 生命值和能量条

在本案例中，在启用 初学者内容包（Starter Content） 的情况下使用了 蓝图第一人称（Blueprint First Person） 模板。

一.必要的项目设置

1.单击 内容浏览器（Content Browser） 中的 新增（Add New） 按钮，然后在 用户界面（User Interface） 下选择 控件蓝图（Widget Blueprint） 并将其命名为 HUD。

2.在 内容浏览器（Content Browser） 中，打开 Content/FirstPersonBP/Blueprints 文件夹下的 第一人称角色（FirstPersonCharacter） 蓝图。

3.在 我的蓝图（My Blueprint） 窗口中，单击 添加变量（Add Variable） 按钮。

4.在新变量的 详情（Details） 面板中，将其命名为 生命值（Health），将其更改为 浮点（Float） 变量类型，并将 默认值（Default Value） 设置为 1.0。

需先编译才能设置默认值

5.创建另一个名为 能量（Energy） 的 浮点（Float） 变量，并将其 默认值（Default Value） 设置为 1.0。

6.在 图表（Graph） 窗口中找到 Event Begin Play 节点。右键单击执行引脚并选择 拆分链接（Break Link to Branch）。

还可以在执行引脚上使用Alt+单击来断开它

7.拖出 Event Begin play，然后添加一个 Create Widget 节点，并将 类（Class） 设置为刚才创建的 HUD 控件蓝图。

8.拖出 Create HUD_C Widget 的 返回值（Return Value），选择 提升到变量（Promote to Variable） 并命名为 HUD引用（HUD Reference）。


9.拖出 Set 节点的输出引脚，并添加 Add to Viewport 节点。

这将把指定为目标的控件蓝图（本案例为HUD)添加到玩家视口中，并将其绘制在屏幕上。

二.调整角色变量

在开始生成实际的HUD之前，我们要做的最后一件事是提供一种用于更改我们角色变量的方法。

1.在 第一人称角色（FirstPersonCharacter） 蓝图中，当按住 Alt 时，拖入 能量（Energy） 变量，并将其放置在Jump脚本旁边

2.按住 Ctrl，拖入 能量（Energy） 变量副本，并将其连接到 Float - Float 节点，值设置为 0.25，连接方式如图所示。

每次角色跳跃时，将从角色的当前能量值中扣除0.25。

3.为 生命值（Health） 变量设置相同的脚本，但是使用 F 按键事件进行测试。

每次摁下F键时，将从角色的当前生命值中扣除0.25

三.显示生命值、能量值
1.打开 HUD 控件蓝图，访问 控件蓝图编辑器（Widget Blueprint Editor）。

2.在 面板（Panel） 下的 控制板（Palette） 窗口中，将 水平方框（Horizontal Box） 拖动到 层级（Hierarchy） 窗口中的 画布面板（CanvasPanel） 上。

3.同样在 面板（Panel） 下，将两个 垂直方框（Vertical Box） 拖动到 水平方框（Horizontal Box） 上。

4.在 常见（Common） 下，将两个 文本（Text） 控件拖动到第一个垂直方框上，将两个 进度条（Progress Bar） 拖动到第二个垂直方框上。

5.选择 水平方框（Horizontal Box），然后在图表中调整该框大小，并将其放置在窗口的左上角。

6.选择两个 进度条（Progress Bar），然后在 详情（Details） 面板中将它们的 大小（Size） 设置为 填充（Fill）。

7.选择包含进度条的 垂直方框（Vertical Box），并将其也设置为 填充（Fill）。

8.再次选择 水平方框（Horizontal Box），重新调整其大小，使进度条与文本对齐。

9.在 层级（Hierarchy） 窗口中选择最顶部的 文本（Text） 控件，然后在 详情（Details） 面板的 内容（Content） 下，输入 生命值：（Health:）。对另一个 文本（Text） 控件执行相同的操作，但将它标记为 能量（Energy）


10.选择生命值旁边的 进度条（Progress Bar），并在 详情（Details） 面板中，将 填充颜色和不透明度（Fill Color and Opacity） 设置一个颜色，能量值同理。

分配颜色时，进度条没有改变颜色。这是因为填充进度条的 百分比（Percent）
值被设置为0.0（可以先更改此值来测试一下颜色，不过我们并不会用到此值，因为稍后我们会将它链接到我们角色的生命值）。

四.脚本：生命值、能量值

1.在控件蓝图编辑器（Widget Blueprint Editor）窗口的右上角单击 图表（Graph） 按钮。

2.在 图表（Graph） 中的 Event Construct 节点下，右键单击 并添加 Get Player Character 节点。
拖出 返回值（Return Value） 引脚，并选择 **转换为第一人称角色（Cast to FirstPersonCharacter）

3.拖出 作为第一人称角色（As First Person Character） 引脚并选择 提升到变量（Promote to Variable）（将其命名为 我的角色（My Character）），然后进行连接，如下所示。

之后单击工具栏中的 编译（Compile） 以编译脚本。
4.返回 设计器（Designer） 选项卡，并选择 生命值（Health） 旁边的 进度条（Progress Bar）。
在 详情（Details） 面板中，在 进度（Progress） 下，单击 百分比（Percent） 旁边的 绑定（Bind） 选项，并将其设置为使用 我的角色（MyCharacter） 中的 生命值（Health）。

这将进度条（Progress Bar）的值绑定到 第一人称角色（First Person Character） 蓝图中的
生命值（Health） 变量。现在，每当我们的角色在蓝图中的生命值（Health）值发生更改时，会自动在我们的HUD中更新。

5.选择能量（Energy）旁边的 进度条（Progress Bar） 并重复上面的过程，将 百分比（Percent） 绑定到 我的角色（MyCharacter） 中的 能量（Energy）。

6.将制作好的生命值与能量值的图片文件导入至内容浏览器（Content Browser） 中

7.返回控件蓝图编辑器（Widget Blueprint Editor），在 常见（Common） 下，将两个 图形（Image）拖动到 层级（Hierarchy） 窗口中的 画布面板（CanvasPanel） 上。

8.选中 Image-1 在 详细（Details）面板下将brush下的Image设置为之前导入生命值的图片文件，Image-2则设置为能量条的图片文件

9.调整图片的大小与位置达成如下效果

10.单击 编译（Compile） 和 保存（Save），然后单击 运行（Play） 按钮以在编辑器中运行。

现在我们的生命值（Health）和能量（Energy）会显示在我们的HUD上，并反映我们角色蓝图中的当前值。按空格键会使角色跳跃并消耗能量，按F键会使我们失去生命值