设计标题画面

在接下来的两个教程中,您将使用引擎的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. 如果元素是按行或列组织的,请使用 HBoxContainer 或 ``VBoxContainer``组件.

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

对于主菜单,最大的框是整个游戏窗口.窗口的边缘和第一个组件之间有填充:这儿应该使用一个 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和菜单选项.右侧有Characters,我们可以使用 HSplitContainer 或 HBoxContainer 来实现. SplitContainer 将区域分为上下或左右两部分,并允许用户自行调整区域大小. HBoxContainer 则只是根据子节点数量分割.尽管可以禁用 SplitContainer 的调整区域大小功能,但还是建议使用 BoxContainer .

选择 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).容器将扩展以占据所有可用的垂直空间.但它不会影响到它的邻居, 即 Logo 和 Version 元素.

要使节点在 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,控制着屏幕的大小.更多信息,请参阅 多分辨率.