2.3. tēma: Grafisko resursu sagatavošana un optimizācija

Tavs šīs stundas izaicinājums: Izvēlēties un sagatavot spēles vizuālos resursus, optimizējot to izmērus un formātus ātrai ielādei tīmeklī.

2.4.6. Izvēlas lietošanas mērķim atbilstošu attēla izmēru un formātu; 2.4.7. Izvēlas piemērotākās lietotnes uzdevuma risināšanai.

Teorija: Attēlu formāti un veiktspēja

Tīmekļa izstrādē mēs izmantojam dažādus attēlu formātus atkarībā no vajadzības:

PNG: Atbalsta caurspīdīgumu (transparency). Ideāls spēles varoņiem un pogām.
JPG/JPEG: Fotogrāfijām un foniem. Nav caurspīdīguma, bet mazāks faila izmērs.
SVG: Vektorgrafika. Nezaudē kvalitāti palielinot. Lielisks ikonām.
WebP: Moderns formāts, kas apvieno labāko no PNG un JPG ar vēl mazāku izmēru.

Optimizācija: Spēlei nav vajadzīgs 4K attēls, ja tas ekrānā aizņem tikai 50 pikseļus. Lieki "smagi" faili padara spēli lēnu un raustīgu.

1. uzdevums: Resursu atlase un autortiesības

Atrast spēlei nepieciešamos attēlus, izmantojot brīvpieejas resursus.

Izpildes soļi:

Izmanto tiešsaistes bibliotēkas (piem., Kenney.nl, OpenGameArt vai Flaticon).
Atrodi vismaz 3 resursus: fonu, galveno varoni un vienu šķērsli vai bonusu.
Pārliecinies, ka resursi ir saderīgi (piem., visi ir "pixel art" vai visi ir "flat design" stilā).

2. uzdevums: Attēlu rediģēšana un mērogošana

Sagatavot attēlus pareizajā izmērā, izmantojot tiešsaistes redaktorus.

Izpildes soļi:

Atver attēlu redaktoru (piem., Pixlr vai Photopea).
Apgriez liekās malas un maini attēla izmēru (Resize) uz tādu, kādu plāno izmantot spēlē (piem., varonis 50x50px).
Saglabā failus savā projekta mapē, izmantojot skaidrus nosaukumus bez garumzīmēm (piem., player.png, background.jpg).

3. uzdevums: Grafikas integrācija spēles pieteikumā

Ievietot sagatavotos resursus HTML dokumentā un aprakstīt to lomu.

Izpildes soļi:

Izveido savā projekta mapē apakšmapi assets vai images un pārvieto tur visus attēlus.
HTML failā pievieno sadaļu "Spēles grafika" un parādi tur sagatavotos attēlus, izmantojot <img> tagu.
Veic Commit un Push, GitHub ziņojumā norādot: "Pievienoti optimizēti spēles resursi".

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

Milzīgi faili: Ja tavs attēls ir 5MB, lapa lādēsies ilgi. Mērķē uz failiem zem 500KB (varoņiem pat zem 50KB).
Balts fons ap varoni: Ja varonim ir balts kvadrāts apkārt, tas nav PNG ar caurspīdīgumu. Izmanto "Remove Background" rīkus.
Nepareizi failu ceļi: Ja attēls ir mapē, neaizmirsti rakstīt src="images/player.png".

Koda piemērs (Attēlu organizēšana)

<!-- Pareiza attēla ievietošana no mapes -->
<div class="asset-preview">
    <h3>Galvenais varonis</h3>
    <img src="assets/player.png" alt="Zils kvadrāta varonis" width="50">
</div>

<style>
    .asset-preview {
        display: inline-block;
        text-align: center;
        margin: 10px;
    }
</style>

[Šeit parādītos tavs 50px PNG attēls]

⬅ Iepriekšējā stunda Nākamā stunda ➡