电脑显示器，手机和电视屏幕有各种形状和尺寸。要发布游戏，您需要支持不同的屏幕比例和分辨率。构建适应所有平台的响应式接口可能很困难。值得庆幸的是，Godot附带了功能强大的工具来设计和管理响应式用户界面。

本指南将帮助您开始进行UI设计。您将学习：

  • 建立游戏界面的五个最有用的控制节点
  • 如何使用UI元素的锚点
  • 如何使用容器有效地放置和安排用户界面
  • 五个最常用的容器（您可以在GUI容器文档页面中了解有关容器的更多信息）。

要了解如何控制界面并将其连接到其他脚本，请阅读在Godot中构建您的第一个游戏UI。

要设计UI，您将使用Control节点。这些是编辑器中带有绿色图标的节点。它们有数十种，可用于创建从生命棒到复杂应用程序的所有内容。Godot的编辑器本身是使用Control节点构建的。

控制节点具有独特的属性，使它们彼此之间可以很好地协同工作。其他可视节点（如Node2D和Sprite）没有这些功能。因此，为了使您的生活更轻松，请在构建UI时尽可能使用Control节点

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

  1. 锚
  2. 边界矩形
  3. 聚焦并聚焦邻居
  4. 尺寸标记
  5. 外边距（Margin）
  6. 可选的UI主题

一旦了解了Control节点的基础知识，您将花费更少的时间来学习从该节点派生的所有节点。

5个最常见的UI元素

Godot附带了数十个Control节点。这里有很多可以帮助您构建编辑器插件和应用程序的工具。

对于大多数游戏，您只需要五种类型的UI元素和一些容器。这五个控制节点是：

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

TextureRect

TextureRect在UI内显示纹理或图像。看起来与Sprite节点相似，但是它提供了多种缩放模式。设置“拉伸模式”属性以更改其行为：

  • Scale On Expand (compat)仅当expandproperty为时，才缩放纹理以适合节点的边界矩形true。否则，它的行为类似于Keepmode。向后兼容的默认模式。
  • Scale 缩放纹理以适合节点的边界矩形。
  • Tile 使纹理重复，但不会缩放。
  • Keep并强制纹理分别保持其原始大小，分别位于框架的左上角或中心。Keep Centered
  • Keep Aspect并缩放纹理，但强制其分别保持其原始纵横比（分别位于框架的左上角或中心）。Keep Aspect Centered
  • Keep Aspect Covered的工作原理类似，但较短的一侧适合边界矩形，而另一侧则裁剪到节点的极限。Keep Aspect Centered

与Sprite节点一样，您可以调制TextureRect的颜色。单击Modulate属性，然后使用颜色选择器。

TextureButton

TextureButton类似于TextureRect，不同的是它有6个纹理插槽：每个按钮状态一个。在大多数情况下，您将使用“普通”，“按下”和“悬停”纹理。如果您的界面侦听键盘的输入，则“聚焦”很有用。第六个图像插槽，即“单击蒙版”，可让您使用1位纯黑白图像定义可单击区域。

在“基本按钮”部分，您将找到一些复选框，这些复选框可更改按钮的行为。当是时，该按钮会主动和正常状态之间，当你按下切换。使其默认情况下处于禁用状态，在这种情况下它将使用纹理。TextureButton与纹理框架共享一些属性：它具有一个 属性，可更改其颜色，以及模式可更改其缩放行为。Toggle ModeDisabledDisabledmodulateResizeStretch

TextureProgress

TextureProgress最多可层叠3个精灵，以创建进度条。上下纹理将进度1夹在中间，显示进度条的值。该Mode属性控制进度的生长方向：水平，垂直或径向。如果将其设置为“径向”，则 和属性可用于限制量规的范围。Initial AngleFill Degrees

要为该条设置动画，您需要查看“范围”部分。设置 Min和Max属性以定义量规的范围。例如，要代表角色的生命，您需要将设置Min为0,，Max并将其设置为角色的最大生命。更改Value属性以更新栏。如果离开Min和Max值的默认0和100, 并设置Value属性40时，40％的Progress纹理将显示出来，并且它60％会隐藏。

标签

标签将文本打印到屏幕上。您可以在检查器的“标签”部分中找到其所有属性。将文本写入Text 属性，然后检查自动换行是否要遵守文本框的大小。如果禁用自动包装，则将无法缩放节点。您可以分别使用Align和Valign将文本水平和垂直对齐。

NinePatchRect

NinePatchRect将纹理分为3行和3列。缩放纹理时，中心和侧面会平铺，但不会缩放角。为您的UI构建面板，对话框和可缩放背景非常有用。

有两个用于构建响应式UI的工作流

有两个工作流程可在Godot中构建可扩展和灵活的界面：

  1. 使用锚点精确放置UI元素：使用“布局”菜单相对于其父元素放置UI元素并调整其大小。
  2. 使用容器自动排列控制节点：使用容器节点自动缩放和放置UI元素。

这两种方法并不总是兼容的。由于容器控制着其子代，因此您无法在其上使用布局菜单。每个容器都有特定的作用，因此您可能需要嵌套多个容器才能获得有效的接口。使用布局方法时，您将从下至上处理子级。由于您无需在场景中插入额外的容器，因此可以使层次结构更整洁，但是很难将项目排列成行，列，网格等。

在为游戏和工具创建UI时，您将对每种情况下最合适的内容有所了解。

使用锚点精确放置UI元素

控制节点具有位置和大小，但它们也具有锚点和边距。锚定义节点的左，上，右和下边缘的原点或参考点。更改4个锚点中的任意一个以更改边距的参考点。

如何更换锚

像任何属性一样，您可以在Inspector中编辑4个锚点，但这不是最方便的方法。选择控制节点后，布局菜单将出现在工具栏中视口上方。它提供了一个图标列表，您只需单击一下即可设置所有4个锚点，而不是使用检查器的4个属性。仅当您选择控制节点时，才会显示布局菜单。

锚相对于父容器

每个锚点的值都在0到1之间。对于左锚点和顶部锚点，值0表示没有任何边距，节点的边缘将与其父节点的左边缘和上边缘对齐。对于右边缘和下边缘，值为1表示它们将与父容器的右边缘和下边缘对齐。另一方面，边距表示到锚点位置的距离（以像素为单位），而锚点是相对于父容器的大小。

边距随锚而变化

当您移动或调整控制节点的大小时，边距会自动更新。它们表示从控制节点的边缘到其锚点的距离，该距离是相对于父控制节点或容器的。这就是为什么您的控制节点应始终位于容器内的原因，我们稍后会看到。如果没有父对象，则边距将相对于检查器在“矩形”部分中设置的节点自己的边界矩形。

尝试更改锚点或将Control节点嵌套在Containers中：边距将更新。您几乎不需要手动编辑边距。始终尝试先找到一个可以帮助您的容器；Godot带有节点，可以为您解决所有常见情况。是否需要在救生圈和屏幕边框之间添加空间？使用MarginContainer。要建立垂直菜单吗？使用VBoxContainer。这些在下面更多。

使用尺寸标签更改UI元素填充可用空间的方式

每个控制节点都有大小标志。它们告诉容器UI元素应如何缩放。如果将“填充”标志添加到“水平”或“垂直”属性，则节点的边界框将占用所有可能的空间，但它将尊重其同级并保留其大小。如果HBoxContainer中有3个TextureRect节点，并且两个轴上都带有“ Fill”标志，则每个节点将占用可用空间的三分之一，但不占更多。容器将接管节点并自动调整其大小。

“ Expand”标志可让UI元素占用所有可用空间，并对其同级对象进行推送。它的边界矩形将沿其父对象的边缘增长，或者直到被另一个UI节点阻止为止。

您需要进行一些练习来理解size标签，因为它们的效果可能会根据您设置界面的方式而发生很大变化。

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

容器会自动排列所有子控件节点，包括行，列等中的其他容器。使用它们在边界矩形的界面或中心节点周围添加填充。所有内置容器都会在编辑器中更新，因此您可以立即看到效果。

容器具有一些特殊的属性来控制它们如何排列UI元素。要更改它们，请导航至检查器中的“自定义常量”部分。

5个最有用的容器

如果构建工具，则可能需要所有容器。但是对于大多数游戏来说，只需少数几个就足够了：

  • MarginContainer，在用户界面的各个部分周围添加边距
  • CenterContainer，将其子项放在其边界框中
  • VboxContainer和HboxContainer，用于在行或列中排列UI元素
  • GridContainer，以网格状模式排列Controls节点

CenterContainer将其所有子项居中于其边界矩形内。如果希望选项保留在视口的中央，通常使用它作为标题屏幕。当它使所有内容居中时，您通常会希望在其中嵌套一个容器。如果改用纹理和按钮，它们会堆积在一起。

MarginContainer在子节点的任何一侧添加一个边距。添加一个包含整个视口的MarginContainer，以在窗口边缘和UI之间添加分隔。您可以在容器的顶部，左侧，右侧或底部设置边距。无需勾选该复选框：单击相应的值框，然后键入任何数字。它将自动激活。

有两个BoxContainer：VBoxContainer和HBoxContainer。您不能添加BoxContainer节点本身，因为它是一个帮助程序类，但是您可以使用垂直和水平框容器。他们将节点排列成行或列。使用它们可以在商店中排列商品，或使用大小不同的行和列构建复杂的网格，因为您可以将它们嵌套在心中。

../../_images/five_containers_boxcontainer.png

VBoxContainer自动将其子级排列为一列。它把它们一个接一个地放置。如果使用分离参数，它将在其子级之间留有空隙。HBoxContainer连续排列UI元素。它类似于VBoxContainer，它具有一种额外的add_spacer 方法，可以从脚本中在第一个子节点之前或最后一个子节点之后添加spacer控制节点。

GridContainer允许您以类似网格的模式排列UI元素。您只能控制其具有的列数，并且它将根据其子代数自行设置行数。如果您有9个孩子和3列，则将有9÷3 = 3行。再添加三个孩子，您将获得四行。换句话说，当您添加更多纹理和按钮时，它将创建新行。像盒子容器一样，它具有两个属性，分别设置行和列之间的垂直和水平间隔。

../../_images/five_containers_gridcontainer.png

Godot的UI系统很复杂，并且提供了更多功能。要了解如何设计更高级的界面，请转到文档的GUI部分。