在Godot中设计标题屏幕

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

• 主菜单
• 游戏界面，带有能量条，健康条，炸弹和点钞机

我们将学习如何有效地设计游戏UI，以及如何使用Godot的控制节点。这些页面着重于视觉部分：我们对编辑器所做的一切。要学习如何对生活吧进行编码，请使用code来控制游戏的UI 。

我们将要创建的GUI

如何设计游戏界面?

为了开发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将视图保存到磁盘。命名菜单。

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

• 保证金权：120
• 保证金最高：80
• 左边距：120
• 下边距：80

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

添加UI精灵

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

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

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

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

文件浏览器使我们可以搜索和加载纹理

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

加载具有纹理的六个节点

注意如果我们想在游戏中支持本地化，请使用Labels代替菜单上的TextureRect。

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

我们的主菜单在屏幕边缘周围有一些空白。它分为两个部分：在左侧，我们有徽标和菜单选项。在右边，我们有字符。为此，我们可以使用以下两个容器之一： HSplitContainer或HBoxContainer 。

分割后的容器将区域分为两部分：一左一右或一顶侧和一底侧。分割后的容器将空间分为两个：一个左和一个右，或者一个顶和一个底侧。它们还允许用户使用交互式栏来调整左右字段的大小。另一方面， HBoxcontainer只被划分为与其中的子项一样多的列。尽管我们可以禁用拆分容器的调整大小，但我们建议与盒子容器兼容。

选择MarginContainer并添加HBoxContainer 。然后，我们需要两个容器中，作为我们HBoxContainer的孩子：一个VBoxContainer左侧菜单选项和说明右侧的CenterContainer。

我们应该有四个嵌套的容器，并且旁边有TextureRect节点。

在节点树中，选择位于左侧的TextureRect节点：徽标，菜单选项和版本注释。拖放到VBoxContainer中。然后，将轮廓节点拖到CenterContainer中。节点自动需要一个位置。

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

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

• 右边的字符未居中
• 徽标和其他UI元素之间没有空格

为了使字符在右侧居中，我们将使用CenterContainer 。添加CenterContainer节点HBoxContainer的孩子。然后在检查器中，滚动到“大小标志”类别，然后单击“工作区”属性右侧的字段，然后选中“展开”。对水平属性执行相同的操作。最后，将字符拖放到C enterContainer中。字符元素将自动位于中心。

由于它位于中心容器内，因此字符节点位于屏幕右半边的中心

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

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

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

以VBoxContainer中的节点为中心，滚动到Inspector的顶部，然后将Alignment属性更改为Center 。

菜单选项应在用户界面的左列中垂直居中

让我们在菜单选项之间添加一些分隔。展开“大小”标志下的“自定义常量”范围，然后单击“分离”参数旁边的字段。将其设置为30。按Enter键后，“分离”属性被激活，并且Godot在菜单选项之间添加了30个像素。

最终界面

没有一行代码，我们就有一个准确的主菜单。

在下一个教程中，我们将创建一个带有条形和物品计数器的游戏用户界面。