Ugrás a fő tartalomra

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:

  • 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.
  1. Stage létrehozása
  2. Kép(ek) betöltése
  3. Új osztály felvétel kép(ek)hez
  4. Kép(ek) animálása (Jugger és/vagy Animatable class)
  5. Kép(ek) animálása felhasználói eseményre(kattintás,gomb lenyomás)
  6. Ismerkedés Sprite konténer osztállyal
  7. 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. 




Megjegyzések

Népszerű bejegyzések ezen a blogon

Python kezdőknek

Itt a nyár és mivel lehetne ezt a legjobban megünnepelni, mint egy kígyóról elnevezett programozási nyelv bemutatásával. Következőkben tehát a Python programozási nyelvről lesz szó és annak lehetséges alkalmazásairól.

Miért tartsunk otthon Python-t? Python pályafutása 1991-ben kezdődött el egy Guido van Rossum nevű fejlesztőnek hála, aki egy olyan általános programozási nyelvet akart készíteni, amit nagyon könnyen el lehet sajátítani és használni. Az elmúlt év tizedek alatt a Python nyelv az egyik legjobb és legnépszerűbb általános programozási nyelvé nőtte ki magát, amit bizonyít, hogy számos operációs rendszeren(linux, mac os) alapból megtalálható a nyelv. De nézzük meg, hogy mitől ilyen népszerű: Egyszerűség: A nyelvnek az egyik legnagyobb előnye, hogy nagyon egyszerű és ezért például nagyon sok egyetemen a kezdő programozó legényeket Python segítségével vezetik be a programozás világába.Dinamikus: Mint minden dinamikus nyelvnek úgy Python-nak is van egy beépített REPL-je, ami nagyo…

Javascript kezdő lépések

Ma kis bejegyzésem arról fog szólni ,hogy mit érdemes kezdő lépésenként megtanulni ,illetve ,hogyan érdemes haladni Javascripttel és néhány érdekesség is lesz node.js-sel kapcsolatban.

Tanulás
   Szerencsére olyan világba élünk már ,ahol a web és webes technológiák nagyon gyorsan fejlődnek és ezért ezeknek a tanulása is egy fajta fejlődésen ment keresztül. Már nem könyvből kell tanulni ,hanem vannak olyan oldalak ahol interaktív módon lehet egy nyelvet megtanulni ,ami tökéletes a tanulás szempontjából. Előző cikkemben raktam be anyagokat ahhoz ,hogy mit érdemes elolvasni ,ha a tanuló inkább olvasós fajta és volt bent 2 interaktív.  Én például codecademy segítségével tanultam meg Jquery-t használni. Javascripthez Eloquent és codeacademy-t használtam.

   Mivel a Javascript elég megengedő ezért nagyon sok fajta stílusban kódolnak hozzá és ezek a stílusok  néha teljesen eltérőék. Szóval aki tanult már Java ,c vagy c++-t annak is lehet újdonság ,mivel ezeknél a nyelveknél nagyon szépen megv…

HTML5 játék fejlesztés alapjai

Ahogy a cím is sugallja a HTML5 játék fejlesztés alapjairól lesz szó ,hogy mi is kell hozzá.
Az én tudásom ebben a témában még elég kicsi ,de egyre növekszik ,talán egyszer majd én is össze fogok szedni annyi tapasztalatot a témából ,hogy akár még könyvet is írhatnék róla. Na persze egy izgalmas könyvet. :D

Na akkor vágjunk is bele!
    Első kérdés ,hogy mi a legalapvetőbb dolog ,amit ehhez meg kell tanulni? Persze sokan mondhatják ,hogy html , javascript ,css ismerete ,ebben igazat is adnék ,de nekünk még van ennél sokkal alapibb tudás ,ami a magyar programozókra főként igaz ez pedig az angol tudás.
Ezt nagyon sokszor tapasztalja az ember ,hogyha nem elég jó az angolja ,akkor egyetlen mondat is megtudja akasztani ,ahol az író nagyon szakmai akart lenni.
Főleg emiatt szeretem azokat az írókat ,akik semmi köntörfalazás nélkül belevágnak a lecsóban és simán és egyszerűen elmagyarázzák a dolgokat.

   Ha az első szint megvan akkor jöhet a HTML tanulása ,ami elég gyorsan letudható ,hiszen c…