Godot ------ 初级人物血条制作01

引言

在游戏开发中，尤其是 Roguelike 类型的游戏中，人物的血条往往非常重要，本文我们将简单介绍如何使用 Godot 来制作人物血条。

正文

在场景界面中选择添加其他节点。

在弹出的窗口中选中 ProgressBar 并点击创建。

创建完成后回到场景窗口，我们将场景名称从默认的 ProgressBar 改为 BloodStrip。

此时，我们在 2D 显示窗口看到的是一个非常窄的对象，这是因为我们创建的 BloodStrip 对象使用的是默认的尺寸。

接下来，我们需要在检查器窗口中的 Control 标签页下选择 Layout->Transform，在展开的下拉窗口下更改 Size 值，比如，这里我们将 x 值更改为 100，将 y 值更改为 30。此时，如下图所示，可以看到，对应的窗口尺寸改变了。

下一步，我们想要为我们的血条添加背景颜色以及前景色，此时，我们可以通过检查器窗口下的 Control 标签页下的 Theme overrides->styles->Background 中选择 StyleBoxFlat。

然后在 BG Color 中选择想要使用的背景色。这里为了增加对比度，我们将其选择为纯黑色（RGB 值为 (0, 0, 0)）。因为血条通常的边框是带有一定弯曲，我们可以在 Theme overrides->styles->Background->Corner Radius 中将 Top Left, Top Right, Bottom Right, Bottom Left 设置为 8 px。同时，我们也可以将血条的边框进行突出，可以将 Theme overrides->styles->Background->Border Width 选项下的 Left, Top, Right, Bottom 设置为 2 px。此时，2D 显示窗口中血条图像变为：

接着，我们需要将 Theme overrides->styles-> Fill 也设置为 StyleBoxFlat。然后将颜色设置为红色，RGB 值为 (255, 0, 0)。

设置完成后，我们回到 2D 显示窗口查看，结果与设置前一样。如下图所示。

这是因为此时，我们设置的是填充颜色，而此时，默认的填充值为 0，也就是说此时人物的血量为 0，当然不会有任何填充显示。为了能够正常显示我们设置的颜色，我们需要在检查器窗口下的 Range 标签页中设置 Min Value, Max Value，Step 以及 Value 值。通常人物的血条有两种设置方式，如下：

# 方式 1
Min Value = 0.0
Max Value = 100.0
Step = 1.0
Value = 可以为任意值（血条显示的当前值）# 方式 2
Min Value = 0.0
Max Value = 1.0
Step = 0.01
Value = 任意值（血条显示的当前值）

设置完成后我们可以看到 2D 显示结果如下：

显然，显示和我们的预期不太一致，这是因为，我们没有在 Theme overrides->styles->Fill 下设置 Border Width 以及 Corner Radius，我们需要对这些设置进行设置，使得它们与 Theme overrides->styles->Background 下的设置保持一致。设置完成后 2D 显示界面中的效果如下：

此时，左侧部分显示正常，但是右侧部分由于有边框的存在，显示是异常的，这是因为边框的颜色与血条的背景色不一致造成的，解决这一问题，最简单的方法就是将边框颜色设置为与血条背景色一致，比如，这里我们可以将边框的颜色设置为黑色。

当然我们也可以更改背景色使其与 Border 颜色一致。

至此，我们完成了血条的创建。

然而在实际的游戏中：

1. 血条的值肯定是动态变化的。
2. 通常血条的初始值应该是 100%，而且血量的显示应该是一个实际的数字而不是百分比。
3. 在某些情况下，血条需要继承之前的状态，从而其初始数值也不一定是满的。

因此，接下来我们要做的就是使用 GDScript 来实现这两个功能。在下一篇文章中我们会集中介绍如何使用脚本来实现这一设计。

如果大家觉得有用，就请点个赞吧~