Sadržaj
Web dizajner Filidor Wiese zapeo nam je u oči svojom osobnom stranicom. Udružio se s Arthurom van ’t Hoogom kako bi razvio virtualni svemir s pikseliranim retro igračkim likom na ekranu koji predstavlja sebe.
Jednom kad su spriteovi dizajnirani, Wiese je započeo složeni postupak animiranja s JavaScriptom, a ne s konvencionalnim tehnikama animacije poput GIF-ova.
"Problem je u tome što ih je vrlo teško kontrolirati iz perspektive JavaScript-a", objašnjava Wiese. "Trebao mi je put do točno određenog vremena, petlje, lanca i skripte nekoliko animacija zaredom. Također bi se sprite trebao moći premještati kadar po kadar. Ova posljednja značajka omogućuje naprednije animiranje; na primjer, lik koji hoda."
"Inspiriran Spritelyjem, počeo sam raditi na prilagođenom dodatku", dodaje. "U osnovi ćete pronaći logiku repozicioniranja pozadinske slike koja se učinkovito odgađa implementacijom API-ja window.requestAnimationFrame. Ovaj JavaScript API traži odbrojavanje temeljeno na intervalima, što je manje učinkovito."
Ovo je djelo omogućilo Wieseu da postigne složenu interakciju između animacija. "Jedna od poteškoća koja se pojavila bila je potreba za interakcijom između različitih spriteova. Na primjer, toranj bi trebao emitirati signale samo ako lik tipka na svom računalu. Da bih to uspio, koristio sam prilagođene JavaScript događaje kako bih pustio jedan sprite okidač prekidač u drugom. "
Ova je izložba izvorno objavljena u časopisu .net, broj 235.
Sad pročitajte ovo!
- Najbolji primjeri JavaScript-a
- Izvrsni primjeri HTML5-a
- Obuka za web dizajn: najbolji internetski alati
