Architektúra
Toto portfólio je postavené na Angular 19 a Phaser.js 3 game frameworku. Angular slúži ako
„škrupina" – stará sa o routing, modály, prekladový systém (i18n) a komunikáciu s DOM. Vo
vnútri beží Phaser scéna v HTML5 Canvas cez WebGL renderer, ktorá sa stará o vykresľovanie
mapy, hráča, NPC a všetkých vizuálnych efektov.
Aplikácia je rozdelená do viacerých vrstiev: herná scéna (game-scene), triedy entít (Player,
NPC, Monster), Angular komponenty pre UI overlay (menu, modály, minimapu), Web Workers pre
ťažké výpočty (pathfinding, dymové efekty) a služby pre komunikáciu medzi Angular a Phaser
svetom.
Zaujímavosťou je, že Angular a Phaser žijú vedľa seba – Angular renderuje HTML vrstvu nad
canvas elementom, takže modály, menu a texty sú bežný DOM, zatiaľ čo hra pod nimi beží v
GPU-akcelerovanom WebGL kontexte. Komunikácia medzi nimi prebieha cez zdieľané Angular služby
a globálne callback funkcie.
Phaser.js
Srdcom tohto portfólia je
Phaser.js 3
– open-source herný framework pre HTML5 hry, ktorý používajú tisíce vývojárov po celom svete.
Phaser dokáže vykresľovať cez WebGL aj Canvas 2D, zvláda fyziku, animácie, sprite sheety, tile
mapy, zvuky a vstup z klávesnice, myši aj dotyku – všetko v prehliadači bez pluginov.
V tomto projekte Phaser riadi celú hernú slučku – 60× za sekundu aktualizuje pozície hráča a
NPC, vyhodnocuje kolízie s mapou, vykreľuje vrstvy tile mapy, spravuje kameru a animuje stovky
sprite-ov. Vďaka WebGL rendereru je to hardvérovo akcelerované a beží plynulo aj na mobiloch.
Phaser bol zvolený pre svoju vyspelú podporu tile máp (čo je základ pixel art sveta), vstavaný
kamerový systém so smooth scrollingom, bohatý animačný engine a aktívnu komunitu. Framework je
modulárny – používam len to, čo potrebujem, a zvyšok (fyzika, particles) riešim vlastnými
implementáciami optimalizovanými pre tento konkrétny projekt.
Chunk systém
Herná mapa má tisíce tile-ov (16×16 pixelov), čo by pri načítaní celej mapy naraz znamenalo
obrovskú spotrebu pamäte. Preto je mapa rozdelená na malé chunky – štvorcové bloky, ktoré sa
dynamicky načítavajú a uvoľňujú podľa pozície hráča.
Chunk Manager sleduje pozíciu kamery a vypočítava, ktoré chunky majú byť viditeľné. Keď hráč
prejde na nové miesto, chunky mimo dosah sa zničia (vrátane ich tile-ových vrstiev a kolíznych
dát) a nové sa vytvoria. V pamäti je tak vždy len okolie hráča, čo dramaticky znižuje spotrebu
RAM.
Po každej úprave mapy v Tiled editore sa spúšťa build skript, ktorý mapu rozreže na jednotlivé
chunk súbory, vyčistí nepoužívané tilesety a optimalizuje dáta pre rýchle načítanie za behu.
NPC systém
NPC postavy majú vlastný viewport culling – keď opustia viditeľnú oblasť kamery, ich sprite sa
kompletne zničí (vrátane kolies, brzdových svetiel a blinkrov pri autách). Keď sa vrátia do
zorného poľa, znovu sa vytvoria s plným stavom. Toto šetrí stovky GPU drawcallov.
Pathfinding beží vo Web Workeri pomocou knižnice EasyStar.js. Trasy NPC sú predpočítané, takže
worker nemusí počítať cestu v reálnom čase a hlavné vlákno nie je blokované. Každé NPC má
definované body trasy a správa sa podľa typu – niektoré chodia, iné jazdia v autách s
funkčnými blinkrami a brzdovými svetlami.
Špeciálne typy NPC zahŕňajú duchov, tanečníkov, monštrá a davy ľudí. Crowd Manager riadi
skupiny NPC, ktoré sa objavujú a miznú podľa oblastí mapy. Autá majú kompletný vizuálny systém
– 4 nezávislé kolesá, brzdové svetlá s glow efektom a blinker systém, ktorý sa aktivuje pred a
po každej zákrute.
Tiled editor
Celá herná mapa je navrhnutá v programe Tiled – open-source editore pre tvorbu tile-based máp.
Mapa sa skladá z viacerých vrstiev: terén, budovy, dekorácie, kolízna vrstva a objektové
vrstvy pre NPC trasy, markery a zóny.
Tiled ukladá mapu vo formáte TMX (XML). Po každej úprave sa spúšťa vlastný build pipeline (npm
run magic), ktorý TMX súbor spracuje – rozreže mapu na chunky, vyextrahuje kolízne dáta,
vyčistí nepoužívané tile-y z tilesetov a vygeneruje optimalizované JSON súbory pre runtime.
Objektové vrstvy v Tiled slúžia na definovanie herných prvkov: spawn pointy NPC, ich trasy
(séria bodov), zóny tmy, pozície content markerov a oblasti pre crowd management. Dizajnér tak
môže vizuálne umiestňovať herné prvky priamo v editore bez potreby meniť kód.
Optimalizácia
Výkon je prioritou na každej úrovni. Chunk loading zabezpečuje, že v pamäti je len okolie
hráča. Viewport culling NPC ničí a vytvára sprite-y podľa viditeľnosti. Pathfinding beží v
oddelenom Web Workeri, takže aj na slabšom mobile je hra plynulá.
Assety sa načítavajú lazy – textúry, zvuky a sprite sheety sa sťahujú až keď sú potrebné, nie
pri štarte aplikácie. Obrázky používajú moderný WebP formát s fallback na PNG. Fonty majú
predgenerované fallback metriky, aby nedochádzalo k layout shiftu pri načítavaní.
Celý web je optimalizovaný pre mobilné zariadenia – dotykové ovládanie cez virtuálny joystick,
responzívna UI vrstva, dynamický viewport (100dvh pre správnu výšku na iOS) a úsporný
rendering. Na desktope Phaser využíva WebGL pre hardvérovú akceleráciu, na slabších
zariadeniach sa automaticky prepne na Canvas 2D renderer.
