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

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

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

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

如何设计游戏界面

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

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

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

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

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

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

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

设计主菜单

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

分解UI模型

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

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

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

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

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

准备主菜单场景

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

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

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

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

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

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

添加UI精灵

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

  1. 标题或徽标,
  2. 三个文本选项作为单独的节点,
  3. 版本说明,
  4. 和主菜单的插图。

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

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

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

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

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

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

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

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

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

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

要使Characters在右侧居中,请首先选择CenterContainer。然后在检查器中,向下滚动到“Size Flag类别,然后单击“Vertical 属性右侧的字段,然后选中“Expand  和“Fill。对Horizo​​ntal属性执行相同的操作。这使得扩展到所有可用空间。最后,将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 以与您自己的菜单进行比较。在下一个教程中,您将创建一个带有条形和道具计数器的游戏用户界面。

分解UI模型

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

嵌套的顺序很重要。要查看您的UI是否能很好地适应不同的屏幕比例,请选择根节点,按 Q激活“选择模式”,选择容器,然后在容器的一个角上单击并拖动以调整其大小。UI组件应在其中流动。

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

您可以在项目设置中更改缩放模式:单击 顶部菜单中的项目>项目设置。在窗口的左列中,查找“显示”类别。单击窗口子类别。在窗口的右侧,您会找到一个“拉伸”部分。ModeAspectShrink这三个设置可控制屏幕尺寸。有关更多信息,请参阅多种分辨率