设计图形用户界面¶
既然你已经掌握了基础知识,我们将看到如何用可重用的UI组件构建一个游戏图形用户界面(GUI):生命条、能量条、炸弹和翡翠计数器。本教程结束时,您将拥有一个游戏图形用户界面,可以使用gdscript或visualscript进行控制:
您还将学习:
创建灵活的UI组件
使用场景继承
构建复杂的用户界面
下载项目文件: ui_gui_design.zip
提取档案。导入 start/ 在Godot中进行项目以遵循本教程。这个 end/ 文件夹包含最终结果。
注解
您可以将本教程视为 video on Youtube .
分解用户界面¶
让我们分解最终的用户界面并计划我们将使用的容器。就像在 设计标题屏幕 ,开头是 MarginContainer
. 然后,我们可以看到最多三列:
左边的生命和能量计数器
生命和能量棒
右边的炸弹和翡翠柜台
但是这个标签和仪表是同一个UI元素的两部分。如果我们这样想的话,我们只剩下两列:
左边的生命和能量条
右边的炸弹和翡翠柜台
这使得嵌套容器更容易:我们在屏幕边界周围使用 MarginContainer
,然后是 HBoxContainer
管理我们的两列。两条钢筋相互叠放在 VBoxContainer
. 我们需要最后一个 HBoxContainer
在右栏并排放置炸弹和翡翠柜台。
我们需要在各个UI组件中额外的容器,但这给了我们主GUI场景的结构。有了这个计划,我们就可以进入Godot并创建我们的GUI。
创建基本GUI¶
GUI有两种可能的方法:我们可以在不同的场景中设计元素并将它们组合在一起,或者在一个场景中创建所有的原型并稍后将其分解。我建议使用单个场景,因为这样可以更快地播放用户界面的位置和比例。一旦看起来不错,就可以将节点树的整个部分保存为可重用的子场景。我们马上就来。
现在,我们从几个容器开始。
创建新场景并添加 MarginContainer
. 选择节点并命名 GUI
.
我们希望界面锚定在屏幕顶部。选择 GUI
节点,然后单击视口顶部的布局按钮。选择 Top Wide
选择权。这个 GUI
默认情况下,节点将锚定到其父视图的上边缘。它将在垂直轴上自动调整大小,为其子UI组件留出空间。
将场景另存为 GUI.tscn
. 我们将把整个图形用户界面放进去。
与 MarginContainer
选中后,转到Inspector并向下滚动到“自定义常量”部分。展开它并单击每个 Margin
属性。全部设置为 20
像素。下一步,添加 HBoxContainer
节点。这个将包含我们左边的两个栏,并将它们与右边的两个计数器分开。
我们要将条形图垂直堆叠在 HBoxContainer
. 添加一个 VBoxContainer
作为一个孩子 HBoxContainer
并命名它 Bars
. 选择父级 HBoxContainer
再一次,这次,再加一个 HBoxContainer
作为它的孩子。叫它吧 Counters
. 有了这四个容器,我们就有了GUI场景的基础。
注解
我们可以这样工作,因为我们首先分解了我们的UI设计,并花了一些时间考虑我们将使用的容器。当你遵循这样的教程时,可能会觉得很奇怪。但一旦你在做真正的游戏,你会发现这是一个有效的工作流程。
创建条形图的基础¶
每个条形图被拆分为两个子元素,它们水平对齐:左侧带有健康计数的标签,右侧带有仪表。再一次, HBoxContainer
是这项工作的完美工具。选择 Bars
节点并添加新的 HBoxContainer
在里面。命名它 Bar
.
标签本身至少需要三个节点:a NinePatchRect
对于背景,在其顶部,我们将在左侧添加纹理,或者 HP
或 EP
和A Label
值的右边。我们可以筑巢 Control
我们想要的节点。我们可以使用 NinePatchRect
作为其他两个元素的父元素,因为它包含了它们。通常,您希望使用容器,因为它们的角色是帮助组织UI组件。我们需要一个 MarginContainer
稍后无论如何要在寿命计数和仪表之间添加一些空间。选择 Bar
添加一个 MarginContainer
. 命名它 Count
. 在其中添加三个节点:
A
NinePatchRect
已命名Background
A
TextureRect
已命名Title
和A
Label
已命名Number
要将节点作为兄弟节点添加,请始终选择 Count
首先是节点。
我们的现场还是空的。是时候加入一些纹理了。要加载纹理,请指向位于视区左侧的文件系统停靠。浏览到res://assets/gui文件夹。
选择 Background
在现场码头。在检查员中,你应该看到 Texture
属性。在“文件系统”选项卡中,单击并拖动 label_HP_bg.png
上 Texture
狭槽。它保持挤压状态。父边缘容器将强制其大小减小到0,直到我们强制容器内的元素具有最小大小。选择 Background
节点。在Inspector中,向下滚动到rect部分。集合 Min Size
到(100,40)。你应该看到 Background
与其父容器一起调整大小。
接下来,选择 Title
拖放 label_HP.png
进入它的 Texture
狭槽。选择 Number
节点,单击 Text
属性和类型 10
. 这样,我们可以在视区中看到两个节点。它们应该堆积在父级的左上角 MarginContainer
.
因为它们有一个容器作为它们的直接父容器,所以我们不能自由地移动它们: Count
节点将始终重置其锚定、大小和位置。尝试移动并调整视区中的节点大小。然后,选择三个纹理中的任意一个,然后按Ctrl-Up或Ctrl-Down在“场景停靠”中对它们重新排序。它们将恢复到原来的大小和位置。
父容器控制其直接子容器的大小、比例、页边距和锚定。要修改节点,必须将它们嵌套在常规控件或其他UI元素中。我们将使用 Background
作为家长 Title
和 Number
. 同时选择 Title
和 Number
,并将它们拖放到 Background
.
选择 Title
在检查员中,改变 Stretch Mode
属性到 Keep Centered
. 下一步查找 Rect
在Inspector中分类并更改 Size
属性设置为(50,40),因此它只取背景的左半部分。接下来,选择 Number
节点。在视区中,单击 Layout
菜单并单击 Full Rect
. 节点将调整大小以适应 Background
. 向检查员汇报并更换 Align
属性到 Right
和 VAlign
属性到 Center
. 文本应对齐到 Background
的右边缘。水平调整节点的大小,使其占用 Background
右边有一些填充物。
替换标签的字体¶
标签的字体太小。我们需要更换它。选择 Number
在Inspector中,向下滚动到 Control
然后找到 Custom Font
类别。单击 Font
属性并单击 New Dynamic Font
. 再次单击该字段并选择“编辑”。
您将进入 Dynamic Font
资源。展开 Font
分类并单击旁边的字段 Font Data
. 单击 Load
按钮。在“文件浏览器”中,向下导航到“资产/字体”文件夹,然后双击 Comfortaa-Bold.ttf
打开它。您应该在视区中看到字体更新。展开“设置”类别以更改字体大小。设置 Size
属性设置为更高的值,例如 24
或 28
.
我们现在需要文本的基线,数字的下边缘,来与左侧的HP纹理对齐。这样做,仍然在 DynamicFont
资源,您可以调整 Bottom
财产 Extra Spacing
类别。它在文本中添加了一些底部填充。单击 Number
“场景”选项卡中的节点,以返回节点的属性并更改 VAlign
到 Bottom
. 要调整文本的基线,请单击 Custom Font
再次分类并调整 Bottom
属性,直到文本与 Title
节点。我用了一个值 2
像素。
有了这个,我们完成了图形用户界面最困难的部分。祝贺你!让我们继续讨论更简单的节点。
添加进度条¶
我们需要最后一个元素来完成我们的生活吧:测量仪本身。Godot船舶 TextureProgress
拥有我们需要的一切的节点。
选择栏节点并添加 TextureProgress
在里面。命名它 Gauge
. 在检查员中展开 Textures
第节。前往文件系统停靠并拖放 lifebar_bg.png
纹理到 Under
狭槽。对…也一样 lifebar_fill.png
把它放到 Progress
狭槽。在 Range
在Inspector类中,更改 Value
属性到 50
要查看仪表是否加满。
只有五个 Control
节点,我们的第一个栏已经准备好使用了。
设计炸弹和翡翠柜台¶
炸弹和翡翠柜台就像酒吧 Count
节点。所以我们将复制它并将其用作模板。
下 Bar
节点,选择 Count
然后按ctrl d复制它。将新节点拖放到 Counters
HBoxContainer
在场景树的底部。您应该看到它自动调整大小。暂时别担心,我们很快就会修好尺寸的。
重命名 Count2
节点到 Counter
. 与条形图不同,我们希望数字位于左侧,而图标位于右侧。设置是相同的:我们需要一个背景(A NinePatchRect
,标题和编号节点。这个 Title
节点是一个 TextureRect
,所以我们需要显示图标。在场景树中,选择 Title
节点,并将其重命名为 Icon
.
与 Icon
选定的节点,在Inspector中,滚动到顶部以查看 Texture
狭槽。前往左侧的文件系统Dock并选择 bombs_icon.png
. 拖放到 Texture
狭槽。在“场景”选项卡中,选择 Icon
以及 Number
节点。单击位于视区顶部工具栏中的布局菜单,然后选择 Full Rect
. 两个节点都将更新以适应 Background
.
我们换个 Number
的对齐属性以将其移动到 Background
. 选择 Number
节点,更改其 Align
左边的属性和 VAlign
财产归中心。然后稍微调整其左边缘的大小,以便在 Background
以及文本。
要重叠图标和背景,我们需要做一些调整。首先,我们的背景有点高。这是因为它位于一个边缘容器内,由最顶层的GUI节点控制。选择场景树顶部的GUI节点,并垂直缩小,使其尽可能薄。你会看到仪表阻止你把它做得太小。容器不能小于其子容器的最小大小。集装箱的边缘也很重。
选择图标,单击布局菜单,然后选择 Full Rect
重新居中。我们需要它来锚定 Background
的右边缘。再次打开布局菜单并选择 Center Right
. 向上移动图标,使其垂直居中 Background
.
因为我们复制了 Counter
从酒吧里 Count
, the Number
节点的字体已关闭。选择 Number
再次节点,前往 Font
属性,然后单击它以访问 DynamicFont
资源。在 Extra Spacing
第节,更改 Bottom
价值到 0
重置字体基线。我们的柜台现在按预期工作。
让我们做 Counters
定位到视区的右边缘。为此,我们需要设置 Bars
容器可以占用所有可用的水平空间。选择 Bars
节点并向下滚动到 Size Flags
类别。在 Horizontal
类别,检查 Expand
值。这个 Bars
节点应调整大小并将计数器推到屏幕右侧。
将工具栏和计数器转换为可重用的UI组件¶
我们有一个酒吧和一个柜台小部件。但我们每个都需要两个。稍后我们可能需要更改条形图的设计或功能。如果我们可以有一个场景来存储一个UI元素的模板,并且有一个子场景来处理变体,那就太好了。Godot让我们用继承的场景来做这个。
让我们把两个 Counter
以及 Bar
分支作为单独的场景,我们将减少以创建 LifeBar
, the EnergyBar
, the BombCounter
和 EmeraldCounter
. 选择 Bar
HBOX容器。右键单击它并单击 Save Branch as Scene
. 将场景另存为 Bar.tscn
. 您应该看到节点分支将其转换为单个 Bar
节点。
小技巧
场景是节点树。最上面的节点是树的 root 和层次结构底部的子级是 树叶 . 除了根以外的任何节点以及一个或多个子节点都是 分支 . 我们可以将节点分支封装到单独的场景中,或者将它们从其他场景加载并合并到活动场景中。右键单击场景停靠中的任何节点并选择 Save Branch as Scene
或 Merge from Scene
.
然后,选择 Counter
节点并执行相同的操作。右键单击, Save Branch as Scene
,并另存为 Counter.tscn
. 新的“编辑场景”图标将显示在场景树中节点的右侧。单击旁边的 Bar
打开相应的场景。调整 Bar
使其边界框适合其内容的节点。按照我们命名和放置控制节点的方式,我们准备继承这个模板并创建生命条。这对 Counter
.
使用场景继承创建其余元素¶
我们需要两个工作方式相同的条:它们的左边应该有一个标签,上面有一些值,右边有一个水平仪。唯一的区别是,一个有HP标签,是绿色的,而另一个被称为EP,是黄色的。Godot为我们提供了一个强大的工具,可以为游戏中的所有酒吧创建一个通用的基础: 继承的场景 .
在继承的场景中,除了名称之外,还可以更改检查器中每个节点的任何属性。如果修改并保存父场景,则所有继承的场景都将更新以反映更改。如果更改继承场景中的值,它将始终覆盖父级的属性。它对UI很有用,因为它们通常需要相同元素的变体。一般来说,在UI设计中,按钮、面板等共享一个公共的基本样式和交互。我们不想手动将其复制到所有变体。
重载图标将出现在您覆盖的属性旁边。单击它可将该值重置为父场景的默认值。
注解
把场景继承想象成节点树,或者 extends
gdscript中的关键字。继承的场景执行与其父场景类似的所有操作,但可以覆盖属性、资源并添加额外的节点和脚本以扩展其功能。
继承酒吧场景构建生活吧¶
去 Scene -> New Inherited Scene
创建新类型的 Bar
. 选择酒吧场景并打开它。你应该看到一个新的 [未保存] 标签,就像你的 Bar
,但所有节点(根除外)均为灰色。出版社 Meta+S
保存新继承的场景并命名 LifeBar
.
首先,将根节点或顶级节点重命名为 LifeBar
. 我们总是希望根目录准确描述这个UI组件是什么。这个名字区别于 EnergyBar
我们将创建下一个。场景中的其他节点应该用广义的术语描述组件的结构,因此它可以处理所有继承的场景。就像我们的 TextureProgress
和 Number
节点。
注解
如果你曾经做过网页设计,它与使用CSS的精神是一样的:你创建了一个基类,并添加了修改器类的变体。从一个基本按钮类中,您将看到按钮的绿色和红色变化,用户可以接受和拒绝提示。新类包含父元素的名称和一个额外的关键字,用于解释它如何修改它。当我们创建一个继承的场景并更改顶级节点的名称时,我们正在做同样的事情。
设计能量棒¶
我们已经设置了 LifeBar
的设计 Bar
场景。现在我们需要 EnergyBar
.
让我们创建一个新的继承场景,然后再次选择 Bar.tscn
场景并打开。双击 Bar
根节点并将其重命名为 EnergyBar
. 将新场景另存为 EnergyBar.tscn
. 我们需要用ep one替换hp纹理,并更改仪表上的纹理。
指向左侧的filesystem dock,选择 Title
场景树中的节点,并拖放 label_EP.png
锉到纹理槽上。选择 Number
节点并更改 Text
属性设置为其他值,如 14
.
您会注意到EP纹理比HP纹理小。我们应该更新 Number
的字体大小以更好地适应它。字体是一种资源。整个项目中使用此资源的所有节点都将受到我们更改的任何属性的影响。您可以尝试将大小更改为 40
然后切换回 LifeBar
或 Bar
场景。您将看到文本的大小增加。
要仅更改此节点上的字体大小,必须创建字体资源的副本。选择 Number
再次单击节点,然后单击检查器右上角的扳手和螺丝刀图标。在下拉菜单中,选择 Make Sub-Resources Unique
选项。godot会找到这个节点使用的所有资源,并为我们创建唯一的副本。
小技巧
当从场景树中复制节点时, Meta+D
,它与原始节点共享其资源。你需要使用 Make Sub-Resources Unique
在不影响源节点的情况下调整资源之前。
向下滚动到 Custom Font
剖切和打开 Font
. 降低 Size
一个较小的值,比如 20
或 22
. 您可能还需要调整 Bottom
间距值,用于将文本基线与左侧的ep标签对齐。
现在,选择 TextureProgress
节点。拖动 energy_bar_bg.png
文件到 Under
槽和做同样的为 energy_bar_fill.png
把它放在 Progress
纹理槽。
可以垂直调整节点的大小,使其边界矩形适合仪表。对…也一样 Count
直到其大小与条的大小对齐为止。因为最小尺寸 TextureProgress
根据其纹理设置,您将无法缩小 Count
下面的节点。这也是尺寸 Bar
集装箱将有。你也可以缩小这个。
最后但并非最不重要的是, Background
容器的最小尺寸使它有点大。选择它并在 Rect
第节,更改 Min Size
财产减至 80
像素。它应该自动调整大小, Title
和 Number
节点也应该重新定位。
小技巧
计数节点的大小会影响纹理程序的位置。因为我们将在一段时间内垂直对齐条形图,所以最好使用计数器的左边距来调整ep标签的大小。这样,能量条的计数和生命条的计数节点都有100个像素宽,所以两个测量仪将完全对齐。
准备炸弹和翡翠柜台¶
现在让我们负责柜台。去 Scene -> New Inherited Scene
并选择 Counter.tscn
作为基础。将根节点重命名为 BombCounter
也是。将新场景另存为 BombCounter.tscn
. 这就是这场戏的全部内容。
去 Scene -> New Inherited Scene
再次选择 Counter.tscn
再次。重命名根节点 EmeraldCounter
并将场景另存为 EmeraldCounter.tscn
. 对于这个,我们主要需要用翡翠图标替换炸弹图标。在“文件系统”选项卡中,拖动 emeralds_icon.png
上 Icon
结点 Texture
狭槽。 Icon
已经锚定到 Background
节点,以便我们可以更改其位置,并且它将随 EmeraldCounter
容器。将翡翠图标向右和向下移动一点。使用键盘上的箭头键微调其位置。保存,所有的UI元素都完成了。
将UI组件添加到最终的GUI中¶
是时候将所有UI元素添加到主GUI场景中了。打开 GUI.tscn
再次场景,并删除 Bar
和 Counter
节点。在文件系统基座中,找到 LifeBar.tscn
并将其拖放到 Bars
场景树中的容器。为…做同样的事 EnergyBar
. 你应该看到它们垂直对齐。
现在,拖放 BombCounter.tscn
和 EmeraldCounter.tscn
场景到 Counters
节点。它们会自动调整大小。
让 EmeraldCounter
和 BombCounter
使用我们在中定义的大小 Counter.tscn
,我们需要改变 Size Flags
上 Counters
容器。选择 Counters
节点并展开 Size Flags
检查员中的部分。取消选中 Fill
标签 Vertical
属性和检查 Shrink Center
所以容器集中在 HBoxContainer
.
小技巧
改变 Min Size
性质 Counters
用于控制计数器背景高度的容器。
我们还有一个小问题,那就是能量棒上的EP标签:两个能量棒应该垂直对齐。单击 EnergyBar
节点以打开其场景。选择 Count
节点并向下滚动到 Custom Constants
第节。添加一个 Margin Left
属于 20
. 在 Rect
节设置节点的 Min Size
返回到100,与Lifebar上的值相同。这个 Count
现在应该在左边留一些空白。如果保存并返回到GUI场景,它将与 LifeBar
.
注解
我们可以设置 EnergyBar
就在几分钟前。但这向您显示,您可以随时返回任何场景,对其进行调整,并查看通过项目传播的更改!
将图形用户界面放在游戏的模型上¶
为了总结本教程,我们将把图形用户界面插入到游戏的模型场景中。
前往文件系统Dock并打开 LevelMockup.tscn
.
拖放 GUI.tscn
场景就在 bg
节点及以上 Characters
. 图形用户界面将缩放以适应整个视区。前往布局菜单并选择 Center Top
选项,使其锚定到游戏窗口的上边缘。然后调整GUI的大小,使其在垂直方向上尽可能小。现在,您可以看到界面在游戏环境中的外观。
恭喜你完成了这个长教程。您可以在此处找到最终项目: ui_gui_design.zip
.
注解
关于响应式设计的最后说明 . 如果调整GUI的大小,您将看到节点移动,但纹理和文本不会缩放。根据图形用户界面内部的纹理,图形用户界面的大小也是最小的。在游戏中,我们不需要像网站那样灵活的界面。您几乎不想同时支持横向和纵向屏幕方向。这是其中之一。在景观方向上,最常见的比例是4:3到16:9。他们彼此很亲近。这就是为什么当我们改变窗口大小时,图形用户界面元素仅仅水平移动就足够了。