在 Godot 中设计标题画面
在 Godot 中设计标题画面
在接下来的两个教程中，我们将使用引擎的UI系统逐步构建两个UI（用户界面）场景：
- 主菜单
- 带有能量条、生命条、炸弹和点钞机的游戏界面
我们将学习如何有效地设计游戏UI以及如何使用Godot的控制节点。这些页面重点关注视觉部分：我们使用编辑器所做的一切。要了解如何编写游戏代码， 使用代码来控制游戏的 UI。
我们要创建的 GUI
如何设计游戏界面？
为了开发UI，我们首先想要拿出一个粗略的模型：一个简单的绘图版本，重点关注 UI 组件的放置、尺寸和用户交互。笔和纸就是我们所需要的。在这个阶段，我们不应该使用花哨的图形和最终图形。然后，我们只需要简单的占位精灵就可以跳入Godot。我们希望确保玩家可以使用这些占位符在界面中找到自己的出路。
UI 的粗略计划或模型
占位符不必很丑，但我们应该保持图形简单明了。在让玩家测试用户界面之前，避免使用特效、动画和详细插图。否则：
- 图形可能会扭曲玩家对体验的看法，我们将错过宝贵的反馈
- 如果用户体验无法正常工作，我们将不得不重做一些精灵
注意 始终尝试首先使用简单的文本和框来制作界面。以后更改纹理很容易。专业的用户体验设计师经常使用纯粹的轮廓和表格进行灰度工作。当我们去掉颜色和花哨的视觉效果时，正确设置和放置 UI 元素就会变得更加容易。它帮助我们完善我们构建的设计基础。
Godot 中有两种设计 UI 的方法。我们可以：
- 在单个视图中创建所有这些视图，最后将一些分支保存为可重用视图。
- 创建可重用组件的模板视图并创建从我们的基础视图继承的特定零件
我们使用第一种方法，因为第一个版本的 UI 可能无法按我们的预期工作。随着我们的发展，我们可能会丢弃组件并重新设计它们。我们希望在开发过程中丢弃零件并重新设计组件。当我们确定一切正常工作时，很容易使某些部件可重复使用，如下所示。
我们将在Godot 中找到的文件。图形看起来比粗糙的设计更干净，但它们仍然是占位符
设计主菜单
在进入编辑器之前，我们必须根据模型图像规划如何嵌套容器。
打破 UI 模型
以下是我寻找合适容器的三个经验法则：
- 中断嵌套框中的 UI，从包含右侧的所有内容到包含一个小部件（例如带标签的栏、面板或按钮）的最小 UI
- 如果某个区域周围有填充，请使用 MarginContainer
- 如果元素按行或列排列，请使用 HBoxContainer 和 VBoxContainer。
这些规则足以开始并适用于简单的界面。
对于主菜单，最大的方框是整个游戏窗口。窗口边缘和第一个组件之间有填充： 它必须以边缘为中心 。然后，将屏幕分成两列，以便我们可以使用 Hboxcontainer。我省略了列，我们将使用 VBoxContainer 来管理行。在右列中，我们使用 VBoxcontainer 来处理行。在右列中，我们将插图与 CenterContainer 居中对齐。
界面构建块，使用三个经验法则进行分解
请注意，容器会适应窗口分辨率和宽高比。虽然我们可以手动保存 UI 元素，但框可以更快、更准确、响应更灵敏。
准备主菜单场景
让我们创建主菜单。我们将在场景中构建它。要创建空场景，请单击场景菜单 -> 新建场景。
在保存视图之前，我们必须添加一个根节点。 UI 的根应该是最外层的容器或元素。在本例中，它 是边距保持器 。
MarginContainer 对于大多数界面来说都是一个很好的起点，因为我们经常需要在 UI 周围进行填充。按 Meta + S 将视图保存到磁盘。为菜单命名。
要定义边距的大小，请再次选择切边器并转到检查器。将控件类滚动到“自定义常量”部分。展开它。设置边距如下：
- 保证金权利：120
- 最大存款：80
- 左边距：120
- 下边距：80
我们希望容器必须适合窗户。在视口中，打开“布局”菜单并选择最后一个选项“全矩形”。
添加 UI 精灵
选择 MarginContainer 并将 UI 元素创建为 TextureRect 节点。我们需要：- 标题或徽标
- 三个文本选项作为单独的节点
- 发行说明
- 还有主菜单的插图
单击“添加节点”按钮或按键盘上的 Meta +A。 输入TextureRect以查找相关节点并按Enter键。选择新节点后，按 Meta + D 五次以创建五个新的 TextureRect 实例。
单击每个节点以将其选中。在检查器中，单击纹理属性右侧的图标，然后单击“加载”。将打开一个文件浏览器，允许我们选择要加载到纹理槽中的精灵。
文件浏览器允许我们搜索和加载纹理
对所有TextureRect节点重复此操作。我们应该有一个徽标、插图、三个菜单选项和版本说明作为单独的节点。然后，双击“视图”选项卡中的每个节点并重命名它们。
加载六个带有纹理的节点
注意如果我们想在游戏中支持本地化，请在菜单上使用标签而不是TextureRect。
添加容器自动保存UI元素
我们的主菜单在屏幕边缘有一些空白。它分为两部分：左侧有徽标和菜单选项。在右边，我们有人物。为此，我们可以使用两个容器之一： HSplitContainer 或 HBoxContainer 。
分割的容器将区域分为两部分：一左一右或顶侧和底侧。分割容器将空间分为两部分：左侧和右侧，或顶部和底部。它们还允许用户使用交互式栏调整左右字段的大小。另一方面，HBoxcontainer 只被分为与其中有子项一样多的列。尽管我们可以禁用拆分容器的大小调整，但我们建议与盒式容器兼容。
选择 MarginContainer 并添加 HBoxContainer。然后，我们需要两个容器，它们是 HBoxContainer 的子容器：左侧带有菜单选项的 VBoxContainer 和右侧的 CenterContainer。
我们应该有四个嵌套容器，旁边有TextureRect节点。
在节点树中，选择位于左侧的TextureRect节点：徽标、菜单选项和发行说明。拖放到VBoxContainer。然后，将轮廓节点拖入CenterContainer。节点自动需要一个位置。
容器自动放置纹理并调整其大小
我们还有两个问题需要解决：
- 右侧字符未居中
- 徽标和其他 UI 元素之间没有空格
为了使角色在右侧居中，我们将使用CenterContainer。添加 CenterContainer 节点 HBoxContainer 的子节点。然后在检查器中，滚动到“大小标志”类别，然后单击“工作空间”属性右侧的字段，然后选中“展开”。对 水平 属性执行相同操作。最后，将角色拖放到CenterContainer中。字符元素将自动居中。
由于它位于中心容器内，因此角色节点位于屏幕右半部分的中心
为了排除左侧的菜单选项和徽标，我们将使用最终的容器及其尺寸标签。选择 VBoxContainer 并将其命名为“MenuOptions”。选择所有三个菜单选项：NewGame、Continue和Options，然后将它们拖放到新的 VBoxContainer 中。 UI 的布局应该很难改变（如果有的话）。
将新容器放置在其他两个节点之间以保留 UI 的布局
现在我们已经对菜单选项进行了分组，我们可以要求他们扩展容器以占用尽可能多的垂直空间。选择 MenuOptions 节点。在检查器中，滚动到“尺寸标记”类别。单击工作区属性右侧的字段并选中“展开”。容器将膨胀以占据所有可用的垂直空间。但它尊重它的邻居，徽标和变体元素。
将 VBoxContainer 中的 节点居中，滚动到检查器顶部，然后将 Alignment 属性 更改为 Center。
菜单选项应在用户界面左栏垂直居中
让我们在菜单选项之间添加一些分隔。展开尺寸标志下的尺寸标志。将其设置为 30。按 Enter 后，“Separate” 属性被激活，Godot 在菜单选项之间添加 30 个像素。
最终界面
无需一行代码，我们就有了准确的主菜单。
在下一个教程中，我们将创建一个带有栏和物品计数器的游戏用户界面。
相关文章
- 10-06 嘉银金科一季度净利润同比增137% 金融科技公司业
- 10-06 辣妈计划为创业宝妈护航
- 10-06 苏宁易购本地生活也开启百亿补贴，先行一步全面布局线
- 10-06 服务再获认可！德施曼斩获2021（第五届）中国客户
- 10-06 创维盒子怎么看电视台，创维盒子看电视台真的不要太简
- 10-06 近300家门店直播同庆 京东618小魔方携手京东电
- 10-06 mysql手动导出数据库| mysql命令行代码
- 10-06 国外有哪些编程游戏平台，steam上有哪些恐怖游戏
- 10-06 如何查询mysql中表的字段名
- 10-06 《大数据技术原理与应用》（第4章HBase课后答案
- 10-06 《大数据技术原理与应用》（第8章Hadoop课后解
- 10-06 大数据技术原理与应用（三）
- 10-06 央视起诉PPTV侵权，获赔400万元
- 10-06 快手宣布与央视合作，除夕夜八点，快手观看了央视春节
- 10-06 京东云技术支持央视元宵晚会云之旅红包互动
- 10-06 网易3:0击败腾讯，夺得首届互联网邀请赛“小TI”
- 10-06 电竞新年带动行业复苏《街头篮球》2023线下赛事点
- 10-06 奇安新天晴EDR通过Sakoda威胁检测能力测试：
- 10-06 stm32 spi从机中断（stm32 spi从机
- 10-06 如何触发stm32外部中断（stm32外部中断触发
- 最近发表