我们的游戏还需要用户可操作的界面，比如开始游戏，退出以及显示分数等UI界面。

创建新场景，点击“其他节点”按钮，然后添加一个 CanvasLayer 节点并命名为 HUD。“HUD”是“heads-up display”（游戏信息显示）的缩写，是覆盖在游戏视图上显示的信息。

CanvasLayer节点可以让我们在游戏的其他部分的上一层绘制 UI 元素，这样它所显示的信息就不会被任何游戏元素（如玩家或敌人）所覆盖。

HUD 中需要显示以下信息：

• 得分，由 ScoreTimer 更改。
• 消息，例如“Game Over”或“Get Ready!”
• “Start”按钮来开始游戏。

UI 元素的基本节点是 Control。要创建 UI，我们需使用 Control 下的两种节点：Label和 Button。

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

• 名为分数标签 ScoreLabel 的 Label。
• 名为消息 Message 的 Label。
• 名为开始按钮 StartButton 的 Button。
• 名为信息计数器 MessageTimer 的 Timer。

点击 ScoreLabel 并在“检查器”的 Text 字段中键入一个数字。

Control 节点的默认字体很小，不能很好地缩放。游戏资产包中有一个叫作“Xolonium-Regular.ttf”的字体文件。 使用此字体需要执行以下操作：

在“Theme Overrides > Fonts”（主题覆盖 > 字体）中选择“加载”，然后选中“Xolonium-Regular.ttf”文件。

字体尺寸仍然太小，请在“Theme Overrides > Font Sizes”（主题覆盖 > 字体大小）下将其增加到 64。当 ScoreLabel 完成此操作后，请重复对 Message 和 StartButton 节点做同样的修改。

请将节点如下图排列。拖动节点可以手动放置，也可以使用“锚点预设（Anchor Preset）”进行更精确的定位。

ScoreLabel

1. 添加文本 0。
2. 将“Horizontal Alignment”和“Vertical Alignment”设置为 Center。
3. 为“Anchor Preset”选择 Center Top。

Message

1. 添加文本 Dodge the Creeps!。
2. 将“Horizontal Alignment”和“Vertical Alignment”设置为 Center。
3. 将“Autowrap Mode”设置为 Word，否则标签只会有一行。
4. 在“Control - Layout/Transform”中将“Size X”设置为 480，使用屏幕的完整宽度。
5. 为“Anchor Preset”选择 Center。

StartButton

1. 添加文本 Start。
2. 在“Control - Layout/Transform”中将“Size X”设置为 200、“Size Y”设置为 100，在边框和文本之间添加间距。
3. 为“Anchor Preset”选择 Center Bottom。
4. 在“Control - Layout/Transform”中将“Position Y”设置为 580。

在 MessageTimer 中，将 Wait Time 设置为 2 并将 One Shot 属性设置为“启用”。

现将这个脚本添加到 HUD：

extends CanvasLayer

# 定义一个信号，通知主节点已按下按钮
signal start_game

当想显示一条临时消息时，比如“Get Ready”，就会调用这个函数

func show_message(text):
	# 给节点文本赋值
	$Message.text = text
	# 显示该节点
	$Message.show()
	# 启动定时器，2s
	$MessageTimer.start()

我们还需要处理玩家死亡的情况。以下代码会显示 2 秒“Game Over”，然后返回标题屏幕，暂停一会儿之后再显示“Start”按钮。

func show_game_over():
	show_message("Game over")
	# 等到定时器倒计时结束
	await $MessageTimer.timeout
	$Message.text = "Dodge the Creeps!"
	$Message.show()
	# 创建一个一次性的计时器并等待它完成
	await get_tree().create_timer(1.0).timeout
	# 显示开始按钮
	$StartButton.show()

当玩家死亡时调用这个函数。将显示“Game Over”2 秒，然后返回标题屏幕并显示“Start”按钮。

将以下更新分数代码添加到 HUD 中

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

将 StartButton 的 pressed() 信号与 MessageTimer 的 timeout() 信号连接到 HUD 节点上，然后在新函数中添加以下代码：

func _on_start_button_pressed():
	# 开始按钮按下时信号
	# 隐藏按钮
	$StartButton.hide()
	# 发送开始游戏信号
	start_game.emit()

func _on_message_timer_timeout():
	# 定时器结束时隐藏消息
	$Message.hide()

将 HUD 场景连接到 Main 场景

现在我们完成了 HUD 场景，保存并返回 Main 场景。和 Player 场景的做法一样，在 Main 场景中实例化 HUD 场景。如果你没有错过任何东西，完整的场景树应该像这样：

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

在“节点”选项卡中，点击“连接信号”窗口中的“选取”按钮，选择 new_game() 方法或在窗口的“接收方法”下面输入“new_game”，将 HUD 的 start_game 信号连接到 Main 节点的 new_game() 函数。请确认脚本中 func new_game() 的旁边出现了一个绿色的连接图标。

在 new_game() 函数中，更新分数显示并显示“Get Ready”消息：

func new_game():
	score = 0
	# 调用玩家start方法
	$Player.start($StartPostion.position)
	# 倒计时2秒开始
	$StartTimer.start()
	# 更新分数
	$HUD.update_score(score)
	# 显示消息
	$HUD.show_message("Get Ready")

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

func game_over():
	# 定时器停止
	$ScoreTimer.stop()
	# 生成怪物定时器停止
	$MobTimer.stop()
	# 执行UI游戏结束的逻辑
	$HUD.show_game_over()

最后，将下面的代码添加到 _on_score_timer_timeout() 中，保持不断变化的分数的同步显示：

func _on_score_timer_timeout():
	# ScoreTimer定时器结束时分数自增
	score += 1
	# 数值同步更新显示
	$HUD.update_score(score)

现在你就可以开始游戏了！点击“运行项目”按钮。此时会要求你选择一个主场景，选择 main.tscn 即可。

删除旧的小怪

如果你一直玩到“游戏结束”，然后重新开始新游戏，上局游戏的小怪仍然显示在屏幕上。更好的做法是在新游戏开始时清除它们。我们需要一个同时让所有小怪删除它自己的方法，为此可以使用“分组”功能。

在 Mob 场景中，选择根节点，然后单击检查器旁边的“节点”选项卡（在该位置可以找到节点的信号）。 点击“信号”旁边的“分组”，然后可以输入新的组名称，点击“添加”。

现在，所有小怪都将属于“mobs”（小怪）分组。我们可以将以下行添加到 Main 中的 new_game() 函数中：

get_tree().call_group("mobs", "queue_free")

call_group() 函数调用组中每个节点上的删除函数——让每个怪物删除其自身。

游戏在这一点上大部分已经完成。在下一部分和最后一部分中，我们将通过添加背景，循环音乐和一些键盘快捷键来对其进行一些润色。