Žinios apie naršyklių žaidimus
Šis žurnalas apima techninę žaidimų kūrimo pusę — nuo pirmos kodo eilutės iki veikiančio produkto naršyklėje ar mobiliajame įrenginyje.
Kūrimo etapai
Naršyklių žaidimo sukūrimas — tai struktūruotas procesas, kuris apima kelis aiškius etapus. Kiekvienas etapas turi savo tikslą, įrankius ir tikėtiną rezultatą. Žemiau pateiktas tipinis kelias nuo idėjos iki paskelbimo, su laiko orientyrais kiekvienam etapui.
01
Koncepcija ir mechanika
Apibrėžiamas žaidimo tipas, pagrindinė mechanika ir tikslinė platforma — naršyklė ar mobilioji.
1–2 dienos
02
Prototipas
Sukuriamas minimalus veikiantis prototipas su pagrindine valdymo ir taškų sistema.
3–5 dienos
03
Grafika ir garsas
Integruojami vizualiniai elementai naudojant Canvas API arba WebGL, pridedami garso efektai.
4–7 dienos
04
Testavimas ir publikavimas
Atliekamas kelių įrenginių testavimas, optimizuojamas veikimas ir žaidimas skelbiamas viešai.
2–3 dienos
Pagrindinės temos
Kursas apima tiek techninius, tiek dizaino aspektus — nuo JavaScript žaidimų ciklo supratimo iki vartotojo patirties optimizavimo mažuose ekranuose.
JavaScript ir žaidimų variklis
Naršyklių žaidimai remiasi JavaScript kaip pagriniu kalbos sluoksniu. Šiame skyriuje nagrinėjamas žaidimų ciklo (game loop) principas — kaip requestAnimationFrame valdomas atnaujinimų dažnis, kaip skaičiuojamas delta laikas ir kaip išvengti kadrų kritimo net silpnesniuose įrenginiuose.
- requestAnimationFrame ir ciklo optimizacija
- Kolizijų aptikimas be fizikos bibliotekų
- Valdymo įvesties (touch, keyboard) unifikavimas
Mobilusis pritaikymas
Lietusio pirštų lietimai, skirtingi ekranų tankiai ir ribota procesoriaus galia — tai realios kliūtys, su kuriomis susiduria kūrėjas. Aptariami sprendimai, kaip Canvas skalė pritaikoma prie viewport, kaip veikia pointer events unifikavimas.
- devicePixelRatio ir Canvas skalė
- Touch įvykių valdymas
- Baterijos taupymo strategijos
Veikimo analizė
Chrome DevTools Performance skydelis leidžia tiksliai matyti, kurios funkcijos užima daugiausia laiko per vieną kadrą. Čia aptariama, kaip skaityti flamegraph ir interpretuoti „layout thrashing" požymius.
- Flamegraph skaitymas
- Memory leak identifikavimas
Kiekvieną temą lydi praktinė užduotis — ne teorinė schema, o veikiantis kodo fragmentas, kurį galima iš karto išbandyti naršyklėje.