设计标题画面

在接下来的两个教程中, 您将使用引擎的UI(用户界面)系统逐步构建两个响应式UI场景:

  1. 一个主菜单.

  2. 一个带有健康条, 能量条, 炸弹和金钱计数器的游戏UI.

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

../../_images/ui_main_menu_design_final_result.png

您将要创建的GUI.

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

注解

请先阅读 使用 Control 节点设计界面 来学习Godot的用户UI系统是如何工作的.

如何设计您的游戏UI

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

../../_images/ui_design_rough.png

UI的粗略计划或模型

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

  1. 不好的图形可能会误导玩家对游戏的看法, 您将会错过宝贵的反馈意见.

  2. 如果用户体验不好, 你还得重新设计一些角色.

小技巧

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

在Godot中有两种方法来设计UI. 您可以:

  1. 先将UI全部放在一个场景中, 最后再提取出一些具有共性的组件保存为可重用场景.

  2. 从可复用组件构建模板场景, 并创建从基本场景继承的特定组件.

我们将使用第一种方法, 因为初版的UI的通常会与所想有所落差, 可能会删除并重新设计部分组件. 当确定所有东西做好后, 很容易提取出可重复使用的部分, 这点我们稍后就会看到.

../../_images/ui_main_menu_placeholder_assets.png

在Godot中可以看到下载的文件. 简洁的图形比粗糙的设计能更好地表达的意图. 但它们仍然是作为一个占位符来使用的.

设计主菜单

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

分解UI模型

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

  1. 将UI分解为嵌套的盒式结构. 从包含所有内容的最大盒子, 到包含一个像带有标签的进度条, 面板或按钮这样的小部件的小盒子. 所有一切都是盒子.

  2. 如果一个区域周围有一些填充, 使用 MarginContainer.

  3. 如果元素是按行或列组织的, 请使用 HBoxContainerVBoxContainer 组件.

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

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

../../_images/ui_mockup_break_down.png

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

小技巧

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

准备主菜单场景

注解

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

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

让我们来创建主菜单, 将在一个单独的场景中建立它. 要创建一个空的场景, 点击 Scene > New Scene .

在保存场景之前, 我们必须添加一个根节点.UI的根应该是最外层的容器或元素. 在这个例子中, 它是一个 MarginContainer . MarginContainer 适用于大多数界面, 因为UI周围通常需要留白. 按下 Ctrl+S (在macOS上是 Cmd+S )将场景保存到磁盘, 并命名为 MainMenu .

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

  • 右边距:120

  • 顶部边距:80

  • 左边距:120

  • 底部边距:80

我们希望容器能够适合窗口. 在视口上方的工具栏中, 打开 Layout 菜单, 选择最后一个选项 Full Rect .

添加UI精灵

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

  1. 标题或LOGO;

  2. 三个独立的文本选项;

  3. 版本注释;

  4. 以及主菜单的插图.

点击 添加子节点(Add Node) 按钮或是快捷键 Ctrl+A (macOS为 Cmd+A ). 输入 TextureRect 以找到相应的节点并按 Enter . 选中新节点后, 按 Ctrl+D (macOS为 Cmd+D )五次拷贝出的五个 TextureRect 实例.

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

../../_images/ui_texturerect_load_texture.png

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

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

../../_images/ui_main_menu_6_texturerect_nodes.png

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

注解

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

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

我们的主菜单在屏幕边缘有一定的留白,并且分成了两部分:左边是Logo和菜单选项,右边是角色。实现时我们可以在 HSplitContainerHBoxContainer 两个容器之中任选其一。拆分容器(Split Container)会将区域划分成左右或者上下两部分,并且允许用户通过可交互的分隔条来调整两个区域的大小划分。而 HBoxContainer 则只是将自身划分成和子节点数量相等的若干列。虽然你也可以让拆分容器禁止改变区域大小,但是还是建议使用格子容器(Box Container)。

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

../../_images/ui_main_menu_containers_step_1.png

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

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

../../_images/ui_main_menu_containers_step_2.png

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

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

  1. 右边的字符没有居中.

  2. Logo和其他UI元素之间没有合适的间距.

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

../../_images/ui_main_menu_containers_step_3.png

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

为了隔开左侧的菜单选项和Logo, 我们还需要一个容器并设置其Size Flags. 选择 VBoxContainer 并按 Ctrl+A (macOS为 Cmd+A )在其中添加一个新节点. 添加第二个 VBoxContainer , 并将其命名为 MenuOptions . 选择所有菜单选项( Continue,``NewGame`` 和 Options ), 并将其拖放至新的 VBoxContainer 中.UI的布局应该看起来和刚才差不多.

../../_images/ui_main_menu_containers_step_4.png

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

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

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

../../_images/ui_main_menu_containers_step_5.png

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

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

../../_images/ui_main_menu_design_final_result.png

最终界面.

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

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

分解UI模型

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

嵌套的顺序很重要. 要查看UI是否能很好地适应不同的屏幕比例, 可以先选择根节点, 按 Q 激活鼠标模式(Select Mode), 选择容器并拖拽容器角落以调整其大小.UI组件应该在其中流畅移动.

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

你可以在项目设置中改变比例模式: 点击顶部菜单中的 Project > Project Settings . 在窗口的左栏, 找到 Display 类别. 点击 Window 子类别. 在窗口的右侧, 你会发现一个 Stretch 部分. 三个设置, Mode , Aspect , 和 Shrink , 控制着屏幕的大小. 更多信息, 请参阅 多分辨率.