遊戲資訊顯示

我們的遊戲最後還需要使用者介面（User Interface，UI），顯示分數、“遊戲結束”資訊、重啟按鈕。

建立一個新的場景，點擊「其他節點」按鈕並新增一個 CanvasLayer 節點，命名為 HUD 。「HUD」是 "heads-up display"（抬頭顯示器）的縮寫，是一種資訊顯示方式，會以覆蓋層的形式出現在遊戲畫面之上。

使用 CanvasLayer 節點可以讓我們在遊戲上方的圖層上繪製 UI 元素，這樣上面顯示的資訊就不會被其他遊戲元素如玩家或怪物給蓋住。

HUD 需要顯示如下資訊：

分數，會通過 ScoreTimer 來更改。
訊息，如「Gamer Over」或「請準備！」
用來開始遊戲的「Start」按鈕。

UI 元素所使用的基本節點是 Control 。我們需要使用兩種類型的 Control 節點來給這個遊戲建立 UI： Label （標籤）與 Button （按鈕）。

為 HUD 節點建立下列子節點：

Label ，命名為 ScoreLabel 。
Label ，命名為 Message 。
Button ，命名為 StartButton 。
Timer ，命名為 MessageTimer 。

點擊 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 節點做同樣的修改。

備註

錨點 (Anchors)： Control 節點除了位置和尺寸之外，還有錨點。錨點定義了原點 - 作為節點邊緣的參考點。

請將節點如下圖排列。拖動節點可以手動放置，也可以使用"錨點預設（Anchor Preset）"進行更精確的定位。

ScoreLabel

新增文字 0 。
將“Horizontal Alignment”和“Vertical Alignment”設定為 Center 。
為“Anchor Preset”選擇 Center Top 。

訊息

新增文字： Dodge the Creeps!。
將“Horizontal Alignment”和“Vertical Alignment”設定為 Center 。
將“Autowrap Mode”設定為 Word ，否則標籤只會有一行。
在“Control - Layout/Transform”中將“Size X”設定為 480 ，使用螢幕的完整寬度。
為“Anchor Preset”選擇 Center 。

StartButton

新增文字： Start。
在“Control - Layout/Transform”中將“Size X”設定為 200、“Size Y”設定為 100，在邊框和文字之間新增間距。
為“Anchor Preset”選擇 Center Bottom。
在“Control - Layout/Transform”中將“Position Y”設定為 580。

將 MessageTimer 的 Wait Time 設為 2 ，將 One Shot 設為「開啟」。

現在將這個腳本新增至 HUD ：

extends CanvasLayer

# Notifies `Main` node that the button has been pressed
signal start_game

using Godot;

public partial class HUD : CanvasLayer
{
    // Don't forget to rebuild the project so the editor knows about the new signal.

    [Signal]
    public delegate void StartGameEventHandler();
}

我們現在想要暫時顯示訊息（例如「Get Ready」），所以新增以下程式碼

func show_message(text):
    $Message.text = text
    $Message.show()
    $MessageTimer.start()

public void ShowMessage(string text)
{
    var message = GetNode<Label>("Message");
    message.Text = text;
    message.Show();

    GetNode<Timer>("MessageTimer").Start();
}

當玩家輸了之後會呼叫這個函式。會在畫面上顯示 2 秒「Game Over」，然後回到標題畫面、暫停一下，最後顯示「Start」按鈕。

func show_game_over():
    show_message("Game Over")
    # Wait until the MessageTimer has counted down.
    await $MessageTimer.timeout

    $Message.text = "Dodge the Creeps!"
    $Message.show()
    # Make a one-shot timer and wait for it to finish.
    await get_tree().create_timer(1.0).timeout
    $StartButton.show()

async public void ShowGameOver()
{
    ShowMessage("Game Over");

    var messageTimer = GetNode<Timer>("MessageTimer");
    await ToSignal(messageTimer, Timer.SignalName.Timeout);

    var message = GetNode<Label>("Message");
    message.Text = "Dodge the Creeps!";
    message.Show();

    await ToSignal(GetTree().CreateTimer(1.0), SceneTreeTimer.SignalName.Timeout);
    GetNode<Button>("StartButton").Show();
}

備註

需要暫停一下下的時候，除了使用 Timer 節點外也可以使用 SceneTree（場景樹）的 create_timer() 函式。當需要像上面的程式碼一樣新增一點延遲的時候很有用，上面的例子中我們用它來在顯示「Start」按鈕前增加一點點等待時間。

將以下更新分數程式碼新增到 HUD 中

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

public void UpdateScore(int score)
{
    GetNode<Label>("ScoreLabel").Text = score.ToString();
}

將 StartButton 的 pressed() 訊號和 MessageTimer 的 timeout() 訊號連接到 HUD 節點，並將下列程式碼新增到新的函式中：

func _on_start_button_pressed():
    $StartButton.hide()
    start_game.emit()

func _on_message_timer_timeout():
    $Message.hide()

// We also specified this function name in PascalCase in the editor's connection window.
private void OnStartButtonPressed()
{
    GetNode<Button>("StartButton").Hide();
    EmitSignal(SignalName.StartGame);
}

// We also specified this function name in PascalCase in the editor's connection window.
private void OnMessageTimerTimeout()
{
    GetNode<Label>("Message").Hide();
}

將 HUD 場景連接至 Main 場景

我們現在做好 HUD 場景了。讓我們回到 Main。像剛才實體化 Player 場景一樣，在 Main 場景中實體化 HUD。場景樹會看起來像這樣，檢查一下有沒有漏了什麼：

我們現在需要把 HUD 的功能連接到 Main 腳本。所以我們需要在 Main 場景內新增一點點東西：

在「節點」頁籤中，將 HUD 的 start_game 訊號連接到 Main 節點的 new_game() 函式。方法是在「連接訊號」視窗中點擊「選取」按鈕，然後選擇 new_game() 方法，或是在視窗中「接收器方法」下方輸入 "new_game"。確認腳本中 func new_game() 的旁邊現在出現綠色的連接圖示。

new_game() 中，需要更新分數並顯示「Get Ready」訊息：

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

var hud = GetNode<HUD>("HUD");
hud.UpdateScore(_score);
hud.ShowMessage("Get Ready!");

game_over() 中我們需要呼叫對應的 HUD 函式：

$HUD.show_game_over()

GetNode<HUD>("HUD").ShowGameOver();

最後，將這段程式碼加到 _on_ScoreTimer_timeout() 來讓分數改變的時候能同步顯示：

$HUD.update_score(score)

GetNode<HUD>("HUD").UpdateScore(_score);

警告

記得移除 _ready() 中對 new_game() 的呼叫（如果你還沒做的話），否則你的遊戲會自動開始。

現在你已經準備好開始遊玩了！點擊「執行專案」按鈕。

刪除舊的怪物

如果一直玩到「Game Over」並直接開始新遊戲的話，上一場遊戲的怪物可能還在畫面上。開始遊戲的時候如果能讓舊的怪物消失會更好。而我們只需要告訴所有怪物，刪除自己。我們可以在這裡使用「群組」功能。

在 Mob 場景中，選取根節點，然後點擊 Inspector 旁邊的「節點」頁籤（與您找到節點訊號的相同位置）。在「訊號」旁邊，點擊「群組」以開啟群組總覽，然後點擊「+」按鈕以開啟「建立新群組」對話框。

將群組命名為 mobs ，然後點擊「確定」以新增一個場景群組。

現在所有怪物都會在「mobs」群組裡了。

然後我們可以在 Main 腳本的 new_game() 函式中加入以下這行：

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

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

call_group() 函式會呼叫群組中所有節點的指定名稱的函式——在這裡我們用來讓所有怪物刪除自己。

遊戲在這一點上大部分已經完成。在下一部分和最後一部分中，我們將通過新增背景，迴圈音樂和一些鍵盤快捷鍵來對其進行一些潤色。