Godot 中的启动画面

我们已经使用主条场景设置了 LifeBar 的设计。现在我们需要 EnergyBar。让我们创建一个新的继承视图，并再次选择 Bar.tscn 视图并打开它。双击 bar 根节点并将其重命名为 EnergyBar。将原始视图保存为 EnergyBar.tscn。我们需要用 EP 纹理替换 HP 纹理，并替换量规上的纹理。

转到左侧的文件系统停靠区，选择场景树中的标题节点，并将 label_EP.png 文件拖放到纹理槽中。选择数字节点并将文本属性更改为不同的值，例如 14。

注意

要仅更改此节点的字体大小，我们需要制作字体资源的副本。再次选择数字节点，然后单击检查器右上角的扳手和螺丝刀图标。在下拉菜单中，选择“子资源唯一”选项。Godot 将搜索使用此节点的所有资源，并为我们制作单独的副本。

如果我们更改字体资源，所有使用它的节点都会受到影响

要仅更改此节点的字体大小，我们需要制作字体资源的副本。再次选择数字节点，然后单击检查器右上角的扳手和螺丝刀图标。在下拉菜单中，选择“子资源唯一”选项。Godot 将搜索使用此节点的所有资源并

为我们制作单独的副本。

注意

当我们使用 Meta + D 复制视图树中的节点时，它会与其父节点共享其资源。在调整资源而不影响源节点之前，您需要使子资源唯一。

滚动到“自定义字体”部分并打开字体。将大小减小到较小的值，如 20 或 22。您可能需要调整底部空间的值，以将文本的基线与左侧的 EP 标签对齐。

EP 计数小部件的字体小于其 HP 对应物

现在，选择 TextureProgress 节点。将 energy_bar_bg.png 文件拖到下方槽中，对 Energy_bar_fill.png 执行相同的操作，并将其留在进度纹理槽中。

您可以垂直调整节点的大小，使其边界矩形适合量规。使用节点本身进行计算，直到其大小与条形图对齐。

您可以垂直调整节点的大小，使其边界矩形适合量规。使用节点本身进行计算，直到其大小与条形图对齐。因为 TextureProgress 的最小数量由其纹理决定，所以您将无法减少计数节点以下。那也将是条形容器的大小。您也可以写下来。

最后但并非最不重要的一点是，背景容器有一个最小大小，这使得它略大。选择它，在“矩形”部分，将“最小大小”属性更改为 80 像素。它应该自动调整大小，并且还可以重现标题和数字节点

计数现在看起来更好，它更小

注意

计数节点的大小会影响 TextureProgress 的状态。当我们稍后垂直对齐条形图时，我们最好使用计数器的左边距来调整 EP 标签的大小。通过这种方式，Energybar 的计算和 Lifebar 的计数节点都为 100 像素宽，因此两个量规可以完美对齐。

准备炸弹和卢比计数器

现在让我们看看计数器。转到视图 -> 新继承视图，然后选择 Counter.tscn 作为基础。并将根节点重命名为 bombekron。将新视图保存为 BombCounter.tscn。这就是这个场景的全部内容。

炸弹计数器类似于原始计数器视图

转到视图 -> 再次选择新继承视图，并再次选择 Counter.TSCN。将根节点重命名为 interrupt 并将视图保存为变换。对于这一个，我们主要必须用卢比图标替换炸弹图标。

在文件系统选项卡中，将 Rs_icon.png 拖到图标节点的纹理槽中。该图标已经锚定了背景节点的右边缘，因此我们可以更改其位置，并且它将随着转换后的容器缩放和重新定位。将卢比图标向右下方移动一点。使用键盘上的箭头键清除您的位置。保存，我们完成了所有 UI 元素。

卢比计数器应该看起来像这样

将 UI 组件添加到最终 GUI

是时候将所有 UI 元素添加到主 GUI 视图了。重新打开 GUI.tscn 视图，并删除条形图和计数器节点。在文件系统停靠区中，找到 LifeBar.tscn 并将其拖放到树中的“条形图”容器上。对 EnergyBar 执行相同的操作。您应该垂直对齐它们。

生命条和 EnergyBar 自动对齐

现在，将 BombCounter.tscn 和 RupeeCounter.tscn 场景拖放到“计数器”节点上。它将自动调整大小。

节点调整大小以占用所有可用垂直空间

位置

要允许 RsCounter 和 BombeCore 使用 Counter.TSCN 中定义的大小，我们需要更改计数器容器上的大小标志。选择计数器节点并在检查器中显示大小标志部分。取消选中垂直属性的填充标签，并选中中心收缩，以便 HBoxContainer 中的容器居中。

现在两个计数器都有一个合适的大小

注意

更改计数器容器的最小大小属性以控制计数器的背景高度。

我们在 EnergyBar 上的 EP 标签上遇到了一个小问题：2 个条形图应该垂直对齐。单击 EnergyBar 节点旁边的图标以打开其视图。选择计数节点并滚动到“自定义常量”部分。添加一个左边距 20。在矩形中，一部分将节点的最短大小设置为 100，与 LifeBar 上的值相同。计算应该在左侧有一些边距。如果您保存并返回到 GUI 视图，它将与 LifeBar 垂直对齐。

2 个条形图完美对齐

注意

我们可以在片刻之前以这种方式设置 EnergyBar。但它让您知道您可以随时返回任何场景，调整它，并查看项目中的更改！

将 GUI 放在游戏模型上

为了完成本教程，我们将把 GUI 插入到游戏的模型场景中。

转到文件系统停靠区并打开 LevelMockup.tscn。

将 GUI.tscn 视图拖放到 bg 节点下方和角色上方。GUI 将缩放以适合整个视口。转到布局菜单并选择中心顶部选项，以便它将锚定游戏窗口的顶部边缘。然后调整 GUI 的大小，以便它可以垂直截断。现在您可以看到该界面在游戏上下文中的外观。

最终结果

注意

关于响应式设计的一个最终说明。如果调整 GUI 的大小，您将看到节点移动，但纹理和文本不会缩放。GUI 也有一个最小大小，具体取决于内部的曲面。在游戏中，我们不需要界面像网站一样灵活。您几乎从不希望同时支持横向和纵向屏幕方向。这是一个或另一个。在横向方向上，最常见的比例是 4:3 到 16:9。它们彼此非常接近。这就是为什么当更改窗口大小时，GUI 元素只需要水平移动就足够了。