游戏信息显示

我们的游戏最后还需要用户界面（User Interface，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”文件。

../../_images/custom_font_load_font.webp

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

../../_images/custom_font_size.webp

备注

锚点：Control 节点具有位置和大小，但它也有锚点（Anchor）。锚点定义的是原点——节点边缘的参考点。

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

../../_images/ui_anchor.webp

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：

GDScriptC#

  1. extends CanvasLayer
  3. # Notifies `Main` node that the button has been pressed
  4. signal start_game
  1. using Godot;
  3. public partial class HUD : CanvasLayer
  4. {
  5.     // Don't forget to rebuild the project so the editor knows about the new signal.
  7.     [Signal]
  8.     public delegate void StartGameEventHandler();
  9. }

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

GDScriptC#

  1. func show_message(text):
  2.     $Message.text = text
  3.     $Message.show()
  4.     $MessageTimer.start()
  1. public void ShowMessage(string text)
  2. {
  3.     var message = GetNode<Label>("Message");
  4.     message.Text = text;
  5.     message.Show();
  7.     GetNode<Timer>("MessageTimer").Start();
  8. }

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

GDScriptC#

  1. func show_game_over():
  2.     show_message("Game Over")
  3.     # Wait until the MessageTimer has counted down.
  4.     await $MessageTimer.timeout
  6.     $Message.text = "Dodge the Creeps!"
  7.     $Message.show()
  8.     # Make a one-shot timer and wait for it to finish.
  9.     await get_tree().create_timer(1.0).timeout
  10.     $StartButton.show()
  1. async public void ShowGameOver()
  2. {
  3.     ShowMessage("Game Over");
  5.     var messageTimer = GetNode<Timer>("MessageTimer");
  6.     await ToSignal(messageTimer, Timer.SignalName.Timeout);
  8.     var message = GetNode<Label>("Message");
  9.     message.Text = "Dodge the Creeps!";
  10.     message.Show();
  12.     await ToSignal(GetTree().CreateTimer(1.0), SceneTreeTimer.SignalName.Timeout);
  13.     GetNode<Button>("StartButton").Show();
  14. }

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

备注

当你需要暂停片刻时，可以使用场景树的 get_tree().create_timer(2) 函数替代使用 Timer 节点。这对于延迟非常有用，例如在上述代码中，在这里我们需要在显示“开始”按钮前等待片刻。

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

GDScriptC#

  1. func update_score(score):
  2.     $ScoreLabel.text = str(score)
  1. public void UpdateScore(int score)
  2. {
  3.     GetNode<Label>("ScoreLabel").Text = score.ToString();
  4. }

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

GDScriptC#

  1. func _on_start_button_pressed():
  2.     $StartButton.hide()
  3.     start_game.emit()
  5. func _on_message_timer_timeout():
  6.     $Message.hide()
  1. // We also specified this function name in PascalCase in the editor's connection window.
  2. private void OnStartButtonPressed()
  3. {
  4.     GetNode<Button>("StartButton").Hide();
  5.     EmitSignal(SignalName.StartGame);
  6. }
  8. // We also specified this function name in PascalCase in the editor's connection window.
  9. private void OnMessageTimerTimeout()
  10. {
  11.     GetNode<Label>("Message").Hide();
  12. }

将 HUD 场景连接到 Main 场景

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

../../_images/completed_main_scene.webp

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

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

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

GDScriptC#

  1. $HUD.update_score(score)
  2. $HUD.show_message("Get Ready")
  1. var hud = GetNode<HUD>("HUD");
  2. hud.UpdateScore(_score);
  3. hud.ShowMessage("Get Ready!");

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

GDScriptC#

  1. $HUD.show_game_over()
  1. GetNode<HUD>("HUD").ShowGameOver();

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

GDScriptC#

  1. $HUD.update_score(score)
  1. GetNode<HUD>("HUD").UpdateScore(_score);

警告

如果还没做的话，请不要忘记在 _ready() 中移除对 new_game() 的调用。否则你的游戏将自动开始。

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

删除旧的小怪

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

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

../../_images/group_tab.webp

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

GDScriptC#

  1. get_tree().call_group("mobs", "queue_free")
  1. // Note that for calling Godot-provided methods with strings,
  2. // we have to use the original Godot snake_case name.
  3. GetTree().CallGroup("mobs", Node.MethodName.QueueFree);

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

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