Up to date

This page is up to date for Godot 4.3. If you still find outdated information, please open an issue.

ヘッドアップディスプレイ

このゲームに必要な最後の要素は、スコアや"ゲームオーバー"のメッセージ、リスタートボタンなどを表示するユーザーインターフェイス（UI）です。

新しいシーンを作成し、"その他のノード"をクリックして HUDという名前のCanvasLayerノードを追加します。「HUD」は、ゲームビューの上にオーバーレイとして表示される情報表示である「ヘッドアップディスプレイ」("Heads-up display")の略です。

CanvasLayerノードを使用すると、ゲームの他の部分よりも上のレイヤにUI要素を描画することができるため、表示される情報がプレイヤーやモブなどのゲーム要素によって隠されることがなくなります。

HUDには、次の情報を表示する必要があります:

ScoreTimer によって変更されるスコア。
「Game Over」や「Get Ready! 」などのメッセージ
ゲームを開始する「スタート」ボタン。

UI要素の基本ノードはControlです。UIを作成するには、LabelとButtonの2種類のControlノードを使用します。

HUD ノードの子として次を作成します:

ScoreLabel という名前のラベル。
Message という名前のLabel。
StartButton という名前のボタン。
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 に増やしてください。 Message と StartButton ノードも同じように変更します。

注釈

アンカー : Control ノードには位置とサイズがありますが、アンカーもあります。アンカーは原点 (ノードの端の基準点) を定義します。

以下のようにノードを配置します。ノードをドラッグして手動で配置することもできますが、より正確な配置を行うには "アンカーのプリセット" を使用します。

ScoreLabel

0 というテキストを追加します。
"Horizontal Alignment" と "Vertical Alignment" を Center に設定します。
"アンカーのプリセット" で 中央上 を選択します。

Message

Dodge the Creeps! というテキストを追加します。
"Horizontal Alignment" と "Vertical Alignment" を Center に設定します。
"Autowrap Mode" を Word に設定します。そうしないとラベルは1行のままになります。
"Control - Layout/Transform" で "Size X" を 480 に設定して、画面の幅全体を使うようにします。
"アンカーのプリセット" で 中央 を選択します。

StartButton

Start というテキストを追加します。
"Control - Layout/Transform" で "Size X" を 200 、 "Size Y" を 100 に設定し、ボーダーとテキストの間に少しパディングを追加します。
"アンカーのプリセット" で 中央下 を選択します。
"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();
}

この関数は、プレイヤーが負けたときに呼び出されます。 2秒間「Game Over」と表示され、タイトル画面に戻り、少し間を置いて「Start」ボタンが表示されます。

注釈

短い間、一時停止する必要がある場合は、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をメインに接続する

HUD シーンの作成が完了したら、 Main に戻ります。 Player のシーンと同じように HUD シーンを Main にインスタンス化し、ツリーの一番下に配置します。ツリー全体は次のようになるはずです。何も見落としていないか確認してください:

次に、 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_score_timer_timeout() に追加して、変更されたスコアと同期して表示を維持します:

$HUD.update_score(score)

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

警告

_ready() から new_game() の呼び出しを削除することを忘れないでください。そうでなければ、ゲームが自動的に始まってしまうでしょう。

Now you're ready to play! Click the "Play the Project" button.

古い「クリープ」を削除する

「ゲームオーバー」までプレイしてから新しいゲームを開始すると、前のゲームの「クリープ」が画面に表示されたままになっています。それらすべて、新しいゲームの開始時には消したほうがいいでしょう。それには、すべてのモブたちに自身の削除を指示する方法が必要です。これは「グループ」機能を使えば可能です。

In the Mob scene, select the root node and click the "Node" tab next to the Inspector (the same place where you find the node's signals). Next to "Signals", click "Groups" to open the group overview and the "+" button to open the "Create New Group" dialog.

Name the group mobs and click "ok" to add a new scene group.

Now all mobs will be in the "mobs" group.

We can then add the following line to the new_game() function in Main:

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() 関数はグループ内の全てのノードに対して名前付きの関数を呼び出します - この場合は全てのモブに自分自身を削除するように指示しています。

この時点で、ゲームはほぼ完成しています。次と最後のパートでは、背景、ループする音楽、キーボードショートカットを追加して、もう少し磨きをかけます。