›_ ebskola.lv
← Tēma 6.2 →

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

Pirms sāc: izmanto iepriekš apgūto un šīs lapas teorijas/koda piemērus. Ja vajadzīga jauna komanda vai rīks, vispirms atrodi tās paraugu teorijas sadaļā.

Teorija: Control nodes hierarhija

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

NodeLietojums
LabelTeksts (statisks)
ButtonKlikšķināmā poga
LineEditSingle-line input
TextEditMulti-line input
VBoxContainerVertikāls izvietojums
HBoxContainerHorizontāls izvietojums
GridContainerGrid layout
PanelContainerBackground ar borderiem
// Button signal
Button* btn = get_node<Button>("StartButton");
btn->connect("pressed", Callable(this, "on_start_pressed"));

void Menu::on_start_pressed() {
    get_tree()->change_scene_to_file("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.

#include <godot_cpp/variant/string.hpp>

using namespace godot;

struct PolishCheckpoint {
    String lesson = "6.1 UI elementi un Control nodes";
    bool uses_cpp = true;
    bool connects_ui_signals = true;
    bool routes_audio_events = true;
    bool verifies_export_build = true;
};

Praktiskie uzdevumi

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 6.1 UI elementi un Control nodes; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

#include <godot_cpp/variant/string.hpp>

using namespace godot;

struct PolishCheckpoint {
    String lesson = "6.1 UI elementi un Control nodes";
    bool uses_cpp = true;
    bool connects_ui_signals = true;
    bool routes_audio_events = true;
    bool verifies_export_build = true;
};
  1. Atver darba failu vai rīku. C++ fragmentu ievieto atbilstošajā .cpp vai .hpp failā pie šīs stundas klases.
  2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
  3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
  4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
  5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
  6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
  7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu spēles projektā

Pievieno šīs stundas paņēmienu kā nelielu, strādājošu spēles mehānikas daļu.

  1. Izvēlies vienu projekta vietu: spēlētāju, pretinieku, kameru, UI, datu glabāšanu, sadursmi vai līmeņa ģenerēšanu.
  2. Nosauc klases, metodes un mainīgos pēc to lomas, piemēram, PlayerState, velocity, score vai update_ui().
  3. Uzraksti metodi, kas nolasa stāvokli, veic vienu skaidru darbību un atgriež vai parāda rezultātu.
  4. Izsauc šo metodi no piemērotas vietas: _ready(), _process(), _physics_process(), signāla apstrādātāja vai projekta palīgklases.
  5. Pievieno vienu īsu komentāru pie sarežģītākās loģikas vietas.
  6. Pārkompilē projektu un pārbaudi, ka editorā nav kļūdu.
  7. Salabo pirmo atrasto kļūdu pirms pievieno nākamo mehānikas daļu.
  8. Veic Git commit ar īsu tehnisku ziņu par pievienoto C++ funkcionalitāti.

3. uzdevums - Testē mehāniku un izdari secinājumu

Pārbaudi, vai C++ algoritms darbojas paredzami spēles vidē.

  1. Izveido trīs testa scenārijus: parastu darbību, robežgadījumu un kļūdainu vai neērtu spēlētāja darbību.
  2. Palaid parasto scenāriju un pārbaudi rezultātu spēles logā vai Godot konsolē.
  3. Palaid robežgadījumu ar mazāko, lielāko, tukšo vai nulles vērtību, ko mehānika pieļauj.
  4. Palaid kļūdaino scenāriju un pārbaudi, vai projekts neavarē.
  5. Izlabo vienu konkrētu problēmu C++ kodā, node sasaistē vai datu inicializācijā.
  6. Pārkompilē un pārbaudi labojumu vēlreiz ar visiem trim scenārijiem.
  7. Beigās pieraksti vienu secinājumu: kura metode, klase vai algoritma solis vislabāk palīdzēja saprast tēmu 6.1 UI elementi un Control nodes.

Papildu uzdevums - Pievieno mazu mehāniku

Ja pamatdarbs ir pabeigts, paplašini spēli ar vienu nelielu C++ uzlabojumu.

  1. Izvēlies vienu mazu papildinājumu, kas izmanto to pašu šīs stundas paņēmienu.
  2. Pievieno vienu jaunu atribūtu, metodi, signāla apstrādi, datu elementu vai UI atjauninājumu.
  3. Savieno papildinājumu ar esošo scēnu vai klasi, nevis atstāj to atsevišķā demonstrācijā.
  4. Pārkompilē un pārliecinies, ka pamatmehānika joprojām darbojas.
  5. Saglabā izmaiņas ar Git commit tikai pēc veiksmīgas pārbaudes.

Biežākās kļūdas

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ā.
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).
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šā.
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)

#include <godot_cpp/classes/button.hpp>
#include <godot_cpp/classes/scene_tree.hpp>

void Menu::_ready() {
    Button* start_btn = get_node<Button>("VBox/StartButton");
    Button* settings_btn = get_node<Button>("VBox/SettingsButton");
    Button* quit_btn = get_node<Button>("VBox/QuitButton");

    start_btn->connect("pressed", Callable(this, "on_start"));
    settings_btn->connect("pressed", Callable(this, "on_settings"));
    quit_btn->connect("pressed", Callable(this, "on_quit"));
}

void Menu::on_start() {
    get_tree()->change_scene_to_file("res://game.tscn");
}

void Menu::on_settings() {
    get_tree()->change_scene_to_file("res://settings.tscn");
}

void Menu::on_quit() {
    get_tree()->quit();
}
Sākuma menu ar 4 stilizētām pogām, hover efekti, navigācija starp ekrāniem.
⬅ Tēmas apkopojums Nākamā stunda ➡