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

Informační displej

Posledním kouskem, který naše hra potřebuje, je uživatelské rozhraní (UI), ve kterém zobrazíme informace jako skóre, zprávu "konec hry" a tlačítko pro restart hry.

Vytvořte novou scénu, klikněte na tlačítko "Jiný uzel" a přidejte uzel CanvasLayer ("vrstva plátna") s názvem HUD. "HUD" je zkratka pro "heads-up display", informační displej, který se zobrazuje jako průhledná vrstva překrývající hru.

Uzel CanvasLayer umožňuje kreslit naše prvky uživatelského rozhraní do vrstvy nad zbytkem hry, takže informace, které zobrazuje, nejsou zakryty žádnými herními prvky, jako je hráč nebo nepřátelé.

HUD musí zobrazit následující informace:

Skóre, měněné uzlem ScoreTimer.
Zprávu, například "Konec hry" nebo "Připravte se!"
Tlačítko "Start" pro zahájení hry.

Základní uzel pro prvky uživatelského rozhraní je Control ("ovládací prvek"). K vytvoření našeho uživatelského rozhraní použijeme dva typy Control nodes: Label ("popisek") a Button ("tlačítko").

Jako potomky uzlu HUD vytvořte následující uzly:

Label s názvem ScoreLabel.
Label pojmenovaný Message ("zpráva").
Button s názvem StartButton.
Timer s názvem MessageTimer.

Klikněte na ScoreLabel a zadejte číslo do pole Text v Inspektoru. Výchozí písmo pro uzly Control je malé a neškáluje dobře na vyšší velikosti. V herních zdrojích je obsažen soubor s názvem "Xolonium-Regular.ttf". Toto písmo použijeme následujícím způsobem:

V části "Přepsání motivu > Fonty" vyberte "Načíst" a vyberte soubor "Xolonium-Regular.ttf".

../../_images/custom_font_load_font.webp

Velikost písma je stále příliš malá, zvyšte ji na 64 v části "Přepisy motivu > Velikosti fontů". Toto udělejte jak pro ScoreLabel, tak pro uzly Message a StartButton.

Poznámka

Ukotvení: Uzly Control mají polohu a velikost, ale mají také ukotvení. Ta definují počátek - referenční bod pro hrany uzlu.

Uspořádejte uzly podobně, jak je znázorněno níže. Uzly můžete přetáhnout a umístit ručně, chcete-li však přesnější umístění kontrolu, použijte "Předvolby ukotvení".

Popisek skóre (ScoreLabel)

Přidejte text 0.
Nastavte "Horizontální zarovnání" a "Vertikální zarovnání" na Uprostřed.
Vyberte "Předvolbu ukotvení" Uprostřed nahoře.

Zpráva (Message)

Přidejte text Uhni Hnusákům!.
Nastavte "Horizontální zarovnání" a "Vertikální zarovnání" na Uprostřed.
Nastavte "Režim automatického zalamování" na Slovo, jinak popisek zůstane na jednom řádku.
Pod "Control - Rozvržení/Transformace" nastavte "Velikost X" na 480 pro využití celé šířky obrazovky.
Vyberte "Předvolbu ukotvení" Uprostřed.

Tlačítko start (StartButton)

Přidejte text Spustit.
Pod "Control - Rozvržení/Transformace" nastavte "Velikost X" na 200 a "Velikost Y" na 100, ať trochu odsadíme text od okraje.
Vyberte "Předvolbu ukotvení" Uprostřed dole.
Pod "Control - Rozvržení/Transformace" nastavte "Pozice Y" na 580.

V MessageTimer nastavte Čas čekání na 2 a nastavte vlastnost Jednorázový na "Zapnuto".

Nyní připojte tento skript k 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();
}

Chceme zobrazit dočasnou zprávu, například "Připravte se". K tomu přidáme následující kód

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

Musíme také zpracovat, co se stane, když hráč prohraje. Níže uvedený kód na 2 vteřiny zobrazí "Konec hry", poté se vrátí na úvodní obrazovku a po krátké pauze zobrazí tlačítko "Spustit".

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

Poznámka

Když potřebujete hru na krátkou dobu pozastavit, alternativou k použití uzlu Timer je použití funkce create_timer() ("vytvořit časovač") třídy SceneTree ("strom scén"). To může být velmi užitečné pro přidání zpoždění, jako například v kódu výše, kdy chceme počkat, než se zobrazí tlačítko "Spustit".

K HUD přidejte následující kód pro aktualizaci skóre

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

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

Připojte signál pressed() ("stisknuto") tlačítka StartButton a signál timeout() časovače MessageTimer k uzlu HUD a k novým funkcím přidejte následující kód:

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

Propojení HUD a Main

Nyní, když jsme dokončili scénu HUD, se vraťte do hlavní scény Main. Instancujte scénu HUD v Main, tak jako jste to udělali se scénou Player. Strom scén by měl vypadat takto, takže se ujistěte, že vám nic neuniklo:

Nyní musíme propojit funkce HUD se skriptem Main. K tomu musíme ke scéně Main přidat několik věcí:

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.

V new_game() aktualizujte zobrazené skóre a zobrazte zprávu "Připravte se":

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

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

V game_over() musíme zavolat odpovídající HUD funkci:

$HUD.show_game_over()

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

Nakonec přidejte do _on_score_timer_timeout() tento kód, který aktualizuje displej s tím, jak se skóre zvyšuje:

$HUD.update_score(score)

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

Varování

Pokud jste tak ještě neučinili, nezapomeňte odstranit volání new_game() z _ready(), jinak se vaše hra spustí automaticky.

Nyní můžeme hrát! Klikněte na tlačítko "Spustit projekt".

Odstranění starých hnusáků

Když budete hrát až do "Konec hry" a ihned poté zahájíte novou hru, můžou se na obrazovce stále zobrazovat nepřátelé z předchozí hry. Bylo by lepší, kdyby na začátku nové hry všichni zmizeli. Potřebujeme jen způsob, jak říct všem nepřátelům, aby zmizeli. Můžeme to udělat pomocí funkce "skupin".

In the Mob scene, select the root node and click the Groups tab next to the Signals tab and the "+" button to open the "Create New Group" dialog.

Skupinu pojmenujte mobs a kliknutím na "ok" vytvořte novou skupinu scén.

Nyní budou všichni mobové ve skupině "mobs".

Poté můžeme do funkce new_game() v Main přidat následující řádek:

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

Funkce call_group() ("zavolat skupinu") zavolá pojmenovanou funkci na každém uzlu ve skupině - v tomto případě říkáme každému nepříteli, aby se sám odstranil.

V tuto chvíli je hra z většiny hotová. V dalším a posledním díle ji trochu vypilujeme přidáním pozadí, hudební smyčky a klávesových zkratek.