srcmini我们已经在主酒吧场景中设置了LifeBar的设计。现在我们需要EnergyBar.Let创建一个新的继承视图, 然后再次选择Bar.tscn视图并打开它。双击钢筋根节点并将其重命名为EnergyBar。将原始视图另存为EnergyBar.tscn。我们需要用EP 1替换HP纹理, 并替换量规上的纹理。
转到左侧的文件系统底座, 在场景树中选择标题节点, 然后将label_EP.png文件拖放到纹理插槽中。选择数字节点, 然后将text属性更改为其他值, 例如14。
注意
要仅更改此节点上的字体大小, 我们需要复制字体资源。再次选择数字节点, 然后单击检查器右上方的扳手和螺丝刀图标。在下拉菜单中, 选择”子资源唯一”选项。 Godot将搜索使用该节点的所有资源, 并为我们制作单独的副本。
如果我们更改字体资源, 则使用该字体资源的所有节点都会受到影响。
要仅更改此节点上的字体大小, 我们需要复制字体资源。再次选择数字节点, 然后单击检查器右上方的扳手和螺丝刀图标。在下拉菜单中, 选择”子资源唯一”选项。 Godot将搜索使用该节点的所有资源, 并
为我们单独制作副本。
注意
当我们使用Meta + D从视图树中复制一个节点时, 它会与父节点共享其资源。你需要在调整资源而不影响源节点之前使子资源唯一。
滚动到”自定义字体”部分, 然后打开字体。将大小减小到较小的值, 例如20或22。你可能必须调整底部空间的值, 以使文本的基线与左侧的EP标签对齐。
EP Count Widget是一种比其HP同类产品小的字体
现在, 选择TextureProgress节点。将energy_bar_bg.png文件拖到下方的插槽中, 并对Energy_bar_fill.png进行相同的操作, 然后将其保留在进度纹理插槽中。
你可以垂直调整节点的大小, 以使其边界矩形适合仪表。对节点本身进行计算, 直到其大小与条形对齐为止。
你可以垂直调整节点的大小, 以使其边界矩形适合仪表。对节点本身进行计算, 直到其大小与条形对齐为止。由于TextureProgress的最小数量由其纹理决定, 因此你将无法减少下面的count节点。这也将是酒吧容器的大小。你也可以写下来。
最后但并非最不重要的一点是, 背景容器的尺寸很小, 使其稍大一些。选择它, 然后在”矩形”部分中, 将”最小大小”属性更改为80像素。它应该自动调整大小, 并复制标题和数字节点
伯爵现在看起来好多了
注意
计数节点的大小会影响TextureProgress的状态。当我们暂时将条形图垂直对齐时, 我们最好了解如何使用计数器的左边缘调整EP标签的大小。这样, Energybar的计算和Lifebar的count节点都为100像素宽, 从而使两个量规完美对齐。
准备炸弹和卢比柜台
现在让我们照顾柜台。转到视图->新建继承的视图, 然后选择Counter.tscn作为基础。还将根节点重命名为bombekron。将新视图另存为BombCounter.tscn。这就是这个场景的全部。
炸弹计数器类似于原始计数器视图
再次转到”视图”->”选择新的继承的视图”, 然后再次选择” Counter.TSCN”。重命名根节点中断并将视图另存为转换。为此, 我们必须主要用卢比图标替换炸弹图标。
在”文件系统”选项卡中, 将Rs_icon.png拖到图标节点的纹理插槽。该图标已经锚定了背景节点的右边缘, 因此我们可以更改其位置, 并且它将缩放并随转换后的容器重新定位。左右移动卢比图标。使用键盘上的箭头键清除你的位置。保存, 我们已经完成了所有UI元素。
卢比柜台应该看起来像这样
将UI组件添加到最终GUI
是时候将所有UI元素添加到主GUI视图中了。重新打开GUI.tscn视图, 并删除钢筋和柜台节点。在FileSystem扩展坞中, 找到LifeBar.tscn并将其拖放到服装树的Bars容器中。对EnergyBar进行相同的操作。你应该将它们垂直对齐。
生命条和EnergyBar自动对齐
现在, 将BombCounter.tscn和RupeeCounter.tscn场景拖放到Counters节点上。它将自动调整大小。
节点调整大小以获取所有可用的垂直
职位
为了允许RsCounter和BombeCore使用size, 我们在Counter.TSCN中定义了, 我们需要更改counters容器上的size标志。选择counters节点并在检查器中显示size flags部分。取消选中垂直属性的填充标签, 然后检查收缩中心, 以使HBoxContainer内部的容器居中。
现在两个柜台的尺寸都不错
注意
更改计数器容器的最小尺寸属性以控制计数器的背景高度。
我们对EnergyBar上的EP标签有一个小问题：2个条应垂直对齐。单击EnergyBar节点旁边的图标以打开其视图。选择计数节点, 然后滚动到”自定义常量”部分。在左边添加20的边距。在rect中, 零件将节点的Min Size设置为100, 与LifeBar上的值相同。计算结果的左侧应留有一定余量。如果保存并返回到GUI视图, 它将与LifeBar垂直对齐。
2条完美对齐
注意
我们可以在几分钟前以这种方式设置EnergyBar。但是它让你知道你可以随时返回任何场景, 进行调整, 并查看整个项目中发生的变化！
将GUI放在游戏模型上
为了结束本教程, 我们将在游戏的模型场景中插入GUI。
转到FileSystem扩展坞, 然后打开LevelMockup.tscn。
将GUI.tscn视图拖放到bg节点下方和字符上方。 GUI将是适合整个视口的比例尺。转到布局菜单, 然后选择中间顶部选项, 以便它锚定游戏窗口的顶部边缘。然后调整GUI的大小, 以便可以将其垂直截断。现在, 你可以看到游戏上下文中的界面。
最终结果
注意
关于响应式设计的最后一点。如果调整GUI的大小, 将看到节点移动, 但是纹理和文本将无法缩放。 GUI的最小尺寸取决于内部的表面。在游戏中, 我们不需要像网站一样灵活的界面。你几乎永远都不想同时支持横向和纵向屏幕方向。是一个或另一个。在横向上, 最常见的比例是4：3至16：9。它们接近一个丹妮。因此, 当我们更改窗口大小时, 仅使GUI元素水平移动就足够了。
评论前必须登录！
注册