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

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

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

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

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

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

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

  1. 边界矩形
  2. 聚焦并聚焦邻居
  3. 尺寸标记
  4. 外边距(Margin)
  5. 可选的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

要为该条设置动画,您需要查看“范围”部分。设置 MinMax属性以定义量规的范围。例如,要代表角色的生命,您需要将设置Min0,Max并将其设置为角色的最大生命。更改Value属性以更新栏。如果离开MinMax值的默认0100, 并设置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部分