Головной дисплей¶

Заключительный этап нашей игры нуждается в Пользовательском интерфейсе (UI), чтобы отображать такие вещи, как рейтинг, сообщение "игра окончена" и кнопку перезапуска.

Create a new scene, and add a CanvasLayer node named HUD. "HUD" stands for "heads-up display", an informational display that appears as an overlay on top of the game view.

Узел CanvasLayer позволяет нам прорисовывать элементы нашего UI на слое поверх всей остальной игры, поэтому отображаемая информация не перекрывается никакими игровыми элементами, такими как игрок или мобы.

HUD должен отображать следующую информацию:

Счет, измененный ScoreTimer.
Сообщение, например "Game Over" или "Get Ready!"
Кнопка "Start", чтобы начать игру.

Основной узел для элементов UI — это Control. Чтобы создать наш UI, мы будем использовать два типа узлов Control: Label и Button.

Создайте следующие узлы в качестве потомков узла '' HUD'':

Label с именем ScoreLabel.
Label с именем Message.
Button с именем StartButton.
Timer с именем MessageTimer.

Нажмите на ScoreLabel и введите число в поле Text в Инспекторе. Стандартный шрифт для узлов Control мал и плохо масштабируется. В ресурсы игры включен файл шрифта под названием "Xolonium-Regular.ttf". Чтобы использовать этот шрифт, сделайте следующее:

Under Theme overrides > Fonts click on the empty box and select "New DynamicFont"

Щелкните на "DynamicFont", который вы добавили, и в разделе Font > FontData выберите "Load" и выберите файл "Xolonium-Regular.ttf".

Set the "Size" property under Settings, 64 works well.

Once you've done this on the ScoreLabel, you can click the down arrow next to the Font property and choose "Copy", then "Paste" it in the same place on the other two Control nodes.

Примечание

Anchors and Margins: Control nodes have a position and size, but they also have anchors and margins. Anchors define the origin - the reference point for the edges of the node. Margins update automatically when you move or resize a control node. They represent the distance from the control node's edges to its anchor.

Организуйте узлы, как показано ниже. Нажмите кнопку "Макет", чтобы задать макет для узла Control:

Вы можете перетаскивать узлы, размещая их вручную, либо используйте следующие параметры для более точного размещения:

ScoreLabel¶

Макет : "Сверху по всей ширине"
Text : 0
Align : "Center"

Сообщение¶

Макет: "По центру по всей ширине"
Text: Уворачивайся от крипов!
Align : "Center"
Autowrap : "Вкл"

StartButton¶

Text : Старт
Макет: "Внизу посередине"
Margin :
- Top: -200
- Bottom: -100

В MessageTimer установите параметр Wait Time на 2, а параметр One Shot на значение "Вкл".

Теперь добавьте этот скрипт в 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

Сигнал start_game сообщает узлу Main, что кнопка была нажата.

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

Эта функция вызывается, когда мы хотим временно отобразить сообщение, такое как "Приготовьтесь".

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

Эта функция вызывается, когда игрок проигрывает. Она покажет надпись "Game Over" на 2 секунды, затем произойдет возврат к основному экрану, и после короткой паузы появится кнопка "Start".

Примечание

Если вам нужно сделать паузу на короткое время, то альтернативой использованию узла Timer является использование функции SceneTree create_timer(). Может быть очень полезно добавлять задержки наподобие таких, как в вышеприведенном коде, где нам хотелось бы подождать немного времени, прежде чем показывать кнопку "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));
}

Эта функция вызывается из Main каждый раз, когда изменяется количество очков.

Присоедините сигнал timeout() из MessageTimer и сигнал pressed() из StartButton и добавьте следующий код к новым функциям:

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

Подключение HUD к Main¶

Теперь, когда мы закончили создание сцены HUD, вернитесь к Main. Инстанцируйте сцену HUD в Main подобно тому, как вы это делали со сценой Player. Дерево сцены должно выглядеть так, поэтому убедитесь, что вы ничего не упустили:

Теперь нам нужно подключить функционал HUD в наш Main-скрипт. Для этого потребуются некоторые дополнения к сцене Main:

Во вкладке "Узел" присоедините сигнал HUD start_game к функции узла Main 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!");

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

В game_over() нам нужно вызвать соответствующую функцию HUD:

$HUD.show_game_over()

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

_hud->show_game_over();

Наконец добавьте это в _on_ScoreTimer_timeout(), чтобы синхронизировать отображение с изменением количества очков:

$HUD.update_score(score)

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

_hud->update_score(score);

Теперь вы готовы к игре! Нажмите на кнопку "Запустить проект". Вам будет предложено выбрать основную сцену - выбирайте Main.tscn.

Удаляем старых крипов¶

Если вы играете до "Game Over", а затем сразу начинаете новую игру, то крипы из предыдущей игры могут все еще оставаться на экране. Было бы лучше, если бы все они исчезали в начале новой игры. Нам просто нужен способ сказать всем мобам, чтобы они удалились. Мы можем сделать это с помощью функции "group" ("группа").

В сцене Mob выберите корневой узел и нажмите вкладку "Узел" рядом с Инспектором (там же, где вы находите сигналы узла). Рядом с "Сигналы" нажмите "Группы", введите новое имя группы и нажмите "Добавить".

Теперь все мобы будут в группе "mobs". Затем мы можем добавить следующие строки к функции new_game() в 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");

Функция call_group() вызывает каждую именованную функцию на каждом узле в группе - в этом случае мы говорим каждому мобу удалять себя.

Игра на данный момент по большей части готова. В следующей и последней части мы немного отполируем её с помощью добавления фона, проигрывания музыки и нескольких сочетаний клавиш.