2.显示体力、能量和弹药量

视觉:体力、能量和弹药量

现在,我们将开始设置 HUD 的视觉要素。

  1. 打开 HUD 控件蓝图,访问 控件蓝图编辑器

    Step2_6.png

    控件蓝图编辑器提供 HUD 视觉布局和脚本功能。

    如需有关控件蓝图编辑器的各个不同方面的更多信息,请参阅 控件蓝图

  2. 面板 下的 调色板 窗口中,把一个 水平框 拖至 层级 窗口中的 画板 上。

    Step2_7.png

    面板 控件类似于其他控件的容器,可为内部包含的控件提供附加功能。

  3. 还是在 面板 下,把两个 垂直框 拖到 水平框 上。

    Step2_8.png

  4. 常用 下,把两个 文本 控件拖到第一个垂直框之上,并且把两个 进度条 拖到第二个垂直框之上。

    Step2_9.png

  5. 选中 水平框,然后在图表中重新设置框的大小,并把它放在窗口的左上角。

    Step2_10.png

    进度条看起来很小,但是无需担心,我们稍后会进行调整。

  6. 将两个 进度条 都选中,然后在 细节 面板中将两者都设为按 大小 填充

    Step2_11.png

  7. 选中包含进度条的 垂直框,并且也把它设为 填充

    Step2_12.png

  8. 再次选中 水平框,重新设置其大小,让进度条与文本对齐。

    Step2_13.png

  9. 选择 层级 窗口中最顶层的 文本 控件,然后在 内容 下的 细节 面板中输入 体力:

    Step2_14.png

    为另一个 文本 控件执行相同操作,但把它标记为 能量,因此得到的图表如下所示。

    Step2_15.png

  10. 选择体力旁边的 进度条,并在 细节 面板中把 填充颜色和不透明度 设为绿色。

    images/UMGColorPicker1.jpg

    您可能会注意到,指定颜色时进度条的颜色并不会随之改变。这是因为填充进度条的 百分比 值设为 0.0 (您可以随意更改此值来测试不同颜色,稍后我们将把它和角色的体力值关联起来)。

  11. 再为 能量 条设置一个填充颜色(我们选择了橙色)。

  12. 弹药量的显示也使用上述方法进行操作,把控件添加至 层级,得到的设置将如下显示。

    Step2_16.png

  13. 水平框 包含所选弹药量信息后,重新设置水平框的大小并将其放在右上角。

    Step2_17.png

  14. 在保持 水平框 处于选中的状态下,在 细节 面板中点击 ,然后选择右上角的“锚”。

    Step2_18.png

    这样便会把锚图案移动至屏幕右上角。

    Step2_19.png

    锚定 一个控件意味着该控件将相对于锚图案的位置出现在放置的位置,与屏幕大小无关。换言之,当屏幕大小出现变化时,控件会向远离锚图案位置的方向移动相同距离(在此例中为远离屏幕右上角的相同距离)。

    点击并更改图表中的 预览尺寸 选项可对不同屏幕大小进行测试。

脚本:体力、能量和弹药量

确定视觉布局后便可添加钩子机制,提供 HUD 元素后的功能。

  1. 点击控件蓝图编辑器窗口右上角的 图表 按钮。

    Step2_20.png

  2. Event Construct 节点下的 图表 中,右键单击 并添加一个 Get Player Character 节点。

  3. 拖动 返回值 针脚并选择 投射到第一人称角色

    Step2_21.png

    我们在此确定玩家角色使用的角色蓝图是否为 第一人称角色 蓝图。

  4. 拖动 作为第一人称角色 针脚并选择 提升为变量 (把它命名为 My Character),然后按如下方式进行连接。

    Step2_22.png

    这样我们便能访问 FirstPersonCharacter 蓝图中储存的变量。

  5. 在工具栏中点击 编译,对脚本进行编译。

  6. 返回 设计师 标签并选择 体力 旁边的 进度条

  7. 进度 下的 细节 面板中,点击 百分比 旁边的 绑定,把它设置成使用 MyCharacterHealth

    images/HealthProgress.jpg

    这样便可把进度条的值与 第一人称角色 蓝图中的 Health 变量绑定在一起。现在,一旦角色蓝图中的体力值发生变化,HUD 上也将自动更新。您可能会发现在绑定之后进度条并未发生变化。这是因为我们已经在 Event Construct 上(或在游戏开始时构建 HUD 的时候)设置成这样。

  8. 选择能量旁边的 进度条 并重复上述操作,把 百分比MyCharacter 绑定到 Energy

    images/EnergyProgress.jpg

  9. 选择弹药量文本后的 25,然后在 文本细节 面板中点击 绑定创建绑定

    images/CreateBinding.jpg

    现在,我们也能像我们之前使用 子对象属性 绑定同类属性的相同方式来创建自己的定制绑定。我们要把 文本 属性从 第一人称角色 蓝图绑定到 整型 属性上,显示出当前弹药量。

  10. 在创建和自动打开的函数中,长按 CtrlMyCharacter 变量拖入图表中。

    Step2_27.png

  11. 拖动针脚 MyCharacter 并选择获取 Ammo

  12. 把弹药量针脚与 返回节点返回值 连接起来。

    Step2_28.png

    连接时将自动生成一个转换节点 To Text

  13. 为另一个 25 文本重复上述操作并为“最大弹药量”文本创建一个绑定。

    Step2_29.png

    如果最大弹药量不发生变化,则无需进行此操作。但这意味着可对“最大弹药量”进行修改。

  14. 点击 编译保存,然后点击 播放 按钮在编辑器中进行播放。

    现在,体力、能量和弹药量值显示在 HUD 上,从角色蓝图反映出当前值。按下 空格键 时角色将进行跳跃并消耗能量,按下 鼠标左键 时武器将开火并消耗弹药量,按下 F 时将消耗体力(以后,您可以把体力与伤害系统关联起来)。

在下一节中,我们将创建一个主菜单,用于加载到已设置好的游戏中。