HUD

游戏的最后一块需要的是一个 UI：一个显示诸如分数、"游戏结束" 消息和重新开始按钮之类的东西的界面。创建一个新场景并添加一个名为 HUD 的 CanvasLayer 节点。它代表 "抬头显示器"，这是一个信息显示器，显示为游戏视图顶部的覆盖层。

CanvasLayer 节点允许我们在游戏其余部分上方的图层上绘制我们的 UI 元素，以便它显示的信息不会被玩家或怪物等任何游戏元素覆盖。

HUD 显示以下信息

• 由 ScoreTimer 更改的分数。
• 一条消息，例如 "游戏结束" 或 "准备好了！"
• 一个 "开始" 按钮来开始游戏。

UI 元素的主要节点在 Control 中。要创建我们的 UI，我们将使用 Control 节点的类型：Label 和 button。

创建以下作为 HUD 节点的子节点

• 标签名为 ScoreLabel。
• 标签名为 MessageLabel。
• 按钮名为 StartButton
• Timer 名为 MessageTimer。

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

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

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

我们可以拖动节点以手动放置它们，或者为了更精确的放置，使用以下设置；

ScoreLabel

• 布局： "中心顶部"
• 文本0
• 边距
  • 左：-25
  • 顶部：0
  • 右：25
  • 底部：100

MessageLabel

• 布局： "中心"
• 文本： 躲避怪物！
• 边距
  • 左：-200
  • 顶部：-150
  • 右：200
  • 底部：0

StartButton

• 布局： "中心底部"
• 文本： 开始
• 边距
  • 左：-100
  • 顶部：200
  • 右：100
  • 底部：100

Control 节点的默认字体很小，并且无法很好地缩放。游戏资源中包含一个名为 "Xolonium-Regular.ttf" 的字体文件。要使用该字体，请对三个 Control 节点中的每一个执行以下操作

1. 在 "自定义字体" 下，选择 "新建动态字体"。

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

现在将此脚本添加到 HUD

GDScript

每当分数更改时，都会在 Main 中调用此函数。

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

GDScript

将 HUD 连接到 Main

现在我们已经完成了创建 HUD 场景，保存它并返回到 Main。像我们对 Player 场景所做的那样，在 Main 中实例化 HUD 场景，并将其放置在树的底部。完整的树应该看起来像这样，所以请确保我们没有错过任何东西

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

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

在 new_game() 中，更新分数显示并显示 "准备好了" 消息

GDScript

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

GDScript

最后，将此添加到 _on_scoreTimer_timeout() 以保持显示与不断变化的分数同步

GDScript

现在我们准备好玩了！单击 "播放项目" 按钮。系统将要求我们选择主场景，因此选择 Main.tscn。

完成

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

以下是一些剩余步骤，可以添加更多 "乐趣" 以改善游戏体验。随意使用我们的想法扩展游戏玩法。

背景

默认的灰色背景不是很吸引人，所以让我们改变它的颜色。一种方法是使用 ColorRect 节点。使其成为 Main 下的第一个节点，以便它将绘制在其他节点的后面。ColorRect 只有一个属性：color。选择一个 ColorRect 使其覆盖屏幕。

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

音效

声音和音乐可能是为游戏体验增加吸引力的最有效方法。在我们的游戏资源文件夹中，我们有两个声音文件："House In a Forest Loop.ogg" 用于背景音乐，"gameover.wav" 用于玩家失败时。

添加两个 AudioStreamPlayer 节点作为 Main 的子节点。将其中一个命名为 Music，另一个命名为 DeathSound。在每个节点上，单击 "流" 属性，选择 "加载"，然后选择相应的音频文件。

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

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

粒子

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

配置粒子时，有大量属性可供选择。随意尝试并创建不同的效果。对于效果，在此示例中，使用以下设置

我们还需要通过单击 <null>，然后单击 "新建 particlesMaterial" 来创建一个 Material。该材质的设置如下

要为颜色渐变设置创建渐变，我们需要一个斜率，该斜率使精灵的 alpha（透明度）从 0.5（半透明）变为 0.0（完全透明）。

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

左侧和右侧的框代表开始和结束颜色。单击每个框，然后单击右侧的大正方形以选择颜色。对于第一种颜色，将 A（alpha）值设置为大约一半。对于第二个，将其设置为 0。

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