Поверхневий екран¶

Остання частина, яка потрібна нашій грі, - це інтерфейс користувача (UI) для відображення таких речей, як рахунок, повідомлення "гра завершена" та кнопка перезавантаження.

Створіть нову сцену та додайте вузол CanvasLayer з іменем HUD. "HUD" означає "head-up display" , інформаційний екран, який відображається поверх ігрового вікна.

Вузол CanvasLayer дозволяє нам малювати наші елементи призначені для інтерфейсу користувача поверх решти частини гри, так що відображена в ньому інформація не прикривається ніякими ігровими елементами, такими як гравець, чи моби.

HUD повинен відобразити наступну інформацію:

Рахунок, змінюваний ScoreTimer.
Повідомлення, наприклад "Game Over" ("Гра закінчена"), або "Get Ready!" ("Готуйся!")
Кнопка "Start"("Старт"), щоб розпочати гру.

Основний вузол для елементів інтерфейсу - Control. Для створення нашого інтерфейсу ми будемо використовувати два типи цього вузла : Label та Button.

Додайте вузлу HUD таких нащадків:

Label названа ScoreLabel (Мітка рахунку).
Label названа ``Message``( повідомлення).
Button названа StartButton (кнопка старту).
Timer названий MessageTimer (таймер повідомлення).

Клацніть на ScoreLabel і введіть число в поле Text в Інспекторі. Шрифт за замовчуванням для вузлів Control невеликий і не дуже масштабується. У ігрових активах є файл шрифту, який називається "Xolonium-Regular.ttf" (даний шрифт підтримує кирилицю). Щоб використовувати цей шрифт, виконайте наступне:

У розділі Theme overrides > Fonts (Визначення теми > Шрифти) в порожній графі виберіть "New DynamicFont" ("Новий динамічний шрифт")

Клацніть на доданому "DynamicFont", а під Font > FontData (Шрифт > Дані шрифту) виберіть "Завантажити" та виберіть файл "Xolonium-Regular.ttf".

Встановіть властивість Size в "Settings" на 64 для кращого вигляду.

Зробивши це зі ScoreLabel ви можете натиснути стрілку вниз поряд з властивістю DynamicFont і вибрати "Копіювати", а потім "Вставити" його в тому ж місці на других вузлах Control.

Примітка

Прив'язки та поля: вузли Control мають положення та розмір, але вони також мають прив'язки (якорі) та поля. Прив'язки визначають початок координат - опорну точку для країв вузла. Поля оновлюються автоматично під час переміщення, чи зміни розміру, контрольного вузла. Вони представляють відстань від країв контрольного вузла до його прив'язки. Детальнішу інформацію дивіться doc_design_interfaces_with_the_control_nodes.

Впорядкуйте вузли, як показано нижче. Натисніть кнопку "Макет", щоб встановити макет вузла керування:

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

ScoreLabel (Мітка рахунку)¶

Макет : "Згори за шириною"
Text : 0
Align (вирівнювання): "Center"

Повідомлення¶

Макет : "Гор. за центром за шириною"
Text : Dodge the Creeps! (Ухились від крипів!)
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 секунд, потім повертає екран заголовка і, після короткої паузи, покаже кнопку "Старт".

Примітка

Коли вам потрібно зробити паузу на короткий час, альтернативою використанню вузла Timer є використання функції SceneTree (Дерева Сцени) create_timer(). Це може бути дуже корисно для такої затримки, як, наприклад, у наведеному вище коді, де ми хочемо зачекати трохи часу, перш ніж показувати кнопку "Старт".

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 до функції new_game() вузла Main ввівши "new_game" в "Receiver Method" у вікні "Під'єднання сигналу". Переконайтеся, що в скрипті поряд з 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.

Видалення старих крипів¶

Якщо ви дограєте до кінця гри, а потім починаєте нову гру, крипи з попередньої гри все ще залишаються на екрані. Було б краще, якби вони всі зникли на початку нової гри. Нам просто потрібно сказати всім мобам, що вони мають знищитися. Ми можемо зробити це за допомогою функції "group" (група).

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

Тепер всі моби будуть в групі "mobs". Ми можемо додати наступні рядки до функції game_over() в 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() викликає кожну іменовану функцію на кожному вузлу в групі - в цьому випадку ми кажемо кожному мобу видаляти себе.

На цьому етапі гра майже завершена. У наступній і останній частині ми трохи відшліфуємо її, додавши фон, музику, що зациклюється, і кілька комбінацій клавіш.