在 Godot 中设计标题画面

2025年3月17日 | 阅读 7 分钟

在接下来的两个教程中，我们将使用引擎的 UI 系统逐步构建两个 UI（用户界面）场景

主菜单
带有能量条、血条、炸弹和金钱计数器的游戏 UI

我们将学习如何高效地设计游戏 UI 以及如何使用 Godot 的控件节点。此页面侧重于视觉部分：我们在编辑器中所做的一切。要学习如何编写生命条代码，请使用代码控制游戏 UI。

我们将要创建的 GUI

如何设计我们的游戏 UI？

为了开发 UI，我们首先要提出一个粗略的模型：一个简单的绘图版本，重点是放置我们的 UI 组件、它们的大小和用户交互。我们只需要纸和笔。在这个阶段我们不应该使用花哨和最终的图形。然后，我们只需要简单的占位符精灵，我们就可以跳入 Godot。我们要确保玩家可以使用这些占位符找到他们在界面中的位置。

UI 的粗略计划或模型

占位符不必意味着丑陋，但我们应该保持图形的干净和直接。在让玩家测试我们的 UI 之前，避免特殊效果、动画和详细的插图。否则

图形可能会扭曲玩家对体验的感知，我们将错过宝贵的反馈
如果用户体验不起作用，我们将不得不重做一些精灵

注意
始终尝试先使用简单的文本和框使界面工作。以后很容易更改纹理。专业的 UX 设计师通常使用灰度、简单的轮廓和表格工作。当我们去除颜色和花哨的视觉效果时，更容易正确调整大小和放置 UI 元素。它可以帮助我们完善我们将要构建的设计基础。

在 Godot 中设计 UI 有两种方法。我们可以

在单个视图中创建所有这些内容，并最终将一些分支保存为可重用的视图。
为可重用组件创建模板视图，并创建从我们的基本视图继承的特定部分

我们使用第一种方法，因为我们 UI 的第一个版本可能无法按照我们想要的方式工作。随着我们的进行，我们很可能会丢弃组件并重新设计组件。我们希望随着我们的进行丢弃部分并重新设计组件。当我们确定一切正常时，很容易使某些部分可重用，我们将在下面看到。

我们将在 Godot 中找到的文件。这些图形看起来比粗略的设计更干净，但它们仍然是占位符

设计主菜单

在我们跳入编辑器之前，我们必须根据我们的模型图像计划如何嵌套容器。

分解 UI 模型

以下是我寻找正确容器的三个经验法则

将 UI 分解为嵌套的框，从包含所有内容的右侧到包含一个窗口小部件的最小的框，例如带有其标签的条、面板或按钮
如果某个区域周围有一些填充，请使用 MarginContainer
如果元素排列成行或列，请使用 HBoxContainer 和 VBoxContainer。

这些规则足以开始并适用于简单的界面。

对于主菜单，最大的框是整个游戏窗口。窗口的边缘和第一个组件之间有填充：它必须是边距中心。然后，屏幕分为两列，以便我们使用 Hboxcontainer。我留下了左侧的列，我们将使用 VBoxContainer 管理行。在右侧的列中，我们使用 VBoxcontainer 处理行。在右侧的列中，我们使用 CenterContainer 将插图居中。

界面构建块，使用三个经验法则分解

注意
容器适应窗口分辨率和宽高比。虽然我们可以手动保留 UI 元素，但框更快、更准确、响应更快。

准备主菜单场景

让我们创建主菜单。我们将在单个场景中构建它。要创建空场景，请单击场景菜单 -> 新场景。

我们必须在保存视图之前添加一个根节点。我们 UI 的根应该是最外面的容器或元素。在这种情况下，它是一个边距保留器。

MarginContainer 是大多数界面的一个好的起点，因为我们经常需要在 UI 周围进行填充。按 Meta + S 将视图保存到磁盘。将其命名为 Menu。

要定义边距的大小，请再次选择边距指示器，然后转到检查器。将 Control 类滚动到自定义常量部分。展开它。设置边距如下

右边距：120
上边距：80
左边距：120
下边距：80

我们希望容器适合窗口。在视口中，打开布局菜单并选择最后一个选项，全矩形。

添加 UI 精灵

选择 MarginContainer 并将 UI 元素创建为 TextureRect 节点。我们需要

标题或徽标
三个文本选项，作为单独的节点
版本说明
以及主菜单的插图

单击添加节点按钮或在键盘上按 Meta + A。键入 TextureRect 以查找相关节点，然后按 Enter。选择新节点后，按 Meta + D 五次以创建五个新的 TextureRect 实例。

单击每个节点以选择它。在检查器中，单击纹理属性右侧的图标，然后单击加载。文件浏览器打开，让我们选择要加载到纹理槽中的精灵。

文件浏览器让我们搜索和加载纹理

对所有 TextureRect 节点重复该操作。我们应该有一个徽标、插图、三个菜单选项和版本说明作为单独的节点。然后，双击视图选项卡中的每个节点并重命名它们。

六个节点，加载了纹理

注意
如果我们想在我们的游戏中支持本地化，请使用标签代替 TextureRect 作为菜单选项。

添加容器以自动保存 UI 元素

我们的主菜单在屏幕边缘周围有一些边距。它分为两部分：左侧是徽标和菜单选项。在右侧，我们有角色。为了实现这一点，我们可以使用两个容器之一：HSplitContainer 或 HBoxContainer。

拆分容器将区域划分为两个：一个左侧和一个右侧，或一个顶部和一个底部。拆分容器将空间划分为两个：一个左侧和一个右侧，或一个顶部和一个底部。它们还允许用户使用交互式栏调整左右字段的大小。另一方面，HBoxcontainer 仅划分为与其中的子节点一样多的列。虽然我们可以禁用拆分容器的大小调整，但我们建议与框容器兼容。

选择 MarginContainer 并添加 HBoxContainer。然后，我们需要两个容器作为我们 HBoxContainer 的子节点：一个用于左侧菜单选项的 VBoxContainer，以及一个用于右侧插图的 CenterContainer。

我们应该有四个嵌套容器，而 TextureRect 节点则位于其旁边。

在节点树中，选择将移到左侧的 TextureRect 节点：徽标、菜单选项和版本说明。拖放到 VBoxContainer 中。然后，将描绘节点拖到 CenterContainer 中。节点需要一个自动位置。

容器自动放置并调整纹理大小

我们还剩下两个问题要解决

右侧的角色未居中
徽标和其他 UI 元素之间没有空格

要在右侧居中角色，我们将使用 CenterContainer。添加一个 CenterContainer 节点作为 HBoxContainer 的子节点。然后，在检查器中，滚动到 Size Flags 类别并单击 Workspace 属性右侧的字段并检查 Expand。对水平属性执行相同的操作。最后，将字符拖放到 C enterContainer 中。字符元素将自动居中。

由于它位于中心容器内，因此字符节点在屏幕右半部分内居中

为了排除左侧的菜单选项和徽标，我们将使用最终容器及其大小标志。选择 VBoxContainer 并将其命名为“MenuOptions”。选择所有三个菜单选项：NewGame、Continue 和 Options，然后将它们拖放到新的 VBoxContainer 中。 UI 的布局应该很难更改，如果可以更改的话。

将新容器放置在其他两个节点之间以保留 UI 的布局

我们现在对菜单选项进行了分组，我们可以要求它们扩展其容器以占用尽可能多的垂直空间。选择 MenuOptions 节点。在检查器中，滚动到 Size Flags 类别。单击工作区属性右侧的字段，然后检查 Expand。容器会扩展以占用所有可用的垂直空间。但它尊重其邻居、徽标和变体元素。

要使 VBoxContainer 中的节点居中，请滚动到检查器的顶部并将 Alignment 属性更改为 Center。

菜单选项应该在 UI 的左列中垂直居中

让我们在菜单选项之间添加一些分隔。展开 Size flag 下的 Custom Constants 范围，然后单击 Separation 参数旁边的字段。将其设置为 30。一旦我们按下 Enter，Separation 属性就会被激活，Godot 会在菜单选项之间添加 30 像素。