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, et ajoutez un nœud CanvasLayer nommé HUD. "HUD" signifie "heads-up display" un affichage informatif qui apparaît en surimpression sur 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 Theme overrides > Fonts cliquez sur la case vide et sélectionnez "New DynamicFont"

Cliquez sur la "DynamicFont" que vous avez ajoutée, et sous Font > FontData, choisissez "Load" et sélectionnez le fichier "Xolonium-Regular.ttf".

Définir la propriété "Size" sous Settings, 64 fonctionne bien.

Une fois que vous avez fait cela sur le ScoreLabel, vous pouvez cliquer sur la flèche vers le bas à côté de la propriété Font et choisir "Copier", puis "Coller" au même endroit sur les deux autres nœuds Control.

Note

Ancres et marges : Les nœuds Control ont une position et une taille, mais ils ont aussi des ancres et des marges. Les ancres définissent l'origine - le point de référence pour les bords du nœud. Les marges se mettent à jour automatiquement lorsque vous déplacez ou redimensionnez un nœud control. Ils représentent la distance entre les bords du nœud control et son ancrage.

Disposez les nœuds comme indiqué ci-dessous. Cliquez sur le bouton "Layout" pour définir la disposition d'un nœud de contrôle :

Vous pouvez faire glisser les nœuds pour les placer manuellement ou, pour un placement plus précis, utiliser les paramètres suivants :

ScoreLabel¶

Layout / Disposition sur l'écran : "Top Wide"
Text : 0
Align : "Center"

Message¶

Layout / Disposition sur l'écran : "HCenter Wide"
Text : Dodge the Creeps!
Align : "Center"
Autowrap : "On"

StartButton¶

Text : Start
Layout / Disposition sur l'écran : "Center Bottom"
Margin :
- Top : -200
- Bottom : -100

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

signal start_game

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

    [Signal]
    public delegate void StartGame();
}

// Copy `player.gdns` to `hud.gdns` and replace `Player` with `HUD`.
// Attach the `hud.gdns` file to the HUD node.

// Create two files `hud.cpp` and `hud.hpp` next to `entry.cpp` in `src`.
// This code goes in `hud.hpp`. We also define the methods we'll be using here.
#ifndef HUD_H
#define HUD_H

#include <Button.hpp>
#include <CanvasLayer.hpp>
#include <Godot.hpp>
#include <Label.hpp>
#include <Timer.hpp>

class HUD : public godot::CanvasLayer {
    GODOT_CLASS(HUD, godot::CanvasLayer)

    godot::Label *_score_label;
    godot::Label *_message_label;
    godot::Timer *_start_message_timer;
    godot::Timer *_get_ready_message_timer;
    godot::Button *_start_button;
    godot::Timer *_start_button_timer;

public:
    void _init() {}
    void _ready();
    void show_get_ready();
    void show_game_over();
    void update_score(const int score);
    void _on_StartButton_pressed();
    void _on_StartMessageTimer_timeout();
    void _on_GetReadyMessageTimer_timeout();

    static void _register_methods();
};

#endif // HUD_H

Le signal start_game indique au nœud Main que le bouton a été pressé.

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

// This code goes in `hud.cpp`.
#include "hud.hpp"

void HUD::_ready() {
    _score_label = get_node<godot::Label>("ScoreLabel");
    _message_label = get_node<godot::Label>("MessageLabel");
    _start_message_timer = get_node<godot::Timer>("StartMessageTimer");
    _get_ready_message_timer = get_node<godot::Timer>("GetReadyMessageTimer");
    _start_button = get_node<godot::Button>("StartButton");
    _start_button_timer = get_node<godot::Timer>("StartButtonTimer");
}

void HUD::_register_methods() {
    godot::register_method("_ready", &HUD::_ready);
    godot::register_method("show_get_ready", &HUD::show_get_ready);
    godot::register_method("show_game_over", &HUD::show_game_over);
    godot::register_method("update_score", &HUD::update_score);
    godot::register_method("_on_StartButton_pressed", &HUD::_on_StartButton_pressed);
    godot::register_method("_on_StartMessageTimer_timeout", &HUD::_on_StartMessageTimer_timeout);
    godot::register_method("_on_GetReadyMessageTimer_timeout", &HUD::_on_GetReadyMessageTimer_timeout);
    godot::register_signal<HUD>("start_game", godot::Dictionary());
}

Cette fonction est appelée lorsque nous voulons afficher temporairement un message, tel que "Get Ready".

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

    $Message.text = "Dodge the\nCreeps!"
    $Message.show()
    # Make a one-shot timer and wait for it to finish.
    yield(get_tree().create_timer(1), "timeout")
    $StartButton.show()

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

    var messageTimer = GetNode<Timer>("MessageTimer");
    await ToSignal(messageTimer, "timeout");

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

    await ToSignal(GetTree().CreateTimer(1), "timeout");
    GetNode<Button>("StartButton").Show();
}

// This code goes in `hud.cpp`.
// There is no `yield` in GDNative, so we need to have every
// step be its own method that is called on timer timeout.
void HUD::show_get_ready() {
    _message_label->set_text("Get Ready");
    _message_label->show();
    _get_ready_message_timer->start();
}

void HUD::show_game_over() {
    _message_label->set_text("Game Over");
    _message_label->show();
    _start_message_timer->start();
}

Cette fonction est appelée lorsque le joueur perd. Elle affichera "Game Over" pendant 2 secondes, puis reviendra à l'écran de titre et affichera le bouton "Start".

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

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

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

// This code goes in `hud.cpp`.
void HUD::update_score(const int p_score) {
    _score_label->set_text(godot::Variant(p_score));
}

Cette fonction est appelée dans Main chaque fois que le score change.

Connectez le signal timeout() de MessageTimer et le signal pressed() de StartButton et ajoutez le code suivant aux nouvelles fonctions :

func _on_StartButton_pressed():
    $StartButton.hide()
    emit_signal("start_game")

func _on_MessageTimer_timeout():
    $Message.hide()

public void OnStartButtonPressed()
{
    GetNode<Button>("StartButton").Hide();
    EmitSignal("StartGame");
}

public void OnMessageTimerTimeout()
{
    GetNode<Label>("Message").Hide();
}

// This code goes in `hud.cpp`.
void HUD::_on_StartButton_pressed() {
    _start_button_timer->stop();
    _start_button->hide();
    emit_signal("start_game");
}

void HUD::_on_StartMessageTimer_timeout() {
    _message_label->set_text("Dodge the\nCreeps");
    _message_label->show();
    _start_button_timer->start();
}

void HUD::_on_GetReadyMessageTimer_timeout() {
    _message_label->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 :

Dans l'onglet Nœud, connectez le signal start_game du HUD à la fonction new_game() du nœud Main en tapant "new_game" dans la "Receiver Method" de la fenêtre "Connect a Signal". Vérifiez que l'icône de connexion verte apparaît maintenant à côté de func new_game() dans le 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!");

_hud->update_score(score);
_hud->show_get_ready();

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

$HUD.show_game_over()

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

_hud->show_game_over();

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

$HUD.update_score(score)

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

_hud->update_score(score);

Vous êtes maintenant prêt à jouer ! Cliquez sur le bouton "Lancer le projet". Il vous sera demandé de sélectionner une scène principale, choisissez alors Main.tscn.

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 "Nœud" à côté de l'inspecteur (le même endroit où vous trouvez les signaux du nœud). À côté de "Signaux", cliquez sur "Groupes" et vous pouvez taper un nouveau nom de groupe et cliquer sur "Ajouter".

Maintenant, tous les mobs seront dans le groupe "mobs". 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", "queue_free");

get_tree()->call_group("mobs", "queue_free");

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.