在Godot中设计标题屏幕 _屏幕标题

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

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

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

文章图片
我们将要创建的GUI
如何设计游戏界面？
为了开发UI, 我们希望首先提出一个粗略的模型：纯图形版本, 重点放在UI组件的放置, 它们的大小和用户交互上。笔和纸是我们所需要的。在此阶段, 我们不应该使用精美的图形和最终图形。然后, 我们只需要简单的占位符精灵, 就可以跳入Godot了。我们要确保玩家可以使用这些占位符在界面周围找到自己的方式。

文章图片
UI的粗略计划或模型
【在Godot中设计标题屏幕】占位符不必太丑陋, 但是我们应该保持图形的简洁明了。在让玩家对UI进行测试之前, 请避免使用特殊效果, 动画和详细的插图。除此以外：

图形可能会扭曲玩家对体验的感知, 我们将错过宝贵的反馈意见
如果用户体验无法正常运行, 我们将不得不重做一些精灵

注意始终首先尝试使界面使用简单的文本和框。以后很容易更改纹理。专业的UX设计人员通常使用纯轮廓和表格进行灰度工作。当我们去除颜色和精美的视觉效果时, 正确地设置和放置UI元素要容易得多。它有助于我们完善将要建立的设计基础。有两种在Godot中设计UI的方法。我们可以：

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

我们使用第一种方法, 因为UI的第一个版本可能无法按我们期望的那样工作。在进行过程中, 我们可能会丢弃组件并重新设计组件。我们希望在进行过程中丢弃零件并重新设计组件。当我们确定一切正常时, 很容易使某些部件可重复使用, 如下所示。

文章图片
我们将在Godot中找到的文件。图形看起来比粗糙的设计更干净, 但是它们仍然是占位符
设计主菜单
在进入编辑器之前, 我们必须计划如何根据模型图像嵌套容器。
分解UI模型
这是我找到正确容器的三个经验法则：

在嵌套框中中断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的布局
现在, 我们对菜单选项进行了分组, 我们可以要求他们扩展其容器以占用尽可能多的垂直空间。选择MenuOptions节点。在检查器中, 滚动到” 大小标记” 类别。单击工作区属性右侧的字段, 然后选中” 展开” 。容器将扩展以占据所有可用的垂直空间。但它尊重其邻居, 徽标和变体元素。
在中心, 将VBoxContainer中的节点滚动到Inspector的顶部, 然后将Alignment属性更改为Center。