平视显示器

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

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

HUD显示以下信息：

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

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

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

• 标签名为ScoreLabel 。
• 标签名为MessageLabel 。
• 名为StartButton的按钮
• 时间r名为MessageTimer 。

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

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

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

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

分数标签

• 布局： “中上”
• 文字： 0
• 保证金：
  • 左：-25
  • 最高：0
  • 右：25
  • 下装：100

留言标签

• 布局： “居中”
• 文字：躲开小兵！
• 保证金：
  • 左：-200
  • 最高：-150
  • 右：200
  • 下：0：0

开始按钮

• 布局： “中央底部”
• 文字：开始
• 保证金：
  • 左：-100
  • 最高：200
  • 右：100
  • 下装：100

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

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

2.单击添加的“ DynamicFont ”，然后在“ FontData ”下选择“加载”，然后选择“ 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仅具有一个属性： color 。选择一个colorRect，使其覆盖屏幕。

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

声音特效

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

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

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

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

粒子

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

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

我们还需要通过单击 ，然后单击“ New particleMaterial ”来创建材质。其设置如下：

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

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

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

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