CreateJS

A canvas kezelésére egy csomó könyvtár van, például tetszett a fabric.js meg a kinetic.js, de most egy másikat mutatnék, mert nekem ez működött legjobban mobil eszközön is.



Ez persze függőséget jelent, a frameworköt be kell tölteni a progid előtt, és ha probléma van vele, akkor kutathatod az internetet, hogy mitől van. Vagyis mostantól fogva nem csak tőled függ, hogy jól működik-e a progid. Ráadásul meg kell tanulni a keretrendszert, hogy jól használd: böngészheted a példaprogramokat, tutorialokat, kézikönyveket a keretrendszerrel kapcsolatban is. Cserébe viszont egy csomó funkciót készen kapsz és a framework igyekszik elrejteni a platformok miatti különbségeket is (vagyis ezekkel sem kell foglalkoznod jobb esetben) -- remélhetőleg összességében nyersz a dologgal.

A jsfiddle már előre fel van készítve a legismertebb keretrendszerek használatára, a bal felső sarokban ki kell választanod a CreateJS-t (ez több dolgot is tartalmaz, animáció, hang stb, tisztán a canvas kezelő részét EaselJS-nek hívják)

Mielőtt belekezdenénk, egy kis kitérő az animációra.
Előzőleg már megtárgyaltuk a setTimeout működését, ami bizonyos idő eltelte után hajtja végre a kívánt műveletet. Azonban a megadott idő egy minimumidőt jelent: ha a rendszer épp elfoglalt, akkor a végrehajtás késedelmes lesz. Animáció esetén ez nem csak akadozáshoz vezet, hanem lassuláshoz is.
A modern böngészőkben ezért adtak lehetőséget jobb animációs időzítésre, a requestAnimationFrame direkt erre szolgál. De ezt nem nézzük meg konkrétan, mert a CreateJS elfedi nekünk ezt a funkciót -- de jó tudni, hogy a keretrendszerben az animáció már ezzel van megoldva (ha lehetséges).

A mozgatáshoz az eddigi példákban a setTimeout-ot használtuk, a mozgato függvény 30 ezredmásodpercenként hívódott meg (futott le). A sebesseg változó 3 volt, így 30 ezredmásodpercenként 3 pixelt haladt előre a labdánk. Ez 100px/mp-es sebesség.

A CreateJS az animációkat egy ticker-be tereli: minden "tick" alkalmával fog frissülni az egész oldal. A vásznon lévő objektumok egyszerre mozdulnak meg, az összes objektum pozícióját a következő tick időpillanatára kell kikalkulálni. A tick függvény azt is megkapja, hogy az előző hívása óta hány ezredmásodperc telt el. Ezt kell felhasználnunk a mozgó objektumaink aktuális helyzetének kiszámolására. Ha eszerint cselekszünk, akkor (szinte) mindegy, hogy a tickek üteme lassul-e (pl rendszer leterheltsége miatt, vagy mert eleve túl lassú a gép), a tárgyunk ugyanolyan sebességgel fog menni, esetleg "ugrálósabb" lesz az animáció. A tick-rendszernek meg lehet adni egy cél FPS-t, amit szeretnénk frissítési rátának. Ha jól írtuk meg a mozgáskalkulációnkat, akkor az FPS-től csak a mozgások finomsága fog változni.

A pattogós példát átírtam CreateJS-re, ticker alapúra, itt van:
http://jsfiddle.net/pL3us/

A jsfiddle automatikusan behívja a CreateJS keretrendszert, ez nem látszik a kódban (de persze ezt pótolni kell önálló webalkalmazás esetén).

A stage = new createjs.Stage("canvas") segítségével adjuk meg a keretrendszernek, hogy melyik canvas-on dolgozzon. A stage objektum segítségével végezhetünk beállításokat ezentúl a vásznon.

A labda = new createjs.Shape(); értékadással a labda egy objektum lesz. Akárhány objektumot létrehozhatunk, ezeket a CreateJS kezelni fogja, és a stage.update() parancs kiadásakor az összes objektumot a megfelelő formában és helyen kirakja, sőt interakciót is lehet végezni ezekkel (reagálás felhasználói eseményekre (klikk, stb), ütközésvizsgálat, stb) ezekre egy másik posztban térek ki.

A labda koordinátáinak kalkulálását és a vászon frissítését most a mozgato helyett egy tick nevű függvény végzi el. Ez a név is tetszőleges, maradhatott volna mozgato is a neve, ehhez ezt a sort kellett volna még módosítani: createjs.Ticker.addEventListener("tick", tick). De mivel a jövőben a tick szerepe meg fog változni egy kicsit, ezért most nevet váltottam (egyébként is így szokás a keretrendszerben, tick-nek nevezni).
További infókat az animációról és a tickerről itt olvashatsz:
http://www.createjs.com/tutorials/Animation%20and%20Ticker/

Tanulmányozd az x koordináta kalkulálását. Összességében nem látszik egyszerűbbnek a programunk mint volt, sok dolog ráadásul a háttérben a keretrendszer bugyraiban dől el, nem tudjuk milyen bonyolult a rendszer a háttérben... Lehet, hogy egy csomó felesleges dolog is lefut. Bizony, mérlegelni kell, hogy a keretrendszer használata hasznos-e a projektünkhöz, és egyelőre nem úgy tűnik. (De majd az lesz :-) )

A CreateJS haszna akkor bukik elő, ha ki is használjuk a képességeit. Van benne sok lehetőség, például az animációk egyszerűsítése. Mindjárt érződik a keretrendszer haszna, ha a programunk animációját egy definíciós sorban meg tudjuk adni, igaz? Ugyanis van rá lehetőség az animációkat kezelő Tween objektum segítségével. Nézd meg ezt a példakódot:
http://jsfiddle.net/DaAKf/1/


Egy objektumra akármennyi Tween-t aggathatunk, ezeknek az egymásutániságát akár egy sorban a .to metódusok láncával is megadhatjuk. Azt kell megadni, hogy az objektum mely paramétere milyen értéket vegyen fel mennyi idő alatt. Ez a paraméter nem csak x vagy y koordináta lehet, de változhat a méret (width, height), az átlátszóság, forgás, stb, bármi, ami számokból áll. Az animáció lehet ismételt, vagy véget is érhet, ekkor megadható, hogy automatikusan lefusson egy függvény (ilyen nincs a példában, majd később csinálunk ilyet is).
Ráadásul a mozgás nem csak lineáris lehet, hanem tetszőleges ütemű, lefolyású is (ezt easing-ként emlegetik, itt tanulmányozhatod)
Ezzel a módszerrel nagyon egyszerűvé válik az animáció.

Feladatok:
1. Játssz el az FPS-sel!
2. Írd át a labdát kerek alakúra!
Segítség itt.