与控制节点的设计接口

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

Godot的编辑器是用引擎的UI框架生成的。

本指南将帮助您开始UI设计。你将学到：

• 构建游戏界面的五个最有用的控制节点

• 如何使用UI元素的锚定

• 如何使用容器有效地放置和排列用户界面

• 最常见的五个容器（稍后，您可以在 GUI Containers 文件页）。

要了解如何控制接口并将其连接到其他脚本，请阅读 Build your first game UI in Godot .

要设计您的UI，您将使用控制节点。这些是编辑器中带有绿色图标的节点。它们有几十个，用于创建从生命条到复杂应用程序的任何东西。Godot的编辑器本身是使用控制节点构建的。

控制节点具有独特的属性，允许它们彼此良好地工作。其他可视化节点，比如node2d和sprite没有这些功能。因此，为了使您的生活更容易，在构建UI时尽可能使用控制节点。

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

1. 锚

2. 边界矩形

3. 焦点和焦点邻居

4. 大小标志

5. 边缘

6. 可选的用户界面主题

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

最常见的5个UI元素

Godot提供几十个控制节点。它们中的很多都是为了帮助您构建编辑器插件和应用程序。

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

1. 标签：用于显示文本

2. 纹理直立：主要用于背景，或所有应该是静态图像的东西。

3. 纹理图：适用于救生杆、装载杆、水平、垂直或径向

4. ninepatchrect：用于可扩展面板

5. 纹理按钮：创建按钮

用户界面设计最常见的5个控制节点

TextureRect

TextureRect 在用户界面中显示纹理或图像。它看起来类似于sprite节点，但它提供了多种缩放模式。设置“拉伸模式”属性以更改其行为：

• Scale On Expand (compat) 缩放纹理以适合节点的边界矩形，仅当 expand 财产是 true 否则，它的行为就像 Keep 模式。向后兼容的默认模式。

• Scale 缩放纹理以适合节点的边界矩形。

• Tile 使纹理重复，但不会缩放。

• Keep 和 Keep Centered 强制纹理保持其原始大小，分别位于帧的左上角或中心。

• Keep Aspect 和 Keep Aspect Centered 缩放纹理，但强制它分别保留在左上角或帧中心的原始纵横比。

• Keep Aspect Covered 工作原理就像 Keep Aspect Centered 但较短的边与边界矩形相匹配，另一个则与节点的限制相匹配。

与sprite节点一样，可以调整纹理直立的颜色。单击 Modulate 属性并使用颜色选择器。

用红色调成的纹理直立

TextureButton

TextureButton 类似于纹理竖起，但它有5个纹理槽：每个按钮的状态对应一个纹理槽。大多数情况下，您将使用“普通”、“按下”和“悬停”纹理。如果您的界面监听键盘的输入，focused将非常有用。第六个图像插槽，即点击页面，允许您使用2位纯黑白图像定义可点击区域。

在“基本按钮”部分中，您将发现一些更改按钮行为的复选框。什么时候？ Toggle Mode 打开时，按钮将在活动状态和正常状态之间切换。 Disabled 使其在默认情况下禁用，在这种情况下，它将使用 Disabled 纹理。纹理按钮与纹理框架共享一些属性：它具有 modulate 属性，以更改其颜色，以及 Resize 和 Stretch 更改其缩放行为的模式。

纹理按钮及其5个纹理槽

TextureProgress

TextureProgress 最多可层叠3个精灵以创建进度条。下纹理和上纹理夹住了进度纹理，进度纹理显示条的值。

这个 Mode 属性控制条的增长方向：水平、垂直或径向。如果将其设置为径向， Initial Angle 和 Fill Degrees 属性允许您限制仪表的范围。

要设置条形图的动画，您需要查看“范围”部分。设置 Min 和 Max 用于定义仪表范围的属性。例如，要表示角色的生活，您需要设置 Min 到 0, 和 Max 达到角色的最大寿命。改变 Value 属性以更新栏。如果你离开 Min 和 Max 默认值为 0 和 100, 并设置 Value 属性到 40 ，40%的 Progress 纹理将显示，60%的纹理将保持隐藏。

纹理进度条，填充三分之二

标签

标签 将文本打印到屏幕上。您可以在标签部分的检查器中找到它的所有属性。将文本写入 Text 属性，如果希望自动换行符符合文本框的大小，请选中自动换行符。如果关闭自动换行，则无法缩放节点。您可以分别使用对齐和有效对齐水平和垂直对齐文本。

标签图片

NinePatchRect

NinePatchRect 将纹理拆分为3行和3列。当你缩放纹理时，中心和边会平铺，但它从不缩放边角。为用户界面构建面板、对话框和可扩展的背景非常有用。

使用最小大小属性缩放的ninepatchrect

有两个工作流来构建响应的UI

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

1. 您可以使用许多容器节点来缩放和放置UI元素。他们控制他们的孩子。

2. 在另一边，您有布局菜单。它可以帮助您在父元素中锚定、放置和调整UI元素的大小。

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

当你为你的游戏和工具创建uis时，你会发现什么最适合每种情况。

使用锚定精确地放置UI元素

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

锚属性

如何更换锚

与任何属性一样，您可以在检查器中编辑4个定位点，但这不是最方便的方法。选择控制节点时，布局菜单将显示在工具栏中的视区上方。它为您提供了一个图标列表，通过单击来设置所有4个锚，而不是使用检查器的4个属性。只有在选择控制节点时，布局菜单才会显示。

视区中的布局菜单

锚定相对于父容器

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

边缘是相对于锚位置的，这是相对于锚位置的。实际上，您经常会让容器为您更新页边距。

页边距随定位点变化

移动或调整控制节点的大小时，页边距会自动更新。它们表示从控制节点边缘到其定位点的距离，该距离相对于父控制节点或容器。这就是为什么您的控制节点应该总是在一个容器中，正如我们稍后将看到的那样。如果没有父元素，那么边界将相对于节点自己的边界矩形，设置在检查器的rect部分中。

中心容器上的页边距设置为“完全矩形”定位点

尝试更改锚或将控制节点嵌套在容器中：页边距将更新。您很少需要手动编辑页边距。始终尝试先找到一个容器来帮助您；Godot附带了节点来为您解决所有常见的情况。需要在生活栏和屏幕边界之间添加空间吗？使用边缘容器。想创建垂直菜单吗？使用vboxContainer。更多信息请参见下文。

使用大小标记更改UI元素填充可用空间的方式

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

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

“expand”标志允许ui元素占用其所能占用的所有空间，并对其兄弟元素进行强制。它的边界矩形将靠其父项的边缘增长，或者直到被另一个UI节点阻止。

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

您需要一些实践来理解尺寸标签，因为它们的效果可能会根据您如何设置界面而发生很大的变化。

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

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

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

5个最有用的容器

如果您构建工具，您可能需要所有容器。但对于大多数游戏来说，一小部分就足够了：

• 边缘容器，在用户界面的部分添加边缘

• CenterContainer，以使其子级在其边界框中居中

• vboxContainer和hboxContainer，在行或列中排列UI元素

• GridContainer，以类似网格的模式排列控件节点

CenterContainer将其所有子级集中在其边界矩形内。如果希望选项保持在视区的中心，则通常将其用于标题屏幕。当它把所有东西都集中起来时，您通常需要一个嵌套在里面的容器。如果你使用纹理和按钮，它们会堆积起来。

CenterContainer正在运行。生活吧集中在它的父容器中。

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

边缘容器在游戏用户界面周围添加一个40px的边缘。

有两个盒子容器：vboxcontainer和hboxcontainer。不能添加BoxContainer节点本身，因为它是一个助手类，但可以使用垂直和水平的框容器。它们将节点排列成行或列。使用它们来排列商店中的商品，或者用不同大小的行和列构建复杂的网格，因为您可以将它们嵌套到心底。

hboxContainer水平对齐UI元素

vboxContainer自动将其子级排列到列中。它把它们一个接一个地放在一起。如果使用分离参数，它将在其子级之间留下间隙。hboxContainer将UI元素排列成一行。它类似于vboxcontainer，还有一个 add_spacer 方法在脚本的第一个子节点之前或最后一个子节点之后添加间隔控件节点。

GridContainer允许您以类似网格的模式排列UI元素。您只能控制它拥有的列数，它将根据子级的计数自行设置行数。如果你有九个孩子和三列，你将有9÷3=3行。再加三个孩子，你就有四行了。换句话说，它将在添加更多纹理和按钮时创建新行。与盒子容器一样，它有两个属性来分别设置行和列之间的垂直和水平分隔。

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

Godot的用户界面系统很复杂，而且还有很多东西要提供。要了解如何设计更高级的接口，请访问 GUI section 文件。