设计标题画面

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

1. 一个主菜单。
2. 一个带有健康条、能量条、炸弹和金钱计数器的游戏UI。

您将学习如何有效地设计游戏UI，以及如何使用Godot的 Control 节点。该页面专注于视觉部分，仅在编辑器中完成所有操作。要学习如何编写血槽，请阅读 用代码控制游戏的UI。

您将要创建的GUI。

下载项目文件： ui_main_menu_design.zip 并解压缩存档。在Godot中导入 start/ 项目以遵循本教程。end/ 文件夹包含最终结果。您将在 start/assets/main_menu 文件夹中找到所有精灵。

注解

Read the 使用 Control 节点设计界面 first to learn how Godot’s UI system works.

如何设计您的游戏UI

要设计一个好的UI，您首先要提出一个粗略的模型：一个纯绘制版本，重点放在UI组件的位置、它们的大小、和用户交互上。您只需要纸和笔。在此阶段，您不应该使用精美的图形和最终图形。然后，您只需要简单的占位符精灵，就可以进入Godot。您要确保玩家可以使用这些占位符在界面周围找到自己的路。

UI的粗略计划或模型

占位符不一定意味着难看，但是您应该保持图形简单和干净。在让玩家对UI进行游戏测试之前，请避免使用特殊效果、动画、和详细的插图。 否则：

1. 不好的图形可能会误导玩家对游戏的看法，您将会错过宝贵的反馈意见。
2. 如果用户体验不好，你还得重新设计一些角色。

小技巧

总是首先尝试让界面使用简单的文本和框。以后替换纹理很容易。专业的UX设计师通常使用灰色的简单轮廓和框。当您去掉颜色和精美的视觉效果时，正确地设置和放置UI元素要容易得多。它可以帮助您完善将要建立的设计基础。

在Godot中有两种方法来设计UI。 您可以：

1. 先将UI全部放在一个场景中，最后再提取出一些具有共性的组件保存为可重用场景。
2. 从可复用组件构建模板场景，并创建从基本场景继承的特定组件。

We will use the first approach, because the first version of your UI may not work as well as you’d like. You’re likely to throw parts away and redesign components as you go. When you’re sure everything works, it’s easy to make some parts reusable, as you’ll see below.

在Godot中可以看到下载的文件。(简单的)图形看起来非常整洁，这比粗糙的设计更有视觉上的优势（能更好地表达你的意图）。但它们仍然是作为一个占位符来使用的。

设计主菜单

在进入编辑器之前，我们要计划如何基于模型图像嵌套容器。

分解UI模型

这是我找到合适容器的三个经验法则：

1. 将UI分解为嵌套的盒式结构。从包含所有内容的最大盒子，到包含一个像带有标签的进度条、面板或按钮这样的小部件的小盒子。所有一切都是盒子。
2. 如果一个区域周围有一些填充，使用 MarginContainer。
3. 如果元素是按行或列组织的，请使用 HBoxContainer 或 ``VBoxContainer``组件。

这些规则足以使我们入门，并且对于简单的界面也能很好地工作。

对于主菜单，最大的框是整个游戏窗口。窗口的边缘和第一个组件之间有填充：这儿应该使用一个 MarginContainer。然后，将屏幕分为两列，因此我们将使用一个 HBoxContainer。在左栏中，我们将使用一个 VBoxContainer 来管理行。在右列中，我们将使用一个 CenterContainer 将插图居中。

构建界面的块，使用上面说到的三个经验法则分解。

小技巧

容器适应窗户的分辨率和宽高比。虽然我们可以手动放置UI元素，但是容器更快、更精确、响应更快。

准备主菜单场景

注解

本教程以1366×768的窗口大小为准。要改变项目的基本窗口大小，请打开编辑器顶部的**项目>项目设置**，然后将**显示>窗口>大小>宽度**改为``1366``，将**显示>窗口>大小>高度**改为``768``。

如果忘记更改窗口大小，则锚点和容器的行为可能与预期不符。

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

We have to add a root node before we can save the scene. Your UI’s root should be the outermost container or element. In this case it’s a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Ctrl + S (Cmd + S on macOS) to save the scene to the disk. Name it MainMenu.

再次选择 MarginContainer，然后转向属性检查器面板来定义边距的大小。向下滚动 Control 类，到 Custom Constants（自定义常量） 部分。展开它。设置边距如下：

• 右边距：120
• 顶部边距：80
• 左边距：120
• 底部边距：80

我们希望容器能充满窗口。在视图上方的工具栏中，打开 布局（Layout） 菜单，然后选择最后一个选项 Full Rect。

添加UI精灵

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

1. 标题或LOGO；
2. 三个文本选项，作为单独的节点；
3. 版本注释；
4. and the main menu’s illustration.

Click the Add Node button or press Ctrl + A (Cmd + A on macOS) on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Ctrl + D (Cmd + D on macOS) five times to create five extra TextureRect instances.

点击每个节点以将其选中。在属性检查器中，找到 Texture 属性，然后点击``[empty]`` -> Load。将打开一个文件浏览器，让您选择一个精灵以加载到纹理插槽中。

文件浏览器可以让你查找和加载贴图。

对所有 TextureRect 节点重复该操作。您应该拥有logo、插图、三个菜单选项和版本标注，它们分别作为一个单独的节点。然后，双击场景选项卡中的每个节点以重命名它们。尚未在容器中放置任何东西，因此看起来应该很杂乱。

六个带贴图的节点已加载。

注解

如果要在游戏中支持本地化，请使用 Labels 代替菜单项 TextureRect。

添加容器以自动放置UI元素

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container’s resize behavior, I recommend to favor box containers.

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

您应该有四个嵌套容器，并且下方有好几个 TextureRect 贴图节点。

在节点树中，选择应该在左侧出现的所有 TextureRect (贴图)节点：logo，菜单选项和版本标注。将它们拖放到 VBoxContainer 中。节点就会自动定位。

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

我们还有两个问题要解决：

1. 右边的字符没有居中。
2. Logo和其他UI元素之间没有合适的间距。

要使字符居右，请首先选择 CenterContainer。然后在属性检查器中，向下滚动到 尺寸标记（Size Flags） 类别，然后点击 垂直（Vertical） 属性右侧的字段，并检查 扩展（Expand） 还有 填充（Fill）。对 水平（Horizontal） 属性执行相同的操作。这使得 CenterContainer 扩展到所有可用空间，同时不妨碍其邻居 VBoxContainer。最后，将 Characters 节点拖放到 CenterContainer 中。Characters 元素将自动居中。

将角色节点放置在 CenterContainer 中后，它将立即在屏幕的右半部分居中。

To space out the menu options and the logo on the left, we’ll use one final container and its size flags. Select the VBoxContainer and press Ctrl + A (Cmd + A on macOS) to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI’s layout should barely change, if at all.

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

现在我们将菜单选项编组在一起，我们可以让它们的容器扩展到尽可能多的垂直空间。选择 MenuOptions 节点。在属性检查器面板中，向下滚动到 尺寸标志（Size Flags） 类别。点击 垂直（Vertical） 属性右侧的字段，并检查 展开（Expand） 和 填充（Fill）。容器将扩展以占据所有可用的垂直空间。但它不会影响到它的邻居， 即 Logo 和 Version 元素。

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

菜单选项应在UI的左边的列式布局中垂直居中。

为了把东西都包裹起来，让我们在菜单选项之间添加一些分隔。展开 大小标记（Size Flags） 下面的 自定义常量（Custom Constants） 类别，然后点击 分隔（Separation） 参数旁边的字段。设置为30。一旦您按下回车键，分隔（Separation） 属性就会激活，Godot会在菜单选项之间增加30个像素。

最终界面。

没有一行代码，我们就有了一个精确且响应迅速的主菜单。

恭喜你到达！您可以下载最终菜单 ui_main_menu_design.zip 以与您自己的进行比较。在下一个教程中，您将创建一个带有条形和项目计数器的游戏用户界面。

分解UI模型

响应式用户界面就是要确保我们的UI在所有屏幕类型上都能很好地缩放。电视屏幕和计算机显示器具有不同的大小和比例。在Godot中，我们使用容器来控制UI元素的位置和大小。

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container’s corners to resize it. The UI components should flow inside of it.

您会注意到，尽管容器在周围移动精灵，但不会缩放它们。这是正常的。我们希望UI系统能够处理不同的屏幕比例，但是我们还需要整个游戏来适应不同的屏幕分辨率。为此，Godot将上下缩放整个窗口。

您可以在项目设置中更改缩放模式：点击项目菜单 -> 项目设置。在窗口的左列中，查找显示类别。点击窗口子类别。在窗口的右边，您会找到一个叫 Stretch 的部分。三个设置，模式、纵横比、和缩小，控制屏幕的大小。有关更多信息，请参见 多分辨率。