使用 Control 节点设计界面

使用 `Control` 节点设计界面

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

Godot的编辑器由引擎的UI框架制成

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

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

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

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

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

所有 Control 节点具有相同的主要属性:

锚
边界矩形
焦点和焦点邻居
大小标志
边距
可选的UI主题

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

5个最常见的UI元素

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

对于大多数游戏,您只需要五种类型的UI元素和一些容器.这五个 Control 节点是:

Label:用于显示文本
TextureRect:主要用于背景,或应为静态图像的所有内容
TextureProgress:适用于生命条、进度条、水平杆、垂直杆或径向杆
NinePatchRect:可缩放面板
TextureButton:用于创建按钮

用于UI设计的5个最常见的 Control 节点

TextureRect

TextureRect 在UI内显示纹理或图像.它与Sprite节点类似,但提供了多种缩放模式,设置拉伸模式属性可改变其行为:

扩展缩放(兼容)(Scale On Expand (compat)) 仅当 expand 属性为 true 时,缩放纹理以适合节点的边界矩形；否则,其行为类似于 保持(Keep) 模式. 默认模式用于向后兼容.
缩放(Scale) 缩放纹理以适应节点的边界矩形.
平铺(Tile) 使纹理重复出现,但不会缩放.
保持(Keep) 和 保持居中(Keep Centered) 强制纹理保持其原始大小,分别位于框架的左上角或中心.
保持纵横比(Keep Aspect) 和 保持纵横比居中(Keep Aspect Centered) 可缩放纹理,但会强制其保持其原始纵横比,分别位于框架的左上角或中心.
保持纵横比覆盖(Keep Aspect Covered) 的工作方式与 保持纵横比居中 的一样,但较短的一侧适合边界矩形,而另一侧则裁剪到节点的极限.

与 Sprite 节点一样,您可以调制 TextureRect 的颜色.点击 Modulate(调制) 属性并使用颜色选择器.

用红色调制的 TextureRect

纹理按钮(TextureButton)

纹理按钮 (TextureButton)类似于纹理矩形(TextureRect),只不过它有6个纹理槽:每个纹理槽对应一个按钮的状态.大多数时候,会使用Normal(普通)、Pressed(按下)和Hover(悬停)纹理.Focused(聚焦)适用于监听键盘输入的界面.Click Mask(点击遮罩)允许你使用1位的纯黑白图片定义可点击区域.

在 基本按钮(Base Button) 部分中,您会发现一些复选框可以更改按钮的行为.当 切换模式(Toggle Mode) 开启时,当您按下该按钮时,它将在活动状态和正常状态之间切换.``禁用(Disabled)`` 会让它默认被禁用,在这种情况下,它会使用 禁用(Disabled) 纹理.``纹理按钮(TextureButton)`` 与纹理框架共享一些属性:它具有 Modulate(调制) 属性以更改其颜色,并具有 调整大小(Resize) 和 拉伸(Stretch) 模式以更改其缩放行为.

TextureButton 及其5个纹理插槽

TextureProgress

TextureProgress 最多可以将3个精灵分层来创建一个进度条.Under和Over纹理将Progress纹理夹在中间,显示进度条的数值.

模式(Mode) 属性控制进度条的增长方向:水平,垂直或径向.如果将其设置为径向,则可以使用 初始角度(Initial Angle) 和 填充度(Fill Degrees) 属性来限制量规的范围.

要动画化进度条,您需要查看 Range 部分.设置 Min 和 Max 属性来定义量规的范围.例如,要表示角色的生命,您需要将 Min 设置为 0,将 Max 设置为角色的最大生命.更改 Value 属性以更新进度条.如果将 Min 和 Max 的值设置为 0 和 100 的默认值,并将 Value 属性设置为 40,``Progress`` 纹理的40%会显示,60%会隐藏.

TextureProgress 条,三分之二填充

九宫格纹理(NinePatchRect)

NinePatchRect 将纹理分割成3行和3列.缩放纹理时,中心和侧面会平铺,但不会缩放角落.为UI构建面板、对话框和可伸缩的背景非常有用.

NinePatchRect 使用 min_size 属性缩放

有两个工作流程可以构建响应式UI

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

用锚点精确地放置UI元素: 使用 Layout 菜单来放置和调整UI元素相对于其父元素的大小.
Arrange control nodes automatically with containers: 使用容器节点自动缩放和放置UI元素.

这两种方法并不总是兼容的.由于容器控制着其子项,因此您无法在其上使用布局菜单.每个容器都有特定的作用,因此您可能需要嵌套几个容器才能获得工作界面.使用布局方法时,您将从下至上处理子级.由于没有在场景中插入额外的容器,所以层次结构会更加清晰,但是很难在行、列、栅格等中排列项.

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

用锚精确地放置UI元素

Control 节点有位置和大小,但它们也有锚和边距.锚定义节点的左、上、右和下边缘的原点或参考点.更改4个锚中的任何一个,将更改边距的参考点.

锚属性

如何更换锚

与任何属性一样,您可以在属性检查器面板中编辑4个锚点,但这不是最方便的方法.选择控制节点后,布局菜单将出现在视图上方的工具栏中.它为您提供了一个图标列表,在此通过单击就可以设置所有4个锚点,而不必在属性检查器面板去设置4个属性.仅当选择控制节点时,才会显示布局菜单.

视图中的布局菜单

相对于父容器的锚

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

边距相对于相对于锚的锚位置.在实践中,您通常会让容器为您更新边距

边距随锚而变化

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

CenterContainer 上的边距设置为 Full Rect(填充矩形) 锚点

尝试更改锚点或将 Control 节点嵌套在 Containers 中:边距将更新. 您几乎不需要手动编辑边距.始终尝试先找到一个可以帮助您的容器；Godot带有节点,可以为您解决所有常见情况.需要在生命条和屏幕边界之间添加空间？使用 VBoxContainer. 更多关于这些的内容,参见下文.

使用大小标签来更改UI元素如何填充可用空间

每个控制节点都有尺寸标志.它们告诉容器UI元素应该如何缩放.如果你在水平或垂直属性上添加了 “Fill “ 标志,节点的边界框将占用所有的空间,但它会尊重它的兄弟姐妹并保留其尺寸.如果在一个 HBoxContainer 中有 3 个 TextureRect 节点,在两个轴上都有 “Fill” 标志,它们将各自占用三分之一的可用空间,但不会超过.容器将接管该节点并自动调整其大小.

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

Expand(展开) 标志允许UI元素获得它所能获得的所有空间,并推动其兄弟元素.它的边界矩形将沿其父对象的边缘增长,或直到它被另一个UI节点阻止为止.

与上面的示例相同,但是中心节点有 Expand(展开) 大小标志

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

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

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

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

5个最有用的容器

如果您构建工具,您可能需要所有的容器.但是对于大多数游戏来说,只需几个就足够了:

MarginContainer边缘容器,以在部分UI周围添加边缘
CenterContainer,将其子项放在其边界框中
VboxContainer 和 HboxContainer,用于在行或列中排列UI元素
GridContainer,以栅格状模式排列 Controls 节点

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

CenterContainer 的作用.生命条位于它的父容器内部.

MarginContainer 在子节点的任何一侧添加一个边距.添加一个包含整个视图的 MarginContainer,以在窗口边缘和UI之间添加分隔.您可以在容器的顶部、左侧、右侧、或底部设置边距.无需勾选该复选框:点击相应的值框并输入任何数字.它会自动激活.

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

有两个 BoxContainer:VBoxContainer 和 HBoxContainer.您不能添加 BoxContainer 节点本身,因为它是一个辅助类,但是您可以使用垂直和水平框容器.它们将节点排列成行或列.使用它们可以在商店中排列商品,或使用大小不同的行和列构建复杂的栅格,因为您可以将它们嵌套在所需位置.

HBoxContainer 水平对齐UI元素

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

GridContainer 允许您按网格模式排列UI元素.您只能控制其具有的列数,并且它将根据其子级计数自行设置行数.如果您有9个子节点和3列,您将有9÷3 = 3行.再加3个子项,就有4行了.换句话说,当您添加更多纹理和按钮时,它将创建新行.像盒子容器一样,它具有两个属性,分别设置行和列之间的垂直和水平间隔.