设计与控制节点的接口

手机, 计算机显示器和电视屏幕具有各种形状和尺寸。要发布游戏, 我们必须支持不同的屏幕比例和分辨率。构建与所有平台兼容的响应式接口可能是具有挑战性的。

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

本指南将使我们开始进行UI设计。我们将学习：

建立游戏界面的五个最有用的控制节点
如何使用UI元素的锚点
如何使用容器放置和安排我们的用户界面
五个最常见的容器

要学习控制界面并将其连接到其他脚本, 请阅读在Godot中构建第一个游戏UI。设计接口时仅使用控制节点。

他们具有独特的品质, 可以彼此合作。其他节点(例如Node2D, Sprite等)将无法工作。我们仍然可以使用某些与其他节点配合使用的节点, 例如Animation Player, Tween或StreamPlayer。控制节点是Canvasitems, 例如Node2D, 因此我们可以对其应用着色器。

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

锚
边界矩形
关注邻居
尺寸标记
余量
可选的UI主题。

一旦我们了解了控制节点的基础知识, 我们将花费更少的时间来学习从该节点派生的所有节点。

五个常见的UI元素

Godot附带了数十个控制节点。这些编辑器中有很多可以帮助我们构建插件和应用程序。要了解有关它们的更多信息, 请单击有关高级UI节点和主题的指南。

对于大多数游戏, 我们只需要五种类型的UI元素和一些容器。这五个容器。

这五个控制节点是：

标签：用于显示文字
TextureRect：主要用于背景或应为静态图像的所有内容。
TextureProgress：适用于生命条, 负载条, 水平, 垂直或径向
NinePatchRect：用于可扩展面板
TextureButton：用于创建按钮

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

TextureRect

TextureRect在UI内显示纹理或图像。它类似于Sprite节点, 但提供了几种缩放模式。设置拉伸模式属性以更改其行为：

仅当Expand Farm正确时, Expand(compat)上的比例才会缩放纹理以适合节点的边界矩形。否则, 其行为类似于保持模式。向后兼容的默认模式。
比例尺测量纹理以适合节点的边界矩形
瓷砖会重复纹理, 但不会缩放
集中并放置迫使表面分别保持其原始形状, 分别位于框架的左上角或中心
保持宽高比并使元素居中, 但缩放表面, 但迫使其以原始宽高比分别保持在框架的左上角或中心。
当元素居中时保持宽高比覆盖, 但是较小的边边界矩形和其他一个剪辑适合节点的边界。

使用精灵节点, 我们可以修改TextureRect的颜色。单击”调制”属性, 然后使用颜色选择器。

用红色调制的TextureRect。

TextureButton

TextureButton类似于TextureRect, 除了它有五个纹理插槽：每个按钮状态一个。在大多数情况下, 我们将使用”普通”, “按下”和”悬停”纹理。如果我们的界面侦听键盘的输入, 则”聚焦”很有用。第六个图像插槽和单击”蒙版”使我们可以使用2位纯黑白图像来定义可单击区域。

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

TextureProgress

TextureProgress图层具有3个精灵, 用于创建进度条。在纹理下方和上方将进度进度夹在中间, 显示进度条的值。

mode属性控制带材移动的方向：水平, 垂直或径向。如果将其设置为径向, 则”初始角度”和”填充度”属性将限制仪表的范围。

要为栏设置动画, 我们要查看类别部分。设置最小和最大属性以定义量规的范围。例如, 为了表示角色的生命, 我们需要将Min设置为0, Max设置为默认值1和100, 并设置Value属性以更新条形图。如果我们将”最小值”和”最大值”保留为默认值1和100, 并将”值”属性设置为40, 则将显示进度纹理的40％, 而其中的60％将保持隐藏状态。

TextureProgress栏, 填充了三分之二

标签将文本打印到屏幕上。我们将在检查器的”标签”部分中找到其所有属性。在”文本”属性中编写文本, 然后检查”自动换行”是否符合文本框的大小。如果Autowrap关闭, 我们将无法缩放节点。我们可以分别使用Align和Valign将文本水平和垂直对齐。

标签图片

NinePatchRect

NinePatchRect将纹理分为3行和3列。当我们测量纹理时, 中心和侧面会平铺, 但永远不会围绕角落。创建面板, 对话框和可缩放的背景对于我们的UI很有用。

NinePatchRect使用min_size属性缩放

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

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

我们有许多容器节点可供使用, 可以为我们扩展和放置UI元素。他们控制自己的孩子。
另一方面, 我们有布局菜单。它有助于我们在其父元素内锚定, 放置UIUI元素并调整其大小。

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

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

使用锚点精确放置UI元素

将UI元素与锚点放在一起

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

锚点属性

如何更换锚点？

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

视口中的布局菜单

锚相对于原始容器

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

边距相对于锚点位置, 与锚点相当。实际上, 我们将让容器为我们更新边距。

边距随锚变化

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

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

尝试更改锚点或将我们的Control节点嵌套在Containers中：边距将更新。

我们几乎不需要手动编辑边距。始终尝试寻找一个可以帮助我们的容器； Godot带有节点, 可以为我们解决所有常见情况。是否需要在生活栏和屏幕边框之间添加空间？

使用MarginContainer。要建立垂直菜单吗？使用VBoxContainer。这些在下面更多。

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

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

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

“扩展”标志允许UI元素可以全部发生并推向其同级。它的边界矩形将相对于其父对象的边缘增大, 或者直到另一个UI节点将其阻塞为止。

与上面相同的示例, 但中心节点必须”扩展”大小标志

我们将需要一些实践来了解size标签, 因为它们的效果可能会发生很大变化, 具体取决于我们如何设置界面。

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

容器会自动排列所有子级的控制节点, 包括行, 列等中的其他容器。

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

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

五个最有用的容器

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

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

CenterContainer将其所有子项居中于其边界矩形内。如果我们希望这些选项停留在视口的中心, 则通常用于标题屏幕。当它使所有内容居中时, 我们通常会希望在其中嵌套一个容器。如果我们改用纹理和按钮, 它们将堆积起来。

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

MarginContainer在Gam用户界面周围添加了40px的边距

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

HBoxContainer将UI元素水平对齐

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

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

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

Godot的UI系统非常复杂, 还提供了更多功能。要了解如何设计更高级的界面, 请阅读使用其他控制节点设计高级UI。