HUD用法示例

游戏需要的最后一块是UI：一个界面, 用于显示诸如得分, “游戏结束”消息和重新启动按钮之类的内容。创建一个新场景并添加一个名为HUD的CanvasLayer节点。它代表”平视显示”, 即一种信息显示, 显示为游戏视图顶部的覆盖图。

CanvasLayer节点使我们可以在游戏其余部分上方的一层上绘制UI元素, 以便其显示的信息不会被任何游戏元素(如玩家或小怪)所掩盖。

HUD显示以下信息：

• 分数由ScoreTimer更改。
• 一条消息, 例如” Game Over”或” Get Ready！”。
• 一个”开始”按钮开始游戏。

Control中UI元素的主要节点。要创建我们的UI, 我们将使用控制节点的类型：标签和按钮。

创建以下内容作为HUD节点的子代：

• 标签名为ScoreLabel。
• 标签名为MessageLabel。
• 名为StartButton的按钮
• 计时器名为MessageTimer。

注意锚点和边距：它控制节点的位置和大小, 但它们也具有锚点和边距。

锚定义原点：节点边缘的参考点。当我们移动或调整控制节点的大小时, 边距会自动更新。它们表示从控制节点的边缘到其锚点的距离。有关更多详细信息, 请参见设计与控制节点的接口。

排列节点, 如下所示。单击”锚点”按钮以设置控制节点的锚点：

我们可以拖动节点以手动放置它们, 或者使用以下设置进行更精确的放置：

分数标签

• 布局：”中上”
• 文字：0
• 余量：
  • 左：-25
  • 最高：0
  • 右：25
  • 下装：100

消息标签

• 布局：”居中”
• 文字：躲开小兵！
• 余量：
  • 左：-200
  • 最高：-150
  • 右：200
  • 下：0：0

开始按钮

• 布局：”中央底部”
• 文字：开始
• 余量：
  • 左：-100
  • 最高：200
  • 右：100
  • 下装：100

控制节点的默认字体很小, 缩放效果不佳。游戏资源中包含一个名为” Xolonium-Regular.ttf”的字体文件。要使用字体, 请对三个”控制”节点中的每一个执行以下操作：

1.在”自定义字体”下, 选择”新动态字体”。

2.单击我们添加的” DynamicFont”, 然后在” FontData”下选择” Load”, 然后选择” Xolonium-Regular.ttf”文件。我们还必须设置字体大小。设置为64效果很好。

现在将此脚本添加到HUD：

GDScript

func update_score(score):
    $ScoreLabel.text = str(score)

每当乐谱变化时, 在Main中都会调用此函数。

连接MessageTimer的timeout()信号和StartButton的pressed()信号。

GDScript

func update_score(score):
    $ScoreLabel.text = str(score)
func _on_StartButton_pressed():
    $StartButton.hide()
    emit_signal("start_game")

func _on_MessageTimer_timeout():
    $MessageLabel.hide()

将HUD连接到Main

现在我们已经完成了创建HUD场景的操作, 将其保存并返回到Main。像在Player中那样在Main中实例化HUD场景, 并将其放置在树的底部。完整的树应该看起来像这样, 因此请确保我们没有错过任何内容：

现在, 我们需要将HUD功能连接到我们的主脚本。这需要为主场景添加一些内容。

在”节点”选项卡中, 将HUD的start_game信号连接到new_game函数。

在new_game()中, 更新得分显示并显示” Get Ready”消息：

GDScript

$HUD.update_score(score)
$HUD.show_message("Get Ready")

在game_over()中, 我们需要调用相应的HUD函数：

GDScript

$HUD.show_game_over()

最后, 将其添加到_on_scoreTimer_timeout()中, 以使显示与变化的分数保持同步：

GDScript

$HUD.update_score(score)

现在我们可以开始比赛了！单击”播放项目””按钮。我们将被要求选择主要场景, 因此选择Main.tscn。

整理起来

现在, 我们已经完成了游戏的所有功能。

以下是一些剩余的步骤, 可以添加更多”果汁”以改善游戏体验。随时根据我们的想法扩展游戏玩法。

背景

默认的灰色背景不是很吸引人, 因此让我们更改其颜色。一种方法是使用ColorRect节点。将其设为Main下的第一个节点, 以便将其绘制在其他节点之后。 ColorRect仅具有一个属性：颜色。选择一个colorRect, 使其覆盖屏幕。

如果我们有一个背景图片, 也可以使用Sprite节点添加背景图片。

声音特效

声音和音乐可能是增加游戏体验吸引力的最有效方法。在我们的游戏资源文件夹中, 我们有两个声音文件：” House in a Forest Loop.ogg”用于背景音乐, 而” gameover.wav”用于玩家迷路。

添加两个AudioStreamPlayer节点作为Main的子级。命名音乐之一, 另一个命名为DeathSound。在每个流媒体上, 单击Stream属性, 选择”加载”, 然后选择相应的音频文件。

要播放音乐, 请在new_game()函数中添加$ Music.play(), 并在game_over()函数中添加$ Music.stop()。

最后, 在game_over()函数中添加$ DeathSound.play()。

粒子

为了获得视觉上的最后吸引力, 让我们为玩家的动作添加尾迹效果。选择我们的Player场景并添加一个名为Trail的Particles2D节点。

配置粒子时, 有很多属性可供选择。随时尝试并创造不同的效果。为了有效, 在此示例中, 使用以下设置：

我们还需要通过单击<null>然后单击”新建粒子材质”来创建材质。其设置如下：

为了使”色带”设置渐变, 我们需要一个将精灵的alpha(透明度)从0.5(半透明)更改为0.0(完全透明)的坡度。

单击”新建渐变纹理”, 然后在”渐变”下, 单击”新建渐变”。我们将看到一个这样的窗口：

左右框分别代表开始和结束颜色。单击每个, 然后单击右侧的大方块以选择颜色。对于第一种颜色, 将A(alpha)值设置为一半左右。对于第二个, 将其设置为0。

有关更多详细信息或使用粒子效果, 请参见Particles2D。