Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Head-up-Display

Das Letzte, was unser Spiel noch benötigt, ist eine Benutzeroberfläche (User Interface, UI) um Dinge anzuzeigen wie die Punktzahl, ein "Game Over"-Text und einen Neustart-Button.

Erstellen Sie eine neue Szene, klicken Sie den "Anderer Node"-Button und fügen Sie einen CanvasLayer-Node mit dem Namen HUD hinzu. "HUD" steht für "Head-up-Display", eine Informationsanzeige, die als Overlay über der Spielansicht erscheint.

Mit dem CanvasLayer-Node können wir unsere UI-Elemente auf einer Ebene über dem Rest des Spiels zeichnen, so dass die angezeigten Informationen nicht durch irgendwelche Spielelemente wie den Spieler oder Mobs verdeckt werden.

Das HUD sollte die folgenden Informationen anzeigen:

Die Punktzahl, geändert durch ScoreTimer.
Eine Nachricht, wie z.B. "Game Over" oder "Get Ready!"
Einen "Start"-Button, um das Spiel zu starten.

Der Basis-Node für UI-Elemente ist Control. Um unsere Benutzeroberfläche zu erstellen, verwenden wir zwei Arten vom Control-Nodes: Label und Button.

Erstellen Sie das folgenden Nodes als Child-Objekte des HUD-Nodes:

Label genannt ScoreLabel.
Label genannt Message.
Button genannt StartButton.
Timer genannt MessageTimer.

Klicken Sie auf das ScoreLabel und geben eine Zahl in das Text-Feld im Inspektor ein. Die Default-Schriftart für Control-Nodes ist klein und lässt sich nicht gut skalieren. In den Spiel-Assets ist eine Schriftdatei namens "Xolonium-Regular.ttf" enthalten. Um diese Schriftart zu verwenden, gehen Sie wie folgt vor:

Wählen Sie unter "Theme-Überschreibungen > Schriftarten" "Laden" und wählen Sie die Datei "Xolonium-Regular.ttf".

../../_images/custom_font_load_font.webp

Wenn die Schriftgröße immer noch zu klein ist, erhöhen Sie sie unter "Theme-Überschreibungen> Schriftgrößen" auf 64. Wenn Sie dies mit dem ScoreLabel gemacht haben, wiederholen Sie die Änderungen für die Nodes Message und StartButton.

Bemerkung

Anker: Control-Nodes haben eine Position und eine Größe, aber sie haben auch Anker. Anker definieren den Ursprung - den Referenzpunkt für die Ränder des Nodes.

Ordnen Sie die Nodes wie unten gezeigt an. Sie können die Nodes ziehen, um sie manuell zu platzieren, oder für eine genauere Platzierung die "Anker-Vorgaben" verwenden.

ScoreLabel

Fügen Sie den Text 0 hinzu.
Setzen Sie die "Horizontale Ausrichtung" und "Vertikale Ausrichtung" auf Mitte.
Wählen Sie die "Anker-Vorgabe" Mitte oben.

Nachricht

Fügen Sie den Text Dodge the Creeps! hinzu.
Setzen Sie die "Horizontale Ausrichtung" und "Vertikale Ausrichtung" auf Mitte.
Setzen Sie den "Autowrap-Modus" auf Wort, sonst bleibt das Label in einer Zeile.
Unter "Control - Layout/Transformation" setzen Sie "Größe X" auf 480, um die gesamte Breite des Bildschirms zu nutzen.
Wählen Sie die "Anker-Vorgabe" Mitte.

StartButton

Fügen Sie den Text Start hinzu.
Unter "Control - Layout/Transformation" setzen Sie "Größe X" auf 200 und "Größe Y" auf 100, um ein wenig mehr Abstand zwischen dem Rahmen und dem Text zu schaffen.
Wählen Sie die "Anker-Vorgabe" Mitte unten.
Unter "Control - Layout/Transformation" setzen Sie "Position Y" auf 580.

Stellen Sie im MessageTimer die Wartezeit auf 2 und stellen Sie die Einmalig Eigenschaft auf "An".

Fügen Sie nun dieses Skript zu HUD hinzu:

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();
}

Wir möchten nun vorübergehend eine Meldung anzeigen, z.B. "Get Ready", also fügen wir folgenden Code ein

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();
}

Wir müssen auch verarbeiten, was passiert, wenn der Spieler verliert. Der folgende Code zeigt 2 Sekunden lang "Game Over" an, kehrt dann zum Titelbildschirm zurück und zeigt nach einer kurzen Pause den "Start"-Button an.

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();
}

Bemerkung

Falls eine kurze Pause benötigt wird, kann als Alternative zum Timer-Node die Funktion create_timer() von SceneTree verwendet werden. Das kann sehr nützlich sein, um eine Verzögerung hinzuzufügen. Wie im obigen Code, wo wir ein wenig warten wollen, bevor der "Start"-Button angezeigt wird.

Fügen Sie den folgenden Code in HUD ein, um den Spielstand zu aktualisieren

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

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

Verbinden Sie das pressed() Signal von StartButton und das timeout() Signal von MessageTimer mit dem HUD-Node, und fügen Sie den folgenden Code zu den neuen Funktionen hinzu:

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();
}

Das HUD mit Main verbinden

Jetzt, da wir die HUD-Szene erstellt haben, gehen Sie zurück zu Main und platzieren Sie die HUD-Szene in Main genauso wie die Player-Szene. Der gesamte Szenenbaum sollte so aussehen, also stellen Sie sicher, dass nichts fehlt:

Nun müssen wir die HUD-Funktionalität mit unserem Main-Skript verbinden. Dies erfordert einige Ergänzungen in der Main-Szene:

In the Signals tab, connect the HUD's start_game signal to the new_game() function of the Main node by clicking the "Pick" button in the "Connect a Signal" window and selecting the new_game() method or type "new_game" below "Receiver Method" in the window. Verify that the green connection icon now appears next to func new_game() in the script.

Aktualisieren Sie in new_game() die Punkteanzeige und zeigen Sie die Meldung "Get Ready" an:

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

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

In game_over() müssen wir die entsprechende HUD Funktion aufrufen:

$HUD.show_game_over()

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

Schließlich fügen Sie dies zu _on_score_timer_timeout() hinzu, um die Anzeige mit dem sich ändernden Spielstand zu synchronisieren:

$HUD.update_score(score)

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

Warnung

Vergessen Sie nicht, den Aufruf von new_game() aus _ready() zu entfernen, falls Sie das nicht schon getan haben, sonst wird Ihr Spiel automatisch gestartet.

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

Alte Creeps entfernen

Wenn Sie bis zum "Game Over" spielen und dann ein neues Spiel starten, befinden sich die Creeps des vorherigen Spiel noch auf dem Bildschirm. Es wäre besser, wenn diese beim Start eines neuen Spiels verschwinden würden. Wir benötigen einen Weg um alle Mobs zu entfernen und dies geschieht mit dem "Gruppen"-Feature.

In the Mob scene, select the root node and click the Groups tab next to the Signals tab 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);

Die Funktion call_group() ruft die benannte Funktion für jeden Node in einer Gruppe auf - in diesem Fall sagen wir jedem Mob, dass er sich selbst löschen soll.

Das Spiel ist nun zum größten Teil fertig. Im nächsten und letzten Teil werden wir es etwas aufpolieren, indem wir einen Hintergrund, eine Musikschleife und einige Tastenkombinationen hinzufügen.