Godot游戏引擎-设计UI(一)

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

主菜单。
带有HP栏，能量栏，炸弹和点钞机的游戏UI。

您将学习如何有效地设计游戏UI，以及如何使用Godot的Control节点。该页面着重于视觉部分：您将从编辑器执行的所有操作。

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

如何设计游戏界面

要设计一个好的UI，您首先要提出一个粗略的模型：一个纯图形版本，重点放在UI组件的位置，大小和用户交互上。笔和纸是您所需要的。在此阶段，您不应该使用精美的图形和最终的图形。您只需要简单的占位符精灵，就可以使用Godot了来设计了。您要确保玩家可以使用这些占位符在界面进行交互。

占位符不必太丑陋，但您应保持图形简洁明了。在让玩家对UI进行游戏测试之前，请避免使用特殊效果，动画和详细的插图。除此以外：

图形可能会扭曲玩家对体验的感知，您会错过宝贵的反馈。
如果用户体验不起作用，则必须重做一些精灵。

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

有两种在Godot中设计UI的方法。你可以：

将它们全部构建在一个场景中，并最终将一些分支另存为可重用场景。
为可重用组件构建模板场景，并创建从基础场景继承的特定组件。

我们将使用第一种方法，因为您的UI的第一个版本可能无法正常运行。您可能会随手丢弃零件并重新设计组件。当您确定一切正常时，很容易使某些部件可重复使用，如下所示。

设计主菜单

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

分解UI模型

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

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

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

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

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

准备主菜单场景

本教程基于1366×768的窗口大小。要更改项目的基本窗口大小，请在编辑器顶部打开“项目”>“项目设置”，然后将“显示”>“窗口”>“大小”>“宽度”更改为1366，将“ 显示”>“窗口”>“大小”>“高度”更改为768。

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

保存场景之前，我们必须添加一个根节点。用户界面的根应该是最外面的容器或元素。在这种情况下，它是一个 MarginContainer。MarginContainer是大多数界面的良好起点，因为您经常需要在UI周围填充。按（在macOS上）将场景保存到磁盘。将其命名为MainMenu。

再次选择MarginContainer，然后前往检查器以定义边距的大小。向下滚动Control类，到该Custom Constants 部分。展开它。这样设置边距：

Margin Right: 120
Margin Top: 80
Margin Left: 120
Margin Bottom: 80

我们希望容器适合窗口。在视口上方的工具栏中，打开“布局”菜单，然后选择最后一个选项“整个矩形”。

添加UI精灵

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

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

单击添加节点按钮，开始键入TextureRect以找到相应的节点，然后按Enter。选择新节点后，按五次Ctrl+d以创建五个额外的实例。

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

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

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

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

我们的主菜单在屏幕边缘周围有一些空白。它分为两个部分：在左侧，您有徽标和菜单选项。在右边，您有角色。我们可以使用以下两个容器之一来实现此目的：HSplitContainer或HBoxContainer。拆分容器将区域拆分为两个：左侧和右侧，或顶部和底部。它们还允许用户使用交互式栏来调整左右区域的大小。另一方面，HBoxContainer 只要将其拆分为与具有子级一样多的列。尽管您可以停用拆分容器的调整大小行为，但我还是建议您使用盒装容器。

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

在节点树中，选择TextureRect应在左侧显示的所有节点：徽标，菜单选项（继续，NewGame，选项）和版本注释。将它们拖放到中VBoxContainer。节点应自动定位。

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

右侧的Characters未居中。
LOGO和其他UI元素之间没有空格。

要使Characters在右侧居中，请首先选择CenterContainer。然后在检查器中，向下滚动到“Size Flag”类别，然后单击“Vertical ”属性右侧的字段，然后选中“Expand ” 和“Fill”。对Horizontal属性执行相同的操作。这使得扩展到所有可用空间。最后，将Characters节点拖放到CenterContainer中。Characters元素将自动居中.

为了在左侧隔开菜单选项和徽标，我们将使用一个另外一个VBoxContainer。选择，VBoxContainer在其中添加一个新节点VBoxContainer。添加一秒钟并将其命名为MenuOptions。选择所有三个菜单选项，拖放到新的VBoxContainer内部。这时，UI的布局应该几乎没有变化。

../../_images/ui_main_menu_containers_step_4.png

现在我们将菜单选项分组在一起，我们可以告诉它们的容器扩展以占用尽可能多的垂直空间。选择 MenuOptions节点。在检查器中，向下滚动到“ 尺寸标记”类别。单击“垂直”属性右侧的字段，然后选中“填充”之外的“扩展”。容器展开时会占用所有可用的垂直空间。

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

../../_images/ui_main_menu_containers_step_5.png

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

../../_images/ui_main_menu_design_final_result.png

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

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