5.2. tēma: Vizuālo resursu un saskarnes (UI) pabeigšana

Tavs šīs stundas izaicinājums: Izveidot funkcionālu un estētisku spēles lietotāja saskarni (UI), iekļaujot sākuma izvēlni un spēles stāvokļa informācijas paneli.

2.4.11. Veido tīmekļa vietnes noformējumu; 1.1.2. Analizē lietojamību un vizuālo komunikāciju.

Teorija: UI vs UX spēlēs

Spēļu izstrādē mēs runājam par diviem svarīgiem jēdzieniem:

UI (User Interface): Pogas, teksti, ikonas un saraksti – viss, ko spēlētājs redz un kam pieskaras.
UX (User Experience): Sajūta, ko rada spēle. Vai pogas ir pietiekami lielas? Vai punkti ir saskatāmi uz fona? Vai ir skaidrs, kā sākt spēli?

Laba prakse: Izmanto display: none; un display: block; savā CSS, lai pārslēgtos starp "Sākuma ekrānu" un pašu "Spēles laukumu" bez jaunas lapas pārlādēšanas.

1. uzdevums: Sākuma ekrāna (Menu) izveide

Izveidot vizuālu bloku, kas redzams pirms spēles sākuma un satur spēles nosaukumu un instrukcijas.

Izpildes soļi:

HTML failā izveido <div id="starta-ekrans">.
Pievieno tajā spēles virsrakstu, īsu aprakstu ("Vāc monētas, bēdz no bumbām!") un pogu "SĀKT".
CSS failā noformē šo ekrānu tā, lai tas nosegtu spēles laukumu un būtu vizuāli pievilcīgs (izmanto z-index, lai tas būtu virspusē).

2. uzdevums: HUD (Heads-Up Display) jeb statusa josla

Izveidot informācijas paneli, kas spēles laikā rāda svarīgākos datus skaidrā un nepārprotamā veidā.

Izpildes soļi:

Izveido <div id="hud">, kurā atradīsies punkti, dzīvības un laiks.
Novieto to spēles laukuma augšdaļā vai stūrī, izmantojot position: absolute;.
Pārliecinies, ka krāsu kontrasts ir pietiekams (piemēram, balts teksts ar melnu ēnu text-shadow uz raiba fona).

3. uzdevums: Galīgo grafisko resursu integrācija

Aizstāt pagaidu krāsainos kvadrātus ar īstiem attēliem vai ikonām.

Izpildes soļi:

Pārliecinies, ka visi attēli ir mapē assets/images/.
Nomaini varoņa un šķēršļu CSS background-color pret background-image: url(...) vai nomaini HTML div elementus pret img tagiem.
Pārbaudi, vai spēles laukums izskatās saskaņots (vai fons un varonis "sader" kopā). Veic Commit un Push.

Biežākās kļūdas (un kā tās labot):

Pārāk raibs fons: Ja spēlētājs neredz savu varoni fona dēļ, spēle kļūst nespēlējama. Risinājums: Padari fonu blāvāku vai pievieno elementiem apmales.
Pogu "klikšķējamība": Pārliecinies, ka pogas reaģē uz peles uzvirzīšanu (izmantojot :hover efektu). Tas dod spēlētājam atgriezenisko saiti.
Failu ceļi: Atceries, ja tavs CSS fails ir mapē css/, bet attēls assets/images/, ceļš būs ../assets/images/bilde.png.

Koda piemērs: Ekrānu pārslēgšana

/* CSS ekrānu kontrolei */
#starta-ekrans {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    color: white;
    display: flex; /* Centrē saturu */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Vienmēr pa virsu */
}

/* Klase, ko pievienosim ar JS, lai paslēptu ekrānu */
.hidden {
    display: none !important;
}

// JavaScript funkcija spēles sākšanai
function saktSpeli() {
    // Paslēpjam sākuma ekrānu
    document.getElementById("starta-ekrans").classList.add("hidden");
    // Šeit sākas spēles loģika un taimeri...
}