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 csak egy jelölő nyelv. Viszont érdemes még ennek keretében a HTML5-tel megismerkedni ,mert nagyon sok újítás és hasznos dolgot vezettek be. Főleg számunkra a leghasznosabbat a canvas-t.
Canvas az egyik legfontosabb elemünk ,hiszen majd erre fogunk rajzolni megtanulni.
Viszont mielőtt elkezdenénk firkálgatni a legfontosabb tanulni való a javascript. Igazából ,ha az ember még most tanul meg programozni ,akkor nagyon nem ajánlom a javascriptet ,mivel hihetetlenül keverék nyelv. Nagyon sok stílus keveredik benne és nagyon megengedő nyelv ,ami később meg is bosszulhatja magát.
Én valószínűleg első nyelvként Java-t ajánlanám ,mert igaz egy csöppet sem hasonlít Javascriptre akár menyire is hasonló a nevük ,viszont az objektum orientált programozásra tökéletesen megtanít ,ami nagyon fontos.
Most erre lehetne mondani ,hogy JS is OO(objektum orientált) nyelv ,erre azt is mondanám ,hogy igen csak nagyon furcsán ,mivel JS-ben az OO és a funkcionális programozás keveredik.
Sajnos az egész nyelvből hiányzik az osztály fogalma így ezeket csak funkciókkal tudjuk megvalósítani.
Jöhet a kérdés ,hogyha ennyire fura a JS ,akkor miért ezt használjunk? Nagyon egyszerűen ,mert ez terjedt el és ehhez találhatjuk meg a legtöbb anyagot a neten. JS olyan a weben ,mint az assembly a számítógépeken ,viszont a JS-t még nem váltottuk le egy szebb nyelvre.
Persze a gondjait próbálják megoldani a JS 6.-odik verziójával ,de megmondva őszintén a csúnyaságára már vannak olyan megoldások mint például: truescript ,coffescript(ezeket altjs-nek szokták hívni) ,amik gyakorlatilag adnak a JS-hez egy szebb felületet és amikor megvagyunk a kódunkkal ,akkor ezt le tudjuk fordítani JS-re.
Szóval ez olyan mint egy roskadtak vityillót kifesteni ,szebb lesz ,de azon túl megmaradnak a problémái.
De van remény sugár az éjszakában ,ami ezen a fronton változtatni akar és ez a dart ,amit a google indítót útjára és mára már open source projekté vált.
A nyelv célkitűzése ,hogy gyorsabb és szebb legyen a JS-nél és valamennyire hasonlítson olyan nyelvekre mint a Java és C# ,amikben könnyebb a programozás és amit a legtöbb fejlesztő használ.
A projektet azért emelem ki ,mivel olyan emberek kezdték el ,akik a Chrome V8 JS engine-jét fejlesztették és látták a JS gyengeségeit.
Viszont ha a Dart gyorsabb és szebb mint a JS ,miért nem ezt használjuk?
Erre az egyszerű válasz az ,hogy a nyelv még túl fiatal ,még nem jelent meg a nyelvből az első 1.0-ás stabil kiadási verzió. Viszont már a késő fejlesztő fázisban vannak ,szóval már lehet rá számítani.
Sajnos emiatt még natívan egy böngésző sem támogatja ,viszont ezt a nyelvet is le lehet fordítani JS-re ,amivel ugyan romlik a teljesítménye ,de legalább elfut mindenhol.
Összegzésképen a sorrend nyelveknél Javascript,Altjs,Dart.
Viszont kezdőknél pluszban Java, OO miatt.
CSS-ről meg annyit írnék ,hogy ezt is érdemes megnézni ,habár elég nehéz vele bánni ,de amit leginkább kell tudni belőle azok a selector-ok vagy HTML elem kiválasztók magyarosan.
De annyira nem is igazán fontosak a kezdeti lépésben ,mivel előbb más dolgunk is van mint az oldal kinézette.
Tipp: Ugyebár tudjuk ,hogy az ember tapasztalat alapján tudd a legjobban tanulni és így be is látható mekkora bukta is az egész oktatási rendszer ,ami nem éppen erre épül hmmm hmmm.
Na szóval ha meg is akarunk ismerkedni úgy igazán a JS-sel tesztelnünk kell a saját magunk által elkészített kis kódrészleteket.
Ugyebár erre több mód is lehetséges:
Most írok róla egy kis szösszenetet ,mivel megérdemli.
Szóval mi is ez? Ez egy egyetemi matematikus diák hobbi projektje ,amit azért indított ,mert nem talált számára ,jó aszinkron vagy esemény kezelt szervert ,ezért gondolt egyet és belefogott.
Na de miért pont JS? Azért ,mert megtetszett neki és ,mert ahogy már meséltem a JS funkcionális nyelv is egyben ,amivel meg lehet igazából valósítani ,mivel valamivel szebb ,mintha Java-ban vagy C# kellene. Mit jelent ,hogy esemény vezérelt? Alapvetően a megszokott programozási nyelvek nem esemény vezéreltek ,hanem olyanok ,hogy felteszik a babot főzni és addig várnak a babra ,hogy kész legyen és ha végre kész akkor megeszi. Na ennek ellenkezője az aszinkron ,ami felteszi a babot főzni és közben csinál valami mást például tv-zik ,cod-ozik stb.. és amikor a bab kész van , akkor megy és megeszi.
Érdemes node.js utána nézni és olvasni utána ,mert tényleg nagyon felkapott téma és html5-ös játékok fejlesztésére is tökéletes. Szóval aki eddig nem szerette a JS-t ,lehet hogy majd node fogja vele megkedveltetni.
Egyébként jó néhány online editor ezt használja vagy kínálja fel hogy használjuk ,mert már tényleg kezd annyira elterjedni ,mit a Jquery. Főleg azért ,mert nagyon sok hasznos könyvtár vagy másképp module érhető el hozzá ,amik nagyon megtudják könnyíteni a fejlesztést.
A legtöbb anyag amit felrakok angol ,mivel magyarul egyáltalán nem találni vagy nagyon keveset ezekről a dolgokról és nem is biztos ,hogy helyesek.Igazából node-hoz a legnehezebb jó anyagot találni szerintem ,mert nagyon sok van és közölük néhány elavult is, ezért törekedjetek az egy éven belüli találatokra ,mivel a node folyamatosan fejlődik.
Igazából könyvekre nem is lesz szükség ,habár JS közösségben 1 De Facto könyv van ,amit biztos mindenhol megemlítenek ez a JavaScript: The Good Parts. Én elkezdtem olvasni ,de aztán abbahagytam mert számomra túl száraz volt a könyv ,de egyszer majd biztos elolvasom ,ha lesz hozzá erőm. :D
Sajnos ,ahogy említettem normális up-to-date könyv nincs magyarul a JS-ről. Ezért nagyon fontos ,hogy az angol nyelv a barátunk legyen ,mert máshogy maradhatunk a múltszázadban.
Anyagok:
http://eloquentjavascript.net/ Elég jó kis online tutorial
http://superherojs.com/ Összességében ezen is nagyon sok tutorial van Js-hez
Ez a kettő interaktív és mind HTML+js+css sőt még sok mást is megtanítanak
http://www.codecademy.com/
http://www.codeavengers.com/
Itt találhatók meg az alternatív JS nyelvek
(Ez is mutatja ,hogy már elég sok embernek elege van a JSből)
http://altjs.org/
Node.js fő oldala ahonnan le lehet tölteni
http://nodejs.org/
Node-hoz talán ezt tudom ajánlani kezdőknek ,mint oldalt
http://nodeguide.com/
Dart kezdő oldala ,ahol elég sok anyag van hozzá
https://www.dartlang.org/
Néhány érdekes link:
http://uptodate.frontendrescue.org/
http://learnxinyminutes.com/ Nagyon hasznos ez új nyelvekbe való betekintéshez
Mivel a már a szociális hálóban élünk ezért még néhány csoportot is megadok ,ahol lehet még anyagot találni illetve híreket olvasni.Természetesen ezeken kivül is található még rengeteg.
reddit: /r/javascript , /r/learnjavascript , /r/node , /r/dartlang
google+ közöségek: node.js ,javascript ,dartisans ,html5
Egy angol Html5-ös játékfejlesztő fórum ,ami elnyerte a tetszésem
Tipp:A fórumon Javascript tutorialok is találhatók ,érdemes rájuk nézni
http://www.html5gamedevs.com/
Expert JS kódereknek :
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
http://shichuan.github.io/javascript-patterns/
Összességében: Hosszúra sikerült írás lett belőle ,de a téma ,amiről beszélünk ,nem is olyan könnyű ,mit ahogy azt lehetne feltételezni. Végül az is kiderült ,hogy HTML5-höz való fejlesztéshez több kell mint ahogy azt gondolná az ember. Habár van jó néhány eszköz HTML5 készítéshez ,mint például a
GameMaker Studio(amivel egész jó kis játékokat raktak már össze ,de viszont fizetős) ,construct2 stb stb ,viszont ezek használata nem biztos ,hogy megadja azt tudást ,ami ahhoz kell ,hogy ténylegesen megértsük a játékfejlesztés alapjait HTML5-re és tudásunk így szélesebb lesz és kezdeti kis játékokhoz meg feleslegesek ,szóval hackelésre fel.
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 csak egy jelölő nyelv. Viszont érdemes még ennek keretében a HTML5-tel megismerkedni ,mert nagyon sok újítás és hasznos dolgot vezettek be. Főleg számunkra a leghasznosabbat a canvas-t.
Canvas az egyik legfontosabb elemünk ,hiszen majd erre fogunk rajzolni megtanulni.
Viszont mielőtt elkezdenénk firkálgatni a legfontosabb tanulni való a javascript. Igazából ,ha az ember még most tanul meg programozni ,akkor nagyon nem ajánlom a javascriptet ,mivel hihetetlenül keverék nyelv. Nagyon sok stílus keveredik benne és nagyon megengedő nyelv ,ami később meg is bosszulhatja magát.
Én valószínűleg első nyelvként Java-t ajánlanám ,mert igaz egy csöppet sem hasonlít Javascriptre akár menyire is hasonló a nevük ,viszont az objektum orientált programozásra tökéletesen megtanít ,ami nagyon fontos.
Most erre lehetne mondani ,hogy JS is OO(objektum orientált) nyelv ,erre azt is mondanám ,hogy igen csak nagyon furcsán ,mivel JS-ben az OO és a funkcionális programozás keveredik.
Sajnos az egész nyelvből hiányzik az osztály fogalma így ezeket csak funkciókkal tudjuk megvalósítani.
Jöhet a kérdés ,hogyha ennyire fura a JS ,akkor miért ezt használjunk? Nagyon egyszerűen ,mert ez terjedt el és ehhez találhatjuk meg a legtöbb anyagot a neten. JS olyan a weben ,mint az assembly a számítógépeken ,viszont a JS-t még nem váltottuk le egy szebb nyelvre.
Persze a gondjait próbálják megoldani a JS 6.-odik verziójával ,de megmondva őszintén a csúnyaságára már vannak olyan megoldások mint például: truescript ,coffescript(ezeket altjs-nek szokták hívni) ,amik gyakorlatilag adnak a JS-hez egy szebb felületet és amikor megvagyunk a kódunkkal ,akkor ezt le tudjuk fordítani JS-re.
Szóval ez olyan mint egy roskadtak vityillót kifesteni ,szebb lesz ,de azon túl megmaradnak a problémái.
De van remény sugár az éjszakában ,ami ezen a fronton változtatni akar és ez a dart ,amit a google indítót útjára és mára már open source projekté vált.
A nyelv célkitűzése ,hogy gyorsabb és szebb legyen a JS-nél és valamennyire hasonlítson olyan nyelvekre mint a Java és C# ,amikben könnyebb a programozás és amit a legtöbb fejlesztő használ.
A projektet azért emelem ki ,mivel olyan emberek kezdték el ,akik a Chrome V8 JS engine-jét fejlesztették és látták a JS gyengeségeit.
Viszont ha a Dart gyorsabb és szebb mint a JS ,miért nem ezt használjuk?
Erre az egyszerű válasz az ,hogy a nyelv még túl fiatal ,még nem jelent meg a nyelvből az első 1.0-ás stabil kiadási verzió. Viszont már a késő fejlesztő fázisban vannak ,szóval már lehet rá számítani.
Sajnos emiatt még natívan egy böngésző sem támogatja ,viszont ezt a nyelvet is le lehet fordítani JS-re ,amivel ugyan romlik a teljesítménye ,de legalább elfut mindenhol.
Összegzésképen a sorrend nyelveknél Javascript,Altjs,Dart.
Viszont kezdőknél pluszban Java, OO miatt.
CSS-ről meg annyit írnék ,hogy ezt is érdemes megnézni ,habár elég nehéz vele bánni ,de amit leginkább kell tudni belőle azok a selector-ok vagy HTML elem kiválasztók magyarosan.
De annyira nem is igazán fontosak a kezdeti lépésben ,mivel előbb más dolgunk is van mint az oldal kinézette.
Tipp: Ugyebár tudjuk ,hogy az ember tapasztalat alapján tudd a legjobban tanulni és így be is látható mekkora bukta is az egész oktatási rendszer ,ami nem éppen erre épül hmmm hmmm.
Na szóval ha meg is akarunk ismerkedni úgy igazán a JS-sel tesztelnünk kell a saját magunk által elkészített kis kódrészleteket.
Ugyebár erre több mód is lehetséges:
- JS kódunkat htmlbe beleágyazva futtatjuk le és a böngésző console-ján nézzük ,hogy mit is add ki a kód eredményül. Ez Barbárian egyszerű módja ,de nekem nem tetszik.
- Használunk valamilyen online editor-t például JSFiddle , cloud9 .stb szóval ezeket chrome store-ban "ide" kulcsszavakat beírva megtaláljuk. Ezekhez igazából inkább olyankor ajánlottak ,amikor már az ember ismeri a JS-t és már egy alkalmazást akar összerakni.
- Vannak az asztali fejlesztő eszközök(IDE) ,ezek közül inkább csak a Webstormot emelném ki ,mert gyakorlatilag csak ezt találtam használhatónak. Többi , annyira nem érzi ,hogy merre kéne haladniuk.Habár itt még meg kell említenem a Brackets nevű fejlesztő eszközt ,ami számomra jó kezdeményezés csak még túl fiatal.
- Jöhet az ősrégi bevált programozói módszer ,amit javaslok. Ez általánosságban egy egy szövegszerkesztő és egy fordító. ,amivel futtatható képes lesz a kód. Szövegszerkesztőt kipipálhatjuk (gedit ,sublime text ,vim stb..) viszont fordítóval mi legyen? Ez a kérdés azért merül fel mert JS nem kell lefordítani csak le kell futtatni. Mivel ajánlott lefuttatni? Nem mással mint ,ami megváltoztatta az egész JS közösséget ,ami nem más mint a node.js . Használata egyszerű csak fel kell rakni és ,amikor kész vagyunk a JS kódunkkal ,akkor node.js segítségével lefuttatjuk . Futtatás így nézz ki: node jskódom.js .
Most írok róla egy kis szösszenetet ,mivel megérdemli.
Szóval mi is ez? Ez egy egyetemi matematikus diák hobbi projektje ,amit azért indított ,mert nem talált számára ,jó aszinkron vagy esemény kezelt szervert ,ezért gondolt egyet és belefogott.
Na de miért pont JS? Azért ,mert megtetszett neki és ,mert ahogy már meséltem a JS funkcionális nyelv is egyben ,amivel meg lehet igazából valósítani ,mivel valamivel szebb ,mintha Java-ban vagy C# kellene. Mit jelent ,hogy esemény vezérelt? Alapvetően a megszokott programozási nyelvek nem esemény vezéreltek ,hanem olyanok ,hogy felteszik a babot főzni és addig várnak a babra ,hogy kész legyen és ha végre kész akkor megeszi. Na ennek ellenkezője az aszinkron ,ami felteszi a babot főzni és közben csinál valami mást például tv-zik ,cod-ozik stb.. és amikor a bab kész van , akkor megy és megeszi.
Érdemes node.js utána nézni és olvasni utána ,mert tényleg nagyon felkapott téma és html5-ös játékok fejlesztésére is tökéletes. Szóval aki eddig nem szerette a JS-t ,lehet hogy majd node fogja vele megkedveltetni.
Egyébként jó néhány online editor ezt használja vagy kínálja fel hogy használjuk ,mert már tényleg kezd annyira elterjedni ,mit a Jquery. Főleg azért ,mert nagyon sok hasznos könyvtár vagy másképp module érhető el hozzá ,amik nagyon megtudják könnyíteni a fejlesztést.
A legtöbb anyag amit felrakok angol ,mivel magyarul egyáltalán nem találni vagy nagyon keveset ezekről a dolgokról és nem is biztos ,hogy helyesek.Igazából node-hoz a legnehezebb jó anyagot találni szerintem ,mert nagyon sok van és közölük néhány elavult is, ezért törekedjetek az egy éven belüli találatokra ,mivel a node folyamatosan fejlődik.
Igazából könyvekre nem is lesz szükség ,habár JS közösségben 1 De Facto könyv van ,amit biztos mindenhol megemlítenek ez a JavaScript: The Good Parts. Én elkezdtem olvasni ,de aztán abbahagytam mert számomra túl száraz volt a könyv ,de egyszer majd biztos elolvasom ,ha lesz hozzá erőm. :D
Sajnos ,ahogy említettem normális up-to-date könyv nincs magyarul a JS-ről. Ezért nagyon fontos ,hogy az angol nyelv a barátunk legyen ,mert máshogy maradhatunk a múltszázadban.
Anyagok:
http://eloquentjavascript.net/ Elég jó kis online tutorial
http://superherojs.com/ Összességében ezen is nagyon sok tutorial van Js-hez
Ez a kettő interaktív és mind HTML+js+css sőt még sok mást is megtanítanak
http://www.codecademy.com/
http://www.codeavengers.com/
Itt találhatók meg az alternatív JS nyelvek
(Ez is mutatja ,hogy már elég sok embernek elege van a JSből)
http://altjs.org/
Node.js fő oldala ahonnan le lehet tölteni
http://nodejs.org/
Node-hoz talán ezt tudom ajánlani kezdőknek ,mint oldalt
http://nodeguide.com/
Dart kezdő oldala ,ahol elég sok anyag van hozzá
https://www.dartlang.org/
Néhány érdekes link:
http://uptodate.frontendrescue.org/
http://learnxinyminutes.com/ Nagyon hasznos ez új nyelvekbe való betekintéshez
Mivel a már a szociális hálóban élünk ezért még néhány csoportot is megadok ,ahol lehet még anyagot találni illetve híreket olvasni.Természetesen ezeken kivül is található még rengeteg.
reddit: /r/javascript , /r/learnjavascript , /r/node , /r/dartlang
google+ közöségek: node.js ,javascript ,dartisans ,html5
Egy angol Html5-ös játékfejlesztő fórum ,ami elnyerte a tetszésem
Tipp:A fórumon Javascript tutorialok is találhatók ,érdemes rájuk nézni
http://www.html5gamedevs.com/
Expert JS kódereknek :
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
http://shichuan.github.io/javascript-patterns/
Összességében: Hosszúra sikerült írás lett belőle ,de a téma ,amiről beszélünk ,nem is olyan könnyű ,mit ahogy azt lehetne feltételezni. Végül az is kiderült ,hogy HTML5-höz való fejlesztéshez több kell mint ahogy azt gondolná az ember. Habár van jó néhány eszköz HTML5 készítéshez ,mint például a
GameMaker Studio(amivel egész jó kis játékokat raktak már össze ,de viszont fizetős) ,construct2 stb stb ,viszont ezek használata nem biztos ,hogy megadja azt tudást ,ami ahhoz kell ,hogy ténylegesen megértsük a játékfejlesztés alapjait HTML5-re és tudásunk így szélesebb lesz és kezdeti kis játékokhoz meg feleslegesek ,szóval hackelésre fel.