戈多闪屏

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

转到左侧的文件系统底座，在场景树中选择标题节点，然后将label_EP.png文件拖放到纹理插槽中。选择数字节点，然后将text属性更改为其他值，例如14 。

注意

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

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

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

为我们单独制作副本。

注意

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

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

EP Count Widget是一种比其HP同类产品小的字体

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

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

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

最后但并非最不重要的一点是，背景容器的尺寸很小，使其稍大一些。选择它，然后在“矩形”部分中，将“最小尺寸”属性更改为80像素。它应该自动调整大小，并复制标题和数字节点

伯爵现在看起来好多了

注意

计数节点的大小会影响TextureProgress的状态。当我们暂时将条形图垂直对齐时，最好了解如何使用计数器的左边缘调整EP标签的大小。这样，Energybar的计算和Lifebar的count节点都为100像素宽，因此两个量表可以完美对齐。

准备炸弹和卢比柜台

现在让我们来照顾柜台。转到视图->新建继承的视图，然后选择Counter.tscn作为基础。还将根节点重命名为bombekron。将新视图另存为BombCounter.tscn。这就是这个场景的全部。

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

再次转到“视图”->“选择新的继承的视图”，然后再次选择“ Counter.TSCN”。重命名根节点中断并将视图另存为转换。为此，我们必须主要用卢比图标替换炸弹图标。

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

卢比柜台应该看起来像这样

将UI组件添加到最终GUI

是时候将所有UI元素添加到主GUI视图了。重新打开GUI.tscn视图，并删除钢筋和柜台节点。在FileSystem扩展坞中，找到LifeBar.tscn并将其拖放到服装树的Bars容器中。对EnergyBar进行相同的操作。您应该将它们垂直对齐。

生命条和EnergyBar自动对齐

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

节点调整大小以获取所有可用的垂直

职位

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

现在两个柜台的尺寸都不错

注意

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

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

2条完美对齐

注意

我们可以在几分钟前以这种方式设置EnergyBar。但是它告诉您可以随时返回任何场景，进行调整，并查看项目中发生的更改！

将GUI放在游戏模型上

为了结束本教程，我们将在游戏的模型场景中插入GUI。

转到FileSystem扩展坞，然后打开LevelMockup.tscn。

将GUI.tscn视图拖放到bg节点下方和字符上方。 GUI将是适合整个视口的比例尺。转到布局菜单，然后选择中间顶部选项，以便它锚定游戏窗口的顶部边缘。然后调整GUI的大小，以便可以将其垂直截断。现在您可以看到游戏上下文中的界面。

最终结果

注意

关于响应式设计的最后一点。如果调整GUI的大小，将看到节点移动，但纹理和文本将无法缩放。 GUI的最小尺寸取决于内部的表面。在游戏中，我们不需要像网站一样灵活的界面。您几乎永远都不想同时支持横向和纵向屏幕方向。是一个或另一个。在横向上，最常见的比例是4：3至16：9。它们接近一个丹妮。这就是为什么当我们更改窗口大小时，GUI元素仅水平移动就足够了。