使用控制节点设计界面

手机、电脑显示器和电视屏幕形状和尺寸各异。为了发布游戏，我们必须支持不同的屏幕比例和分辨率。构建兼容所有平台的响应式界面可能具有挑战性。

Godot 提供了强大的工具来管理和设计响应式用户界面。为了开发我们的UI，我们将使用控制节点。这些是编辑器中带有绿色图标的节点。数十种节点可以创建从生命条到复杂应用程序的任何东西。Godot 的整个编辑器和插件都使用这些节点。

本指南将帮助我们开始UI设计。我们将学习：

• 构建游戏界面最常用的五个控制节点
• 如何使用UI元素的锚点
• 如何使用容器放置和排列用户界面
• 最常见的五个容器

要学习如何控制界面并将其连接到其他脚本，请阅读 在 Godot 中构建我们的第一个游戏UI。在设计界面时只使用控制节点。

它们具有独特的特性，允许它们彼此协作。其他节点，如 Node2D、Sprite 等，将不起作用。我们仍然可以使用一些与其他节点协作的节点，如 Animation Player、Tween 或 StreamPlayer。控制节点是 Canvasitem，就像 Node2D 一样，因此我们可以对其应用着色器。

所有控制节点共享主要属性：

• 锚点
• 包围矩形
• 焦点邻居
• 尺寸标志
• 边距
• 可选的UI主题。

一旦我们理解了控制节点的基础知识，学习所有派生自它的节点将花费更少的时间。

五个常见的UI元素

Godot 附带了数十个控制节点。其中许多编辑器用于帮助我们构建插件和应用程序。要了解更多信息，请点击关于高级UI节点和主题的指南。

对于大多数游戏，我们只需要五种UI元素和几个容器。这五个容器。

这五个控制节点是：

1. Label: 用于显示文本
2. TextureRect: 主要用于背景，或所有应为静态图像的内容。
3. TextureProgress: 用于生命条、加载条，水平、垂直或径向
4. NinePatchRect: 用于可伸缩面板
5. TextureButton: 用于创建按钮

UI设计最常用的五个控制节点

TextureRect

TextureRect 在UI内部显示纹理或图像。它类似于精灵节点，但提供了多种缩放模式。设置拉伸模式属性以改变其行为。

• Expand 上的缩放（兼容） 仅当 expand farm 正确 时，将纹理缩放以适应节点的包围矩形；否则，它的行为类似于 keep 模式。默认模式用于向后兼容。
• 比例 测量纹理以适应节点的包围矩形
• 平铺重复纹理，但不会缩放
• 集中并放置强制曲面保持其原始形状，分别在框架的左上角或中心
• 保持纵横比 和 保持元素居中 但缩放曲面但强制其保持原始纵横比，分别在框架的左上角或中心。
• 保持纵横比覆盖，元素居中，但较小的侧包围矩形和另一个剪裁适合节点边界。

使用精灵节点，我们可以修改 TextureRect 的颜色。点击 Modulate 属性并使用颜色选择器。

用红色调制的 TextureRect。

TextureButton

TextureButton 类似于 TextureRect，不同之处在于它有五个纹理槽：每个按钮状态一个。大多数情况下，我们将使用 Normal、Pressed 和 Hover 纹理。如果界面监听键盘输入，Focused 很有用。第六个图像槽和 Click Mask 允许我们使用 2 位纯黑白图像定义可点击区域。

在“基础按钮”部分，我们将找到更改按钮行为的复选框。当切换模式开启时，按下按钮时，按钮将在活动状态和正常状态之间切换。默认情况下它处于禁用状态，在这种情况下它将使用禁用设计。TextureButton 与纹理帧共享一些属性：调整大小和拉伸模式具有调制属性以更改其颜色和调整大小。

TextureProgress

TextureProgress 层有 3 个精灵来创建进度条。底层和上层纹理夹住进度条，显示条的值。

模式 属性控制条移动的方向：水平、垂直或径向。如果将其设置为径向，则 Initial Angle 和 Fill Degrees 属性允许我们限制量程。

要动画化条，我们想看看类别部分。设置最小和最大属性以定义量程。例如，要表示角色的生命值，我们将把 Min 设置为 0，将 Max 设置为默认值 1 和 100，并设置 Value 属性以更新条。如果我们将 Min 和 Max 值保留为默认值 1 和 100 并将 Value 属性设置为 40，则进度纹理的 40% 将显示，而 60% 将保持隐藏。

TextureProgress 条，填充了三分之二

标签

Label 在屏幕上打印 文本。我们将在检查器的 Label 部分找到其所有属性。在 Text 属性中写入文本，如果希望它尊重文本框的大小，请勾选 Autowrap。如果 Autowrap 关闭，我们将无法缩放节点。我们可以分别使用 Align 和 Valign 水平或垂直对齐文本。

标签图片

NinePatchRect

NinePatchRect 采用分为 3 行 和 3 列 的纹理。中心和侧面在测量纹理时平铺，但它从不包围角点。创建面板、对话框和可伸缩背景对我们的UI很有用。

使用 min_size 属性缩放的 NinePatchRect

构建响应式UI有两种工作流程

在 Godot 中构建可伸缩和灵活的界面有两种工作流程

1. 我们有许多容器节点可以自动缩放和放置UI元素。它们控制着它们的子节点。
2. 另一方面，我们有布局菜单。它帮助我们固定、放置和调整UI元素在其父级中的大小。

这两种方法并非总是兼容的。因为容器控制其子级，我们不能对它们使用布局菜单。每个框都有特定的效果，因此我们可能需要嵌套几个框才能获得一个可用的界面。使用布局方法，我们从下到上在子级上工作。由于我们不在场景中插入额外的容器，这可以使层次结构更清晰，但更难按行、列、网格等排列项目。

在为游戏和工具创建UI时，我们将逐渐了解哪种方法最适合每种情况。

使用锚点精确放置UI元素

用锚点放置UI元素

控制节点具有大小和位置，但它们也具有边距和锚点。锚点定义节点的 左、上、右 和 下 边缘的起点或参考点。更改四个锚点中的任何一个都会更改边距的参考点

锚点属性

如何更改锚点？

与任何属性一样，我们可以在检查器中编辑四个锚点，但这并非最方便的方法。当我们选择一个控制节点时，布局菜单会出现在视口上方，在工具栏中。它为我们提供了一系列图标，只需单击一下即可设置所有四个锚点，而无需使用检查器的四个属性。布局菜单仅在我们选择控制节点时显示。

视口中的布局菜单

锚点相对于原始容器

每个锚点的值在0到1之间。对于左锚点和上锚点，值为0表示在没有任何边距的情况下，节点的边缘将与父容器的右边缘和下边缘对齐。另一方面，边距表示到锚点位置的像素距离，而锚点则相对于原始容器的大小。

边距相对于锚点位置，这与锚点类似。实际上，我们将让容器为我们更新边距。

边距随锚点改变

当我们移动或调整控制节点大小时，边距会更新。它们表示控制节点边缘到其锚点的距离，相对于父控制节点或容器，正如我们稍后将看到的。如果没有父节点，边距将相对于节点的边界矩形，在 Rect 部分设置。

CenterContainer 中的边距设置为“Full Rect”锚点

尝试更改锚点或将我们的控制节点嵌套在容器中：边距将更新。

我们几乎不需要手动编辑边距。始终尝试找到一个容器来帮助我们；Godot 提供了节点来解决所有常见情况。需要在生命条和屏幕边缘之间添加空间？

使用 MarginContainer。想构建一个垂直菜单？使用 VBoxContainer。有关这些内容的更多信息请参见下文。

UI元素使用形状标签来填充可用空间

每个控制节点都有形状标志。它们告诉容器UI元素应该如何缩放。如果我们将“Fill”标志添加到水平或垂直属性，节点的边界框将占用所有可用空间，但它会尊重其兄弟节点并保持其大小。如果一个 HBoxContainer 有 3 个 TextureRect 节点，并在两个轴上都有“Fill”标志，它们将占用每个可用空间的三分之一，但不会更多。容器将获取节点并调整其大小。

HBoxContainer中的3个UI元素，它们水平对齐

“扩展”标志允许UI元素占据所有空间，并与其兄弟元素对齐。它的边界矩形将一直增长到其父元素的边缘，或者直到另一个UI节点阻挡它。

与上面相同的示例，但中心节点具有 “Expand” 大小标志

我们需要一些练习才能理解大小标签，因为它们的效果可能会因我们设置界面的方式而发生很大变化。

使用容器自动排列控制节点

容器自动将所有子控制节点，包括其他容器，排列成行、列等。

使用它们在我们的界面或中心节点周围的边界矩形中添加填充。所有内置容器都会在编辑器中更新，以便我们可以立即看到效果。

容器有一些独特的属性用于组织UI元素。要更改它们，请转到检查器中的“自定义常量”部分。

五个最有用的容器

如果我们要构建工具，我们可能需要所有容器

• MarginContainer: 用于在UI部分周围添加边距
• CenterContainer: 主要用于在其边界框中居中其子元素
• VboxContainer 和 HboxContainer: 用于将UI元素排列成行或列
• GridContainer: 用于将控制节点排列成网格状模式

CenterContainer 将所有子级居中在其边界矩形内。如果我们希望选项保持在视口中心，它通常用于标题屏幕。由于它将所有内容居中，我们通常会希望在其内部嵌套一个容器。如果改为使用纹理和按钮，它们将堆叠在一起。

MarginContainer 在子节点的两侧添加边距。添加一个包围整个视口的边距角，以在窗口边缘和UI之间添加一个分隔。我们可以在容器的顶部、左侧、右侧或底部设置边距。无需勾选复选框：单击相应的值框并输入任意数字。它将自动激活。

MarginContainer 在 Gam UI 周围添加了一个 40 像素的边距

有两种 BoxContainer：VBoxContainer 和 HBoxContainer。我们不能添加 Boxcontainer 节点本身，因为它是一个辅助类，但我们可以使用垂直和水平箱式容器。它们将节点组织成行或列。使用它来排列商店中的商品，或者创建具有不同大小的行和列的复杂网格，因为我们可以随意嵌套它们。

HBoxContainer水平对齐UI元素

VBoxContainer 自动将其子级排列成一列。这使它们一个接一个地排列。如果我们使用分离参数，它将在其子级之间留下一个间隙。HBoxContainer 将 UI 元素排列成一行。它类似于 VBoxContainer，具有一个额外的 add_spacer 方法，用于在脚本中在其第一个子级之前或最后一个子级之后添加一个间隔控制节点。

GridContainer 允许我们以网格状模式排列UI元素。我们只能控制它的列数，它会根据子节点的数量自行设置行数。如果我们有九个子节点和三列，我们将有 9÷3=3 行。再添加三个子节点，我们将有四行。换句话说，当我们添加更多的纹理和按钮时，它会创建新的行。像箱式容器一样，它有两个属性分别用于设置行和列之间的垂直和水平间距。

一个带有两列的网格容器。它会自动调整每列的大小。

Godot 的 UI 系统复杂且功能强大。要学习如何设计更高级的界面，请阅读 使用其他控制节点设计高级 UI。