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

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

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

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

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

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

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

Основним вузлом для елементів інтерфейсу є Control. Щоб створити наш інтерфейс користувача, ми будемо використовувати два типи вузлів Control: Label і Button.

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

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

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

Під "Theme Overrides > Font" виберіть "Завантажити" та виберіть файл "Xolonium-Regular.ttf".

../../_images/custom_font_load_font.webp

Розмір шрифту все ще занадто малий, збільште його до 64 в "Заміна теми > Розміри шрифту". Після того, як ви зробите це з ScoreLabel, повторіть зміни для вузлів Message та StartButton.

Примітка

Якорі: вузли Керування мають позицію та розмір, але вони також мають прив’язки. Якір визначає початок координат - точку відліку для країв вузла.

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

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

Додати текст 0.
Встановіть "Horizontal Alignment" та "Vertical Alignment" на Center.
Виберіть "Anchor Preset" Center Top.

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

Додайте текст Dodge the Creeps!.
Встановіть "Horizontal Alignment" та "Vertical Alignment" на Center.
Встановіть «Autowrap Mode» на Word, інакше мітка залишатиметься в одному рядку.
У розділі "Керування - Макет/Трансформація" встановіть для "Розміру X" значення 480, щоб використовувати всю ширину екрана.
Виберіть "Anchor Preset" Center.

StartButton (Кнопка Старту)

Додайте текст Start.
У розділі "Control - Layout/Transform" встановіть "Size X " на 200 та "Size Y" на 100, щоб додати трохи більше доповнення між рамкою та текстом.
Виберіть "Anchor Preset" Center Bottom.
У розділі "Control - Layout/Transform" встановіть "Position Y" на 580.

На MessageTimer, встановіть Wait Time на 2 і встановіть властивість One Shot на "Увімкнено".

Тепер додайте скрипт до 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();
}

Тепер ми хочемо тимчасово відображати повідомлення, наприклад, "Get Ready", тому додамо наступний код

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

Нам також потрібно обробити те, що відбувається, коли гравець програє. У наведеному нижче коді на 2 секунди з’явиться повідомлення «Game Over» (Гра закінчена), потім повернеться до титульного екрана та після короткої паузи відобразиться кнопка «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();
}

Примітка

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

Додайте код нижче в HUD, щоб оновити рахунок

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

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

Підключіть сигнал pressed() StartButton і timeout() сигнал MessageTimer до вузла HUD і додайте наступний код до нових функцій :

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

Підключення HUD до Main

Тепер, коли ми закінчили створення сцени HUD, збережіть її та поверніться до Main. Вставте HUD сцену в Main, як ви вставили сцену Player. Повне дерево має виглядати так, тож переконайтеся, що ви нічого не пропустили:

Тепер нам потрібно підключити функції HUD до нашого скрипту Main. Для цього потрібно кілька доповнень до сцени 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.

У 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!");

У game_over() нам потрібно викликати відповідну функцію HUD:

$HUD.show_game_over()

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

Нарешті, додайте це до _on_score_timer_timeout(), щоб синхронізувати відображення зі зміною рахунку:

$HUD.update_score(score)

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

Попередження

Не забудьте вилучити виклик new_game() з _ready(), якщо ви цього ще не зробили, інакше ваша гра запуститься автоматично.

Тепер ви готові до гри! Натисніть кнопку «Відтворити проект».

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

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

У сцені Mob виберіть кореневий вузол і натисніть вкладку Groups поруч із вкладкою Signals та кнопку "+", щоб відкрити діалогове вікно "Створити нову групу".

Назвіть групу mobs і натисніть "ok", щоб додати нову групу сцен.

Тепер усі моби будуть у групі «моби».

Потім ми можемо додати такий рядок до функції 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", Node.MethodName.QueueFree);

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

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