6.1 UI elementi un Control nodes

Stundas uzdevums: Izveidot lietotāja saskarni ar Godot Control nodes - Button, Label, Container.

SR 2.4.7. Lietotāja saskarne (UI) SR 2.4.15. Modulāras programmas

80 min plāns: Teorija un paraugs (~10 min) · 1. uzdevums (~20 min) - uzbūvē sākuma izvēlni · 2. uzdevums (~25 min) - savieno pogas ar kodu · 3. uzdevums (~20 min) - pievieno enkurus un pārbaudi izmērus · Iesniegšana (~5 min).

Pirms sāc: atver savu projektu. UI Godot lieto Control mezglus, nevis Node2D - tiem ir enkuri un konteineri, kas paši kārto elementus.

Teorija: Control nodes hierarhija

Godot UI sistēma izmanto Control nodes, kas atšķiras no Node2D - tām ir layout, anchors, theme.

Node	Lietojums
`Label`	Teksts (statisks)
`Button`	Klikšķināmā poga
`LineEdit`	Single-line input
`TextEdit`	Multi-line input
`VBoxContainer`	Vertikāls izvietojums
`HBoxContainer`	Horizontāls izvietojums
`GridContainer`	Grid layout
`PanelContainer`	Background ar borderiem

// Button signal
Button button = GetNode<Button>("StartButton");
button.Pressed += OnStartPressed;

private void OnStartPressed()
{
    GetTree().ChangeSceneToFile("res://game.tscn");
}

Kā šo izmantot projektā

Atceries: ar redzamu efektu editorā nepietiek. Paskaidro, kura C# klase glabā stāvokli, kura metode to maina un kā Godot node struktūra izmanto šo kodu.

Pārbaudi: UI signāli, audio darbības, debug izvade un publicēšanas sagatave ir sasaistīta ar C# spēles stāvokli.

public class PolishCheckpoint
{
    public string Lesson = "6.1 UI elementi un Control nodes";
    public bool UsesCSharp = true;
    public bool ConnectsUiSignals = true;
    public bool RoutesAudioEvents = true;
    public bool VerifiesExportBuild = true;
}

Praktiskie uzdevumi

1. uzdevums -

Uzbūvē sākuma izvēlni

Beigās tavai spēlei būs sākuma ekrāns ar trim pogām.

Izveido jaunu scēnu ar Control sakni un nosaukumu Menu.
Pievieno tai bērnu VBoxContainer.
Pievieno konteinerā Label ar spēles nosaukumu.
Pievieno trīs Button mezglus: Sākt, Iestatījumi, Iziet.
Ievēro, ka konteiners pats sakārto pogas vienu zem otras.
Pievieno konteinerā atstarpi ar Theme Overrides -> Separation.
Palaid scēnu un pārbaudi, ka visas pogas ir redzamas.

Gatavs, kad: ekrānā ir virsraksts un trīs pogas vienu zem otras ar vienādām atstarpēm.

2. uzdevums -

Savieno pogas ar kodu

Beigās pogas tiešām kaut ko darīs.

Izveido C# klasi MainMenu, kas manto no Control.
Pievieno metodi private void OnStartPressed().
Paņem pogu ar Button startButton = GetNode<Button>("VBox/StartButton");.
Savieno _Ready metodē pogas signālu ar startButton.Pressed += OnStartPressed;.
Ielādē apstrādātājā spēles scēnu ar GetTree().ChangeSceneToFile("res://game.tscn");.
Savieno arī Iziet pogu ar GetTree().Quit();.
Būvē un pārbaudi abas pogas.

Gatavs, kad: Sākt poga atver spēles scēnu, un Iziet poga aizver spēli.

3. uzdevums -

Pievieno enkurus un pārbaudi izmērus

Beigās izvēlne izskatīsies pareizi jebkurā loga izmērā.

Izvēlies VBoxContainer un atver Layout -> Anchors Preset.
Izvēlies Center, lai konteiners paliktu ekrāna vidū.
Palaid spēli un mainiet loga izmēru ar peli.
Pieraksti, vai izvēlne palika centrā.
Nomaini enkuru uz Top Left un atkārto testu.
Pieraksti, kas mainījās.
Ieliec Center atpakaļ un saglabā scēnu.

Gatavs, kad: mainot loga izmēru, izvēlne paliek centrā, bet ar Top Left enkuru tā aizbēg uz stūri.

Papildu uzdevums - Pievieno iestatījumu logu

Ja pamatdarbs ir gatavs, uztaisi otro ekrānu.

Izveido PanelContainer ar nosaukumu Settings.
Pievieno tam skaļuma slīdni HSlider.
Paslēp to sākumā ar settings.Visible = false;.
Parādi to, nospiežot Iestatījumu pogu.
Pievieno Atpakaļ pogu, kas to atkal paslēpj.

Gatavs, kad: Iestatījumu logs parādās un pazūd ar pogām, neizejot no izvēlnes.

Ko sagatavo

Stundas mērķis: Tavai spēlei ir sākuma izvēlne ar trim pogām Control mezglos, pogas ir savienotas ar C# kodu caur signāliem, un izvēlne paliek centrā, mainot loga izmēru.

GitHub krātuvē jābūt:

Fails MainMenu.cs ar pogu signālu savienojumiem.
README.md ievietota video saite vai divi ekrānuzņēmumi krātuvē: izvēlne un tas, kas notiek, nospiežot Sākt.
Ekrānuzņēmums ar izvēlni pēc loga izmēra maiņas.
README.md: ar ko Control mezgli atšķiras no Node2D.

Kā iesniedz: Veic commit un push. Skolotāja norādītajā vietā ievieto tikai GitHub krātuves saiti; visiem prasītajiem failiem, README.md pierakstiem un pierādījumiem jābūt pašā krātuvē.

Biežākās kļūdas

Button signal nestrādā: Pārbaudi, vai Pressed += izsaukums notiek _Ready metodē un mezgla ceļš ir pareizs.
UI elementi pārklājas: Lieto Container nodes layout management.
Anchors confusing: Layout → Set Anchors and Offsets to Preset → Top Wide vai Center.

Godot ekrānuzņēmumi

Sākuma menu ekrāns: tumšs fons, spēles logo augšā, 4 baltas pogas (Sākt, Iestatījumi, Augstākie rezultāti, Iziet) centrā.

Iestatījumu ekrāns: 3 sadaļas - Audio (Volume slider), Display (Fullscreen checkbox), Gameplay (Difficulty dropdown).

Spēles HUD: HP bāris kreisajā augšā, Score 1240 centrā, Mini-map labajā augšā, ability cooldown indikatori apakšā.

Koda piemērs (paplašināts)

using Godot;

public partial class Menu : Control
{
    public override void _Ready()
    {
        Button startBtn = GetNode<Button>("VBox/StartButton");
        Button settingsBtn = GetNode<Button>("VBox/SettingsButton");
        Button quitBtn = GetNode<Button>("VBox/QuitButton");

        startBtn.Pressed += OnStart;
        settingsBtn.Pressed += OnSettings;
        quitBtn.Pressed += OnQuit;
    }

    private void OnStart()
    {
        GetTree().ChangeSceneToFile("res://game.tscn");
    }

    private void OnSettings()
    {
        GetTree().ChangeSceneToFile("res://settings.tscn");
    }

    private void OnQuit()
    {
        GetTree().Quit();
    }
}

Sākuma menu ar 4 stilizētām pogām, hover efekti, navigācija starp ekrāniem.