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. 选择体力旁边的 进度条,并在 细节 面板中把 填充颜色和不透明度 设为绿色。

    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

    HealthProgress.jpg

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

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

    EnergyProgress.jpg

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

    CreateBinding.jpg

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

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

    Step2_27.png

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

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

    Step2_28.png

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

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

    Step2_29.png

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

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

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

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