在Godot中设计标题屏幕

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

  1. 主菜单
  2. 游戏界面, 带有能量条, 健康条, 炸弹和点钞机
我们将学习如何有效地设计游戏UI以及如何使用Godot的控制节点。这些页面着重于视觉部分:我们对编辑器所做的一切。要学习如何编写生活条, 请使用代码控制游戏的用户界面。
在Godot中设计标题屏幕

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

文章图片
UI的粗略计划或模型
【在Godot中设计标题屏幕】占位符不必太丑陋, 但是我们应该保持图形的简洁明了。在让玩家对UI进行测试之前, 请避免使用特殊效果, 动画和详细的插图。除此以外:
  1. 图形可能会扭曲玩家对体验的感知, 我们将错过宝贵的反馈意见
  2. 如果用户体验无法正常运行, 我们将不得不重做一些精灵
注意始终首先尝试使界面使用简单的文本和框。以后很容易更改纹理。专业的UX设计人员通常使用纯轮廓和表格进行灰度工作。当我们去除颜色和精美的视觉效果时, 正确地设置和放置UI元素要容易得多。它有助于我们完善将要建立的设计基础。 有两种在Godot中设计UI的方法。我们可以:
  1. 在单个视图中创建所有这些视图, 最后将一些分支保存为可重用视图。
  2. 创建可重用组件的模板视图, 并创建从我们的基本视图继承的特定零件
我们使用第一种方法, 因为UI的第一个版本可能无法按我们期望的那样工作。在进行过程中, 我们可能会丢弃组件并重新设计组件。我们希望在进行过程中丢弃零件并重新设计组件。当我们确定一切正常时, 很容易使某些部件可重复使用, 如下所示。
在Godot中设计标题屏幕

文章图片
我们将在Godot中找到的文件。图形看起来比粗糙的设计更干净, 但是它们仍然是占位符
设计主菜单
在进入编辑器之前, 我们必须计划如何根据模型图像嵌套容器。
分解UI模型
这是我找到正确容器的三个经验法则:
  1. 在嵌套框中中断UI, 从右侧包含所有内容, 到包含一个小部件的最小的UI, 例如带有标签的条, 面板或按钮的小部件
  2. 如果某个区域周围有填充, 请使用MarginContainer
  3. 如果元素按行或列排列, 请使用HBoxContainer和VBoxContainer。
这些规则足以启动并适用于简单的界面。
对于主菜单, 最大的框是整个游戏窗口。窗口的边缘和第一个组件之间有填充物:它必须是边缘中心。然后, 将屏幕分为两列, 以便我们使用Hboxcontainer。我已经离开了该列, 我们将使用VBoxContainer管理行。在右列中, 我们使用VBoxcontainer处理行。在右列中, 我们将插图与CenterContainer居中对齐。
在Godot中设计标题屏幕

文章图片
界面构建块, 使用三个经验法则分解
注意容器适应于窗口分辨率和宽高比。尽管我们可以手工保留UI元素, 但是框可以更快, 更准确且响应更快。 准备主菜单场景
让我们创建主菜单。我们将在一个场景中构建它。要创建空场景, 请单击场景菜单-> ” 新建场景” 。
保存视图之前, 我们必须添加一个根节点。 UI的根应该是最外面的容器或元素。在这种情况下, 它是保证金保持器。
MarginContainer是大多数界面的良好起点, 因为我们经常需要在UI周围填充。按Meta + S将视图保存到磁盘。命名菜单。
要定义边距的大小, 请再次选择切边器, 然后转到检查器。将控件类滚动到” 自定义常量” 部分。展开它。设置边距如下:
  • 保证金权利:120
  • 保证金最高:80
  • 左边距:120
  • 下边距:80
我们希望容器必须适合窗口。在视口中, 打开” 布局” 菜单, 然后选择最后一个选项” 全矩形” 。
添加UI精灵
选择MarginContainer并将UI元素创建为TextureRect节点。我们需要:
  1. 标题或徽标
  2. 三个文本选项, 作为单独的节点
  3. 版本说明
  4. 还有主菜单的插图
点击添加节点按钮或按键盘上的Meta +A。键入TextureRect查找相关节点, 然后按Enter。选择新节点后, 按Meta + D五次以创建五个新的TextureRect实例。
单击每个节点以将其选中。在检查器中, 单击纹理属性右侧的图标, 然后单击” 加载” 。将打开一个文件浏览器, 让我们选择要加载到纹理插槽中的精灵。
在Godot中设计标题屏幕

文章图片
文件浏览器使我们可以搜索和加载纹理
对所有TextureRect节点重复该操作。我们应该有一个徽标, 插图, 三个菜单选项和版本注释作为单独的节点。然后, 双击” 视图” 选项卡中的每个节点并重命名它们。
在Godot中设计标题屏幕

文章图片
加载带有纹理的六个节点
注意如果我们想在游戏中支持本地化, 请使用Labels代替菜单上的TextureRect。 添加容器以自动保存UI元素
我们的主菜单在屏幕边缘周围有一些空白。它分为两个部分:在左侧, 我们有徽标和菜单选项。在右边, 我们有角色。为此, 我们可以使用以下两个容器之一:HSplitContainer或HBoxContainer。
分割后的容器将区域分为两部分:一左一右或一顶侧和一底侧。分割后的容器将空间分为两个:一个左和一个右, 或者一个顶和一个底侧。它们还允许用户使用交互式栏来调整左右字段的大小。另一方面, HBoxcontainer只被划分为与其中有子项一样多的列。尽管我们可以禁用拆分容器的调整大小, 但我们建议与盒子容器兼容。
选择MarginContainer并添加HBoxContainer。然后, 我们需要两个容器作为HBoxContainer的子容器:左侧是用于菜单选项的VBoxContainer, 右侧是用于图示的CenterContainer。
在Godot中设计标题屏幕

文章图片
我们应该有四个嵌套的容器, 并且旁边有TextureRect节点。
在节点树中, 选择位于左侧的TextureRect节点:徽标, 菜单选项和版本注释。拖放到VBoxContainer中。然后, 将轮廓节点拖到CenterContainer中。节点自动需要一个位置。
在Godot中设计标题屏幕

文章图片
容器自动放置纹理并调整其大小
我们有两个问题要解决:
  1. 右边的字符未居中
  2. 徽标和其他UI元素之间没有空格
为了使字符在右侧居中, 我们将使用CenterContainer。添加一个CenterContainer节点作为HBoxContainer的子级。然后在检查器中, 滚动到” 大小标志” 类别, 然后单击” 工作区” 属性右边的字段, 然后选中” 展开” 。对水平属性执行相同的操作。最后, 将字符拖放到C enterContainer中。字符元素将自动位于中心。
由于它位于中心容器内, 因此角色节点位于屏幕右半边的中心
为了排除左侧的菜单选项和徽标, 我们将使用最终容器及其尺寸标记。选择VBoxContainer并将其命名为” MenuOptions” 。选择所有三个菜单选项:NewGame, Continue和Options, 然后将它们拖放到新的VBoxContainer中。用户界面的布局应该很难更改(如果有的话)。
在Godot中设计标题屏幕

文章图片
将新容器放置在其他两个节点之间, 以保留UI的布局
现在, 我们对菜单选项进行了分组, 我们可以要求他们扩展其容器以占用尽可能多的垂直空间。选择MenuOptions节点。在检查器中, 滚动到” 大小标记” 类别。单击工作区属性右侧的字段, 然后选中” 展开” 。容器将扩展以占据所有可用的垂直空间。但它尊重其邻居, 徽标和变体元素。
在中心, 将VBoxContainer中的节点滚动到Inspector的顶部, 然后将Alignment属性更改为Center。
在Godot中设计标题屏幕

文章图片
菜单选项应在用户界面的左列中垂直居中
让我们在菜单选项之间添加一些分隔。展开” 大小” 标志下的” 自定义常量” 范围, 然后单击” 分离” 参数旁边的字段。将其设置为30。按Enter键后, “ 分离” 属性被激活, 并且Godot在菜单选项之间添加了30个像素。
在Godot中设计标题屏幕

文章图片
最终界面
没有一行代码, 我们就有一个准确的主菜单。
在下一个教程中, 我们将创建一个带有条形和物品计数器的游戏用户界面。

    推荐阅读