设计GUI
既然您已掌握了基础知识，我们将了解如何构建具有可重复使用的UI组件的游戏图形用户界面（GUI）：生命条，能量条以及炸弹和翡翠计数器。在本教程结束时，您将拥有一个游戏GUI，可以使用GDscript或VisualScript进行控制：
您还将学习：
- 创建灵活的UI组件
- 使用场景继承
- 建立一个复杂的UI
下载项目文件：ui_gui_design.zip并解压缩存档。在Godot中导入start /项目以遵循本教程。在结束/文件夹中包含了最终的结果。
分解UI
让我们分解最终的UI并计划将要使用的容器。如在“设计标题”屏幕中一样，它以开头MarginContainer。然后，我们最多可以看到三列：
- 左边的生命和能量计数器
- 生命和能量棒
- 右侧的炸弹和翡翠专柜
但是，条形图的标签和进度是同一UI元素的两个部分。如果以这种方式考虑它们，我们将剩下两列：
- 左侧的生命和能量棒
- 右侧的炸弹和翡翠专柜
这使嵌套容器更加容易：使用，我们在屏幕边框周围留有一些边距MarginContainer，然后使用 HBoxContainer来管理我们的两列。两条条形图相互叠放在一起，放在一个栅栏中VBoxContainer。而且，我们需要HBoxContainer在右列中放置最后一个 ，以便将炸弹和翡翠计数器并排放置。
我们将需要在各个UI组件内添加额外的容器，但这为我们提供了主要的GUI场景的结构。有了这个计划，我们可以进入Godot并创建我们的GUI。
创建基本的GUI
GUI有两种可能的方法：我们可以在单独的场景中设计元素并将它们放在一起，或者在单个场景中对所有内容进行原型制作，然后将其分解。我建议使用单个场景，因为这样可以更快地处理UI的位置和比例。一旦看起来不错，就可以将节点树的整个部分保存为可重用子场景。我们稍后将进行说明。
现在，让我们从几个容器开始。
创建一个新场景并添加一个MarginContainer。选择节点并命名 GUI。
我们希望我们的界面锚定到屏幕顶部。选择GUI 节点，然后单击视口顶部的“布局”按钮。选择Top Wide选项。该节点将锚定到其父节点（视口默认情况下）的顶部边缘。它将在垂直轴上自动调整大小，以为其子UI组件腾出空间。
将场景另存为GUI.tscn。我们将整个GUI放入其中。
随着MarginContainer选择的，头检查和向下滚动到自定义的常量部分。展开它，然后单击每个Margin属性旁边的字段。将它们全部设置为20像素。接下来，添加一个HBoxContainer节点。这一个将在左侧包含我们的两个小节，并将它们与右侧的两个计数器分开。
我们想将条形图垂直地堆叠在中HBoxContainer。添加一个VBoxContainer作为的子代HBoxContainer并将其命名Bars。再次选择父级HBoxContainer ，这次，添加另一个HBoxContainer作为其子级。叫它Counters。有了这四个容器，我们就为我们的GUI场景奠定了基础。
之所以可以这样工作，是因为我们首先破坏了UI设计，花了一些时间考虑要使用的容器。当您遵循这样的教程时，可能看起来很奇怪。但是，一旦您从事真实游戏，就会发现它是一种高效的工作流程。
创建Bars
每个条形图均分为两个水平对齐的子元素：带有健康状况计数的标签在左侧，量规在右侧。再次，HBoxContainer是完成这项工作的理想工具。选择Bars节点并在其中添加新的节点HBoxContainer。命名它Bar。
标签本身至少需要三个节点：一个NinePatchRect 用于背景，在其顶部，我们将在左侧添加一个纹理，即HP或EP，Label在其右侧添加一个值。我们可以根据需要嵌套Control节点。我们可以将 NinePatchRect用作其他两个元素的父元素，因为它包含了它们。通常，您要改为使用容器，因为它们的作用是帮助组织UI组件。MarginContainer无论如何，我们都需要 稍后再在寿命计数和量规之间增加一些空间。选择Bar并添加一个MarginContainer。命名它Count。在其中添加三个节点：
- 一个
NinePatchRect命名Background - 一个
TextureRect命名Title - 和一个
Label命名Number
要将节点添加为兄弟节点，请始终先选择该Count节点。
我们的场景仍然是空的。现在是时候添加一些纹理了。要加载纹理，请转到视口左侧的FileSystem停靠点。向下浏览到res：// assets / GUI文件夹。
在“场景”中选择Background。在检查器中，您应该看到一个Texture属性。在“文件系统”选项卡中，单击并拖动 label_HP_bg.png到Texture插槽中。它保持压扁。父MarginContainer将强制其大小减小为0，直到我们强制容器内的元素具有最小大小为止。选择 Background节点。在检查器中，向下滚动到“矩形”部分。设置Min Size为（100，40）。您应该看到调整大小及其父容器。
接下来，选择Title并将label_HP.png其拖放到其 Texture插槽中。选择Number节点，单击Text属性旁边的字段，然后键入10。这样，我们可以在视口中看到两个节点。他们应该堆放在父容器的左上角MarginContainer。
由于它们具有容器作为其直接父级，因此我们无法自由移动它们：Count节点将始终重置其锚点，其大小和位置。尝试移动视口中的节点并调整其大小。然后，选择三种纹理中的任何一种，然后按或在“场景”底座中对其重新排序。他们会恢复到之前的大小和位置。
父容器控制其直接子代的大小，比例，边距和锚点。要修改节点，必须将它们嵌套在常规Control或另一个UI元素中。我们将使用 Background作为Title和Number的父级。同时选择Title和Number，然后将它们拖放到上 Background。
通过将Background节点用作两个纹理的父级，我们可以将控制权从Count MarginContainer移开
选择，Title然后在检查器中将其Stretch Mode属性更改为Keep Centered。接下来，在“检查器”中找到类别，并将Rect属性更改为（50，40），使其仅占据背景的左半部分。接下来，选择Number节点。在视口中，单击Layout 菜单，然后单击FullRect。节点将调整大小以适合整个背景。前往Inspector ，将其Align 属性更改为Right，并将Valign属性更改为Center。文字应对齐到的右边缘的中心。水平调整节点的大小，使其占据的右半部分， 并且右边缘有一些边距。
替换标签的字体
标签的字体太小。我们需要更换它。选择 Number节点，然后在检查器中，向下滚动到Control 类，然后找到Custom Font类别。单击Font属性旁边的New Dynamic Font字段，然后单击。再次单击该字段，然后选择“编辑”
您将进入Dynamic Font 资源。展开 Font类别，然后单击Font Data旁边的字段。点击 Load按钮。在文件浏览器中，向下导航到assets / font文件夹，然后双击Comfortaa-Bold.ttf以将其打开。您应该在视口中看到字体更新。展开设置类别以更改字体大小。将属性设置为较高的值，例如或24或28 。
现在，我们需要文本的基线，即数字的下边缘，以与左侧的HP纹理对齐。为此，仍在DynamicFont 资源中，您可以调整类别Bottom下的属性 。它为文本添加了一些底部填充。单击“场景”选项卡中的节点，以返回到该节点的Valign属性，并将其更改为Bottom。要调整文本的基线，请再次单击Extra Spacing类别下的字体字段，然后调整Bottom属性，直到文本与节点对齐为止 。我使用了像素值。
这样，我们完成了GUI最困难的部分。恭喜你！让我们继续到更简单的节点。
添加进度条
要完成我们的生活标准，我们需要最后一个要素：仪表本身。Godot附带了一个TextureProgress节点，该节点具有我们所需的一切。
选择Bar节点并在其内部中添加TextureProgress。命名它 Gauge。在检查器中展开该Textures部分。转到FileSystem，然后将lifebar_bg.png纹理拖放到Under插槽上。对lifebar_fill.png图像执行相同的操作，然后将其放到Progress插槽中。在Range检查器中的类下，更改Value属性50以查看量表已满。
仅五个Control节点，我们的第一个栏就可以使用了。
设计炸弹和翡翠计数器
炸弹和翡翠柜台就像Bar的Count节点。因此，我们将其复制并用作模板。
在Bar节点下，选择Count并按复制它。将新节点拖放 到场景树底部的下方。您应该看到它会自动调整大小。暂时不用担心，我们会尽快修复。
将Count2节点重命名为Counter。与条形图不同，我们希望数字在左边，而图标在右边。设置是相同的：我们需要一个背景（一个 NinePatchRect），标题和数字节点。该Title节点是一个TextureRect，所以这是我们需要显示的图标。在场景树中，选择Title节点，并将其重命名为Icon。
与所述Icon节点选择的，在检查器中，滚动到顶部看到Texture插槽。转到左侧的FileSystem底座，然后选择bombs_icon.png。将其拖放到Texture 插槽中。在“场景”选项卡中，选择Icon和Number 节点。单击视口顶部工具栏中的布局菜单，然后选择Full Rect。两个节点都将更新以适合Background的大小。
让我们更改Number的align属性，将其移至的左侧和中央Background。选择Number节点，将其Align属性更改 为左侧，并将Valign属性更改为居中。然后稍微调整其左边缘的大小，以在Background和文本的左边缘之间添加一些填充。
因为我们复制了Counter酒吧的Count，所以 Number节点的字体已关闭。Number再次选择该节点，转到Font属性，然后单击它以访问DynamicFont 资源。在该部分中，将值更改为重设字体的基线。现在，我们的柜台可以正常工作了。Extra SpacingBottom0
让我们将Counters锚定到视口的右边缘。为此，我们需要将Bars容器设置为占用所有可用的水平空间。选择Bars节点并向下滚动到类别。在类别中，检查值。该节点应调整大小并将计数器推到屏幕右侧。Size FlagsHorizontalExpandBars
可重复使用的UI组件
我们有一个bar和一个Counter 小部件。但是我们每个都需要两个。稍后我们可能需要更改Bar的设计或功能。如果我们可以有一个场景来存储UI元素的模板，并让子场景来处理变体，那将是很棒的。Godot让我们通过“继承的场景”做到这一点。
让我们保存两个Counter和Bar树枝作为单独的场景，。选择Bar HBoxContainer。右键单击它，然后单击。将场景另存为Bar.tscn。您应该看到节点分支将其变成单个Bar节点
场景是一棵节点树。最顶部的节点是树的 根，层次结构底部的子级是 叶子。除根以外的任何节点以及一个或多个子代都是分支。我们可以将节点分支封装到单独的场景中，或者将它们从其他场景加载并合并到活动场景中。右键单击Scene扩展坞中的任何节点，然后选择或 。Save Branch as SceneMerge from Scene
然后，选择Counter节点并执行相同的操作。右键单击， 然后将其另存为Counter.tscn。新的编辑场景图标将显示在场景树中节点的右侧。单击旁边的一个以打开相应的场景。调整节点的大小 ，使其边界框适合其内容。我们以命名和放置Control节点的方式，已经准备好继承此模板.
使用场景继承创建其余元素
我们需要两个条以相同的方式工作：它们的左侧应带有标签，并带有一些值，右侧应具有水平仪。唯一的区别是一个带有HP标签，并且是绿色，而另一个称为EP，并且是黄色。Godot为我们提供了一个强大的工具，可以为游戏中的所有条形（继承的场景）创建通用基础以重用。
继承的场景可帮助我们保持GUI场景的整洁。最后，每个UI组件只有一个容器和一个节点。
在继承的场景上，除了名称之外，还可以更改检查器中每个节点的任何属性。如果修改并保存父场景，则所有继承的场景都会更新以反映所做的更改。如果在继承的场景中更改值，它将始终覆盖父级的属性。这对于UI很有用，因为它们经常需要相同元素的变体。通常，在UI设计中，按钮，面板等具有相同的基本样式和交互作用。我们不想将其手动复制到所有变体中。
重新加载图标将出现在您覆盖的属性旁边。单击它可将值重置为父场景的默认值。
将场景继承extends想像成节点树或GDScript中的 关键字。继承的场景可以像父场景一样做所有事情，但是您可以覆盖属性，资源并添加额外的节点和脚本来扩展其功能。
如果您曾经做过网页设计，则与使用CSS的精神相同：创建基类，并使用修饰符类添加变体。在基本的按钮类中，您将具有按钮绿色和按钮红色的变体，以便用户接受和拒绝提示。新类包含父元素的名称和一个额外的关键字以说明其修改方式。创建继承的场景并更改顶级节点的名称时，我们正在做相同的事情。
继承Bar场景以构建LifeBar
我们已经LifeBar在主Bar场景中设置了的设计。现在我们需要EnergyBar。
让我们创建一个新的继承场景，然后再次选择该 Bar.tscn场景并将其打开。双击Bar根节点并将其重命名为EnergyBar。将新场景另存为EnergyBar.tscn。我们需要用EP 1替换HP纹理，并更改量规上的纹理。
转到左侧的FileSystem停靠Title栏，在“场景”树中选择节点，然后将label_EP.png文件拖放到纹理插槽上。选择Number节点，然后将Text 属性更改为其他值，例如14。
您会注意到EP纹理比HP纹理小。我们应该更新Number的字体大小以更好地适应它。字体是一种资源。整个项目中使用此资源的所有节点都将受到我们更改的任何属性的影响。您可以尝试将大小更改为较大的值，例如，40然后切换回LifeBar或Bar场景。您将看到文本大小增加。