HTML5 játékfejlesztés Dart + StageXl segitségével
Előző bejegyzésemben Phaser játék motort mutattam be, de most valami egészem más jön, mivel az általam is kedvelt Dart nyelvről is beszélhetek.
Dart bemutatása:
Lehet már említettem néhány helyen, de én imádom a Dart nyelvet és magát a platformot, amit magában hordozz, mivel mind az benne van amire mindig is vágytam. Ha legegyszerűbben akarnám leírni Dartot azt mondanám, hogy a Java és Javascript törvénytelen gyermeke. :D
Akik ismerősek mind a két nyelvben tudhatják, hogy nevükkel ellentétben közel sem hasonlítanak egymásra mégis Dart képes volt mind a két nyelvből "örökölni" azokat a jó dolgokat, amik boldoggá tehetnek bármilyen webes fejlesztőt. Egyébként ez nem is véletlen, mivel olyan fejlesztők alkották meg a Dart nyelvet, akik dolgoztak V8 Javascript motoron vagy a Java VM-en.
Ezek után nem is meglepő, hogy Dart-hoz szintén tartozik egy VM és ami legfontosabb, hogy Javascripthez hasonlóan Dart is egy aszinkron(vagy eseményvezérelt) programozási nyelv. Számomra nagyon fontos az, hogy egy nyelv eseményvezérelt legyen mivel játékokban és weboldalakon is nagyon sok eseményt kell lekezelni és ilyenkor jól jön egy olyan nyelv, amit erre találtak ki.
Még tovább regélhetnék a Dart-ról, de most nem erről akarok beszélni, de azért adok néhány linket.
Dart jobb megismeréséhez ajánlani tudom Dartlangon lévő dokumentációt és ezt a jópofa videót.
Ami az IDE-ket illeti Dart esetében csak kettőt tudok ajánlani: Dart Editor és Webstorm.
Dart Editor ingyenes és egész jól használható, de én mégis inkább Webstormot használok, mivel ezt sokkal kényelmesebbnek érzem.
StageXL:
StageXL nem más, mint egy render engine, aminek ahogy a nevéből is kiderül a fő feladata a megjelenítés.
Tehát ez nem egy játék motor mint például Phaser, hanem inkább olyan mint Pixi.js, amire Phaser is támaszkodik. Viszont StageXL-t inkább Flash API-ra hajazik, van is lehetőség Flashből Dartra konvertálni.
Mit lehet elmondani StageXL-ről:
Dart bemutatása:
Lehet már említettem néhány helyen, de én imádom a Dart nyelvet és magát a platformot, amit magában hordozz, mivel mind az benne van amire mindig is vágytam. Ha legegyszerűbben akarnám leírni Dartot azt mondanám, hogy a Java és Javascript törvénytelen gyermeke. :D
Akik ismerősek mind a két nyelvben tudhatják, hogy nevükkel ellentétben közel sem hasonlítanak egymásra mégis Dart képes volt mind a két nyelvből "örökölni" azokat a jó dolgokat, amik boldoggá tehetnek bármilyen webes fejlesztőt. Egyébként ez nem is véletlen, mivel olyan fejlesztők alkották meg a Dart nyelvet, akik dolgoztak V8 Javascript motoron vagy a Java VM-en.
Ezek után nem is meglepő, hogy Dart-hoz szintén tartozik egy VM és ami legfontosabb, hogy Javascripthez hasonlóan Dart is egy aszinkron(vagy eseményvezérelt) programozási nyelv. Számomra nagyon fontos az, hogy egy nyelv eseményvezérelt legyen mivel játékokban és weboldalakon is nagyon sok eseményt kell lekezelni és ilyenkor jól jön egy olyan nyelv, amit erre találtak ki.
Még tovább regélhetnék a Dart-ról, de most nem erről akarok beszélni, de azért adok néhány linket.
Dart jobb megismeréséhez ajánlani tudom Dartlangon lévő dokumentációt és ezt a jópofa videót.
Ami az IDE-ket illeti Dart esetében csak kettőt tudok ajánlani: Dart Editor és Webstorm.
Dart Editor ingyenes és egész jól használható, de én mégis inkább Webstormot használok, mivel ezt sokkal kényelmesebbnek érzem.
StageXL:
StageXL nem más, mint egy render engine, aminek ahogy a nevéből is kiderül a fő feladata a megjelenítés.
Tehát ez nem egy játék motor mint például Phaser, hanem inkább olyan mint Pixi.js, amire Phaser is támaszkodik. Viszont StageXL-t inkább Flash API-ra hajazik, van is lehetőség Flashből Dartra konvertálni.
Mit lehet elmondani StageXL-ről:
- Open Source
- 2D-s HTML5 render engine webGL támogatással
- Egyetlen fejlesztő, de az nagyon aktív
- Viszonylag fiatal projekt
- Kevés dokumentáció, de néha a Flash dokumentáció is jó hozzá
- Kevés példa( némelyik nem is épp egyszerű vagy Flashből lett fordítva)
- Nem játékmotor, ami a mi esetünkben megnehezíti a dolgunk
Hogyan érdemes hozzákezdeni:
Kezdésnek azt mondanám, hogy mindenki nézze meg a Dart-hoz tartozó dokumentációt(Programmer's Giude). Ez nagyjából pontosan elég az induláshoz és hogy megismerjük a nyelv alapjait.
Kezdőknek nem igazán ajánlom StageXL-t, mivel néhány esetben turkálni kell a dokumentációban(ami elég hiányos), forráskódban vagy esetleg a Flash APIban, hogy ki tudjunk rajta igazodni.
Ha elég bátornak érezzük magunkat a kihívásra akkor olvassuk el StageXL oldalán minden információt, ami csak megtalálható rajta, mivel ezek szolgálnak táppontként, hogy hogyan működik az API. Ezután pedig szerintem érdemes githubról letölteni és átnézni a kódot, mivel magában a kódban is vannak segítő kommentek.
Az egyik legfontosabb dolog, hogy megértsük a Future és Stream Dart könyvtárat, mivel ezeket gyakran fogjuk használni. Egyébként én személy szerint ezek miatt a könyvtárak miatt kedveltem meg Dart-ot. Szép és átlátható kódot eredményeznek.
Igazából a másik legfontosabb dolog a kis lépésekben való haladás.
- Stage létrehozása
- Kép(ek) betöltése
- Új osztály felvétel kép(ek)hez
- Kép(ek) animálása (Jugger és/vagy Animatable class)
- Kép(ek) animálása felhasználói eseményre(kattintás,gomb lenyomás)
- Ismerkedés Sprite konténer osztállyal
- Ezek után meg ami csak jön (Itt tartok)
Ezek az egyszerű lépések segítségével egy viszonylag egyszerű játékot könnyűszerrel össze lehet dobni.
Én például egy egyszerű Space Invader klónt hozztam össze: SpaceInvaderDart
A játék open source ezért bárki letöltheti githubról:SpaceInvaderDart repo
Ez még csiszolás alatt áll, de elég jól lehet vele játszani.
Nem utolsó sorban ha van valami megoldhatatlan problémánk vagy kérdésünk merülne fel akkor ott van a StageXL-hez tartozó fórum ,ahol én szintén fogom majd frissíteni a játékomhoz tartozó bejegyzést, ha lesz frissítés játékhoz.
Néhány tipp:
Githubot csak ajánlani tudom, mivel a mellékes projektek publikálására tökéletes és közben megtanulhatjuk a git használatát, ami modern fejlesztés egyik alapköve.
Akik nem érzik magukban az erőt, hogy git-et parancssorból használják azoknak léteznek GUI-s megoldások. Én személy szerint Webstormba integrált github megoldását használom. Sajnos Dart Editorban nincs semmilyen támogatás verzió kezelő rendszerekhez.