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...

Heads up display (HUD)

La dernière pièce dont notre jeu a besoin est une Interface Utilisateur (IU), User Interface (UI) en anglais, pour afficher des éléments comme le score, un message "game over" et un bouton de redémarrage.

Créez une nouvelle scène, cliquez sur le bouton "Autre nœud" et ajoutez un nœud CanvasLayer nommé HUD. "HUD"» signifie « Heads-Up Display (affichage tête haute) », un affichage d'informations qui apparaît en superposition au-dessus de la vue du jeu.

Le nœud CanvasLayer nous permet de dessiner nos éléments de l'interface utilisateur sur un calque au-dessus du reste du jeu, de sorte que les informations qu'il affiche ne sont couvertes par aucun élément du jeu comme le joueur ou les monstres.

Le HUD doit afficher les informations suivantes :

Le score, modifié par ScoreTimer.
Un message, tel que "Game Over" ou "Get Ready"
Un bouton "Démarrer" pour commencer le jeu.

Le nœud de base pour les éléments de l'interface utilisateur est Control. Pour créer notre interface utilisateur, nous utiliserons deux types de nœuds Control : Label et Button.

Créez les éléments suivants en tant qu'enfants du nœud HUD :

Un Label nommé ScoreLabel.
Un Label nommé Message.
Un Button nommé StartButton.
Un Timer nommé MessageTimer.

Cliquez sur le ScoreLabel et dans l'inspecteur, entrez un nombre dans le champ Text. La police par défaut pour les nœuds Control est petite et ne s'ajuste pas correctement. Il existe un fichier de police inclus dans les ressources du jeu appelé "Xolonium-Regular.ttf". Pour utiliser cette police, procédez comme suit :

Sous "Thèmes de remplacement > Polices", choisissez "Charger" et sélectionnez le fichier "Xolonium-Regular.ttf".

../../_images/custom_font_load_font.webp

La taille de la police est encore trop petite, augmentez-la à 64 sous "Remplacements de thème > Tailles de police". Une fois que vous avez fait cela avec ScoreLabel, répétez les modifications pour les nœuds Message et StartButton.

Note

Ancres : les nœuds Control ont une position et une taille, mais ils ont également des ancres. Les ancres définissent l'origine, c'est-à-dire le point de référence des arêtes du nœud.

Disposez les nœuds comme affiché ci-dessous. Vous pouvez faire glisser les nœuds pour les placer manuellement ou, pour un placement plus précis, utiliser les "préréglages d'ancre".

ScoreLabel

Dans l'inspecteur, ajouter le texte 0.
Dans l'inspecteur, réglez "Alignement horizontal" et "Alignement vertical" sur Centre.
Dans l'inspecteur sous "Contrôle - Disposition" ou dans l'espace de travail 2D, choisissez le « Préréglage d'ancrage » Centre Haut.

Message

Dans l'inspecteur de nœud, ajoutez le texte : Dodge the Creeps !.
Dans l'inspecteur, réglez "Alignement horizontal" et "Alignement vertical" sur Centre.
Réglez le "Autowrap Mode" sur Word, sinon l'étiquette restera sur une seule ligne.
Sous "Contrôle - Disposition/Transformation", définissez "Taille X" sur 480 pour utiliser toute la largeur de l'écran.
Dans l'espace de travail 2D, choisir le "préréglage d'ancre" Centre.

StartButton

Ajoutez le texte Start.
Sous "Contrôle - Disposition/Transformation", définissez "Taille X" sur 200 et "Taille Y" sur 100 pour ajouter un peu plus de remplissage entre la bordure et le texte.
Choisissez le « Préréglage d'ancrage » Centre Bas.
Sous "Contrôle - Disposition/Transformation", définissez "Position Y" sur 580.

Sur le MessageTimer, mettez le Wait Time à 2 et mettez la propriété One Shot à "On".

Ajoutez à présent ce script au 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();
}

Nous pouvant maintenant afficher un message temporaire, comme "Prêt", nous ajoutons donc le code suivant

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

Nous devons également traiter ce qui se passe lorsque le joueur perd. Le code ci-dessous affichera "Game Over" pendant 2 secondes, puis reviendra à l'écran titre et, après une brève pause, affichera le bouton "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();
}

Note

Quand vous avez besoin d'une courte pause, une alternative à l'utilisation d'un nœud Timer est d'utiliser la fonction create_timer() de l'arborescence de scène. Ceci peut être très utile pour créer un délais, comme dans le code ci-dessus, où nous voulons attendre un peu avant de faire apparaître le bouton "Start".

Ajoutez le code ci-dessous à HUD pour mettre à jour le score

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

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

Connectez le signal pressed() de StartButton et le signal timeout() de MessageTimer au nœud HUD et ajoutez le code suivant aux nouvelles fonctions :

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

Connecter le HUD à Main

Maintenant que nous avons fini de créer la scène du HUD, sauvegardez-la et retournez à Main. Instanciez la scène HUD dans Main comme vous l'avez fait dans la scène Player. L'arbre de scène devrait ressembler à ça, alors assurez-vous de ne rien manquer :

Nous devons maintenant connecter la fonctionnalité HUD à notre script Main. Cela nécessite quelques ajouts à la scène Main :

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.

Dans new_game(), mettez à jour l'affichage des scores et affichez le message "Get Ready" :

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

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

Dans game_over() nous devons appeler la fonction HUD correspondante :

$HUD.show_game_over()

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

Enfin, ajoutez ceci à on_score_timer_timeout() pour que l'affichage reste synchronisé avec le changement de score :

$HUD.update_score(score)

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

Avertissement

N'oubliez pas de supprimer l'appel à new_game() dans _ready() si vous ne l'avez pas déjà fait, sinon votre jeu démarrera automatiquement.

Vous êtes maintenant prêt à jouer ! Cliquez sur le bouton "Lancer le projet".

Supprimer les vieux Creeps

Si vous jouez jusqu'au "Game Over" et que vous commencez une nouvelle partie immédiatement, les monstres de la partie précédente sont toujours à l'écran. Il vaudrait mieux qu'ils disparaissent tous au début d'une nouvelle partie. Il nous faut juste un moyen de dire à tous les monstres de se supprimer. Nous pouvons le faire grâce à la fonction "groupe".

Dans la scène Mob, sélectionnez le nœud racine et cliquez sur l'onglet Groupes à côté de l'onglet Signaux et sur le bouton "+" pour ouvrir la fenêtre "Créer nouveau groupe".

Nommez le groupe mobs et cliquez sur "ok" pour ajouter un nouveau groupe de scène.

Maintenant, toutes les monstres seront dans le groupe "monstres".

Nous pouvons ensuite ajouter la ligne suivante à la fonction new_game() dans 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);

La fonction call_group() appelle la fonction nommée sur chaque nœud d'un groupe - dans ce cas nous disons à chaque mob de s'effacer eux-même.

Le jeu est pratiquement terminé à ce stade. Dans la prochaine et dernière partie, nous allons le peaufiner un peu en ajoutant un arrière-plan, une musique qui boucle et quelques raccourcis clavier.