设计标题画面

在接下来的两个教程中,您将使用引擎的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 文件夹中找到所有精灵。

注解

先阅读:doc:`ui_introduction_to_the_ui_system`来学习Godot的用户界面系统是如何工作的。

如何设计您的游戏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元素,但是容器更快、更精确、响应更快。

准备主菜单场景

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

在保存场景之前,我们必须添加一个根节点。UI的根应该是最外层的容器或元素。在这种情况下,它是一个 MarginContainerMarginContainer 是大多数界面的良好起点,因为您经常需要在UI周围填充。按下 Meta+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) Meta+A。开始键入 TextureRect 以找到相应的节点,然后按 Enter 键。选中新节点后,按(Ctrl+D) Meta+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。拆分容器将区域分为两部分:左侧和右侧,或顶部和底部。它们还允许用户使用交互式栏来调整左右区域的大小。另一方面,HBoxContainer 只是将自身拆分为具有与子级数目相同的列。尽管您可以禁用拆分容器的调整大小行为,但还是建议您使用盒式容器。

选择 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,我们将使用一个最终容器及其尺寸标记。选择 VBoxContainer 并按 Meta + 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键激活选择模式,选择容器,然后单击并拖动容器的某个角落以调整其大小。UI组件应该在其中流动。

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

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