›_ ebskola.lv
← 2.2 2.4 →

2.3 Grafisko resursu sagatavošana un optimizācija

Stundas uzdevums: 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.

70 min darba sadalījums: 1. uzdevums (~20 min) - atjauno teorijas piemēru vai minimālo prototipu; 2. uzdevums (~25 min) - pielieto to galvenajā uzdevumā; 3. uzdevums (~25 min) - pārbaudi rezultātu, izlabo kļūdas un tikai beigās pieraksti vienu secinājumu. Papildus/4. līmeņa uzdevums ir paredzēts tikai tad, ja pamatdarbs ir pabeigts.

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

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. 

# Attēla optimizācija ar bezmaksas rīku (vai squoosh.app)
# Pirms: foto.jpg = 4.2 MB
# Pēc kompresijas: foto.jpg = 320 KB (10x mazāks)

# HTML pievienošana ar alternatīvu tekstu (a11y)
<img src="varonis.png" alt="Spēles galvenais varonis Pikselis" width="64">

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 2.3 Grafisko resursu sagatavošana un optimizācija; detalizētu izpratni veidosi nākamajos uzdevumos.

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

<img src="atteli/varonis.png" alt="Spēles galvenais varonis" width="64">
  1. Atver darba failu vai rīku. HTML fragmentu ievieto index.html faila <body> daļā.
  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 projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

  1. Atver File Explorer un izveido mapi atteli projekta saknes mapē.
  2. Ieliec tajā PNG vai JPG attēlu - pārliecinies, ka faila izmērs ir mazāks par 200 KB.
  3. Atver index.html un pievieno <img src="atteli/varonis.png" alt="Spēles varonis" width="64">.
  4. Saglabā un atver pārlūkā - pārbaudi, vai attēls ir redzams pareizā vietā.
  5. Atver DevTools → "Network" cilne → pārlādē lapu - pārbaudi, vai attēla ielāde notiek bez kļūdas (status 200).
  6. Pielāgo width atribūtu tā, lai attēls neizplūst ārpus satura bloka.
  7. Salabo, ja attēls neparādās - pārbaudi faila nosaukuma burtu lielumu un ceļa pareizību.
  8. Veic git commit -m "Add player image to game".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

  1. Atver index.html pārlūkā un pārbaudi, ka attēls ir redzams pareizā vietā un izmērā.
  2. Spied F12 → "Elements" → atlasi <img> tagu - pārbaudi, ka atribūts alt ir aizpildīts.
  3. Nomaini width atribūtu uz citu vērtību - pārbaudi, vai attēls maina izmēru.
  4. Ja attēla fails ir lielāks par 500 KB, optimizē to squoosh.app - pārbaudi, vai jaunais fails izskatās pietiekami labi.
  5. Salabo alt tekstu, ja tas apraksta attēlu neprecīzi.
  6. Pārbaudi, vai attēls parādās arī šaurākā ekrānā (sašaurina pārlūka logu).
  7. Pieraksti vienu secinājumu: kāpēc alt atribūts ir svarīgs pat vizuālā spēlē.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

  1. Pievieno vēl 2 attēlus (piemēram, ienaidnieks un fons) mapē atteli.
  2. Ievieto tos index.html ar <img> tagiem un pareiziem alt aprakstiem.
  3. Pievieno CSS klasi .speles-attels { image-rendering: pixelated; } un pielieto to visiem spēles attēliem.
  4. Atver pārlūkā un pārbaudi, vai attēli izskatās pareizi savās pozīcijās.
  5. Pārbaudi, vai neviens attēls nav lielāks par 300 KB - ja ir, optimizē squoosh.app.
  6. Veic git commit -m "Add game assets with alt text".
  7. Parādi lapu klasesbiedram - vai viņš saprot, ko attēlo katrs attēls, tikai pēc alt teksta?

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

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 ➡