Ugrás a fő tartalomra

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:

  1. 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.
  2. 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.
  3. 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. 
  4. 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  .
Node.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.

Megjegyzések

  1. Hello!
    Az lenne a kérdésem hogy egy Shakes and Fidget-hez hasonló elvű inkább szintlépésre és küldetésekre épülő játékhoz is érdemes JS-et használni vagy csak szimpla HTML+CSS meg PHP(felhasználók kezelésére) esetleg valamilyen MySQL szerver...
    Mit ajánlasz?

    VálaszTörlés
    Válaszok
    1. Ősszintén szólva még sosem fejlesztettem játékot PHP-val,de meg lehet oldani azt a játékot ami emelintettél vele.
      Ebben az esetben attól függ, hogy melyiket szereted használni, de én személy szerint ha PHP és JavaScript között kéne választanom, akkor JavaScriptet választanám, mert elég gyorsan összelehet benne rakni egy játékot nem is beszélve, hogy nagyon sok könyvtár és segítség van hozzá.

      Törlés
    2. Bár nem mai kérdés, de gondoltam az utókor számára hagyok itt egy választ. Mindkettőre szükség van, de ha a JS nem megy, még úgy is sikerülhet a játék. PHP nélkül sajnos nehezen, illetve szinte nem nagyon kivitelezhető. Adatbázisra is szükség van hozzá. A JS csak az animációhoz fog kelleni valószínűleg (pl. mikor egy harc lejátszódik, és repkednek a fegyverek a két játékos képe közt), de minden egyéb PHP működésű.

      Törlés
    3. Nem feltétlenül kell php. Ősszintén szólva gyakorlatilag bármelyik backend nyelvet választhatod, csak azt kell kigondolni, hogy a frontenddel(vagyis javascripttel) hogyan kommunikáljon. Például Nodejs és socket.io segítségével nagyon könnyen össze lehet hozni egy egyszerű játékot.

      Törlés
  2. @Ricky: adatbázis (mysql) kapcsolatot server szinten tud a nodejs mysql package. Mivel a nodejs-sel server oldali kódot is írsz (írhatsz) ráadásul asyncront ezért sok esetben simán elhagyhatod a PHP-t. Persze ez már olyan dolog, hogy kinek miben kényelemesebb, de a lehetőség adott, hogy ne kelljen PHP-t használnod.

    VálaszTörlés

Megjegyzés küldése

Népszerű bejegyzések ezen a blogon

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…

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…