Prvi koraci s Cocos2d-JS

Video igre su trenutno jedna od najvažnijih komponenti digitalne ekonomije, svake se godine milijarde dolara ulaže u dizajn, razvoj i održavanje videoigara, a istodobno veći iznos primaju ljudi koji konzumiraju ovu vrstu sadržaja.
Vrlo je jednostavno pomisliti da su video igre samo za djecu ili za ljude koji su na tom svijetu, ali stvarnost je drugačija, nisu sve igre dječje i ne moraju svi ljudi biti ljubitelji da bi uživali u dobroj igri, ima ih na tisuće slučajeva, ali mogu biti dva primjera Candy crush i Simsi, prva je bila revolucija u području igara na društvenim i mobilnim mrežama, generirajući puno novca dnevno, a druga, mnogo starija, bila je revolucija u računalnim igrama jer je uključivala mnoge ljude koji nikada nisu razmišljali o interes za video igre.

POVEĆAJTE

Sav ovaj uvod vodi nas do alata koji olakšava stvaranje video igara, kakve jesu Cocos2d-JS, koji nije ništa drugo do okvir koji nam omogućuje stvaranje jednostavnih dvodimenzionalnih igara za bilo koju vrstu uređaja koji podržava JavaScript Y HTML5.
Zahvaljujući činjenici da je ovaj okvir u potpunosti izrađen u JavaScript, zahtjeve za korištenje nije tako teško ispuniti, pogledajmo što nam je potrebno za ovaj vodič za razvoj projekata Cocos2d-JS:
Uređivač tekstaPotreban nam je alat koji nam omogućuje pisanje koda za naše aplikacije, trenutno postoji SDI policajac što je on IDE kodovog koda međutim, dostupna je samo Windows Y MAC. Naravno, možemo koristiti uređivač po vlastitom izboru, pa je gornji IDE prvi prijedlog, u slučaju ovog vodiča uređivač koji se koristi je Uzvišen tekst u verziji 2, ali to nije bitno.
Web poslužiteljZbog različitih dijelova okvira potreban nam je web poslužitelj za izradu naših aplikacija, općenito okruženja Apač poslužit će nam onako kako može biti XAMPP, SVJETILJKA ili WAMP, čak i ako imamo opsežno znanje o konfiguraciji poslužitelja, možemo koristiti poslužitelj poput Nginx za posluživanje našeg sadržaja, ali to nije potrebno.
Preglednik s podrškom za HTML5U našem slučaju koristit ćemo Firefox Developer Edition zbog svojih prednosti za web razvoj, ali ako imamo željeni preglednik, možemo ga nastaviti koristiti bez problema.
Prvo što moramo učiniti je preuzeti potrebne datoteke kako bismo mogli koristiti resurse koji su dostupni, za to možemo pristupiti službenoj web stranici i izvršiti odgovarajuće preuzimanje. U početku moramo odabrati najnoviju verziju, posebno u našem slučaju to je 3.5Međutim, moglo bi doći do novih revizija. Pogledajmo kako izgleda područje za preuzimanje:

POVEĆAJTE

Možemo vidjeti da imamo i druge proizvode tvrtke zadužene za okvir, poput SDI i komplet razvojnih alata, međutim trenutno nas zanima samo Cocos2d-JS, što možemo vidjeti drugo na popisu proizvoda. Važno je napomenuti da je iscjedak veći od 350 MB tako da moramo pripremiti prostor za ovu datoteku, ali ne bismo se trebali bojati jer ovo preuzimanje uključuje veliku količinu materijala, tako da pravi stroj nije toliko težak.
Nakon što imamo okvir na svom računalu, moramo raspakirati datoteku u mapu okvirima locirat ćemo mapu cocos2d-html5 i kopirat ćemo ga u direktorij u kojem ćemo započeti naš projekt, koji će se u ovom slučaju zvati prva utakmica, u početku bi trebao izgledati ovako:

Zatim unutar našeg projekta moramo stvoriti mapu pod nazivom src i tri dodatne datoteke; index.html koji je glavni spremnik naše aplikacije i datoteka je koja će se pozvati u pregledniku s web poslužitelja. Datoteka main.js koji će sadržavati sav naš kôd JavaScript odgovara logici naše igre, i na kraju datoteku projekt.json koji će sadržavati konfiguracijske parametre kako bi naša igra mogla ispravno raditi. Pogledajmo kako bi trebala izgledati naša konačna struktura:

Nakon što imamo početne postavke, vrijeme je za stvaranje naše igre, naravno da je igra složena i ono što ćemo stvoriti imat će vrlo osnovnu funkcionalnost samo ako nam prikažete poruku na ekranu, to nije nešto što se natječe s igre na tržištu, ali to je početak za vidjeti kako stvari funkcioniraju u okviru.
U našoj arhivi index.html moramo uključiti knjižnicu CCBoot od Cocos2d-JS, moramo uključiti i našu datoteku main.js, i konačno unutar našeg tijelo moramo uključiti oznaku platno koji je odgovoran za primanje informacija o primjeru koji stvaramo, pogledajmo kako izgleda izvorni kod našeg primjera:

 Naša prva utakmica 

Budući da sada imamo prvi korak, prijeći ćemo na datoteku main.js, ova datoteka obično ne sadrži čvrstu logiku igre, njezina je funkcionalnost većinu vremena poslužiti kao konfiguracijska datoteka za označavanje nekih parametara stroju i za uključivanje prave logike u projekt, u nju ćemo postaviti sljedeći kod:

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (nova igrana scena ()); }; cc.game.run ();

Ovdje smo jednostavno definirali što će se dogoditi kada igra započne, dva retka unutar glavne funkcije označavaju razlučivost i scenu koja bi trebala započeti, a na kraju u zadnjem retku označavamo da bi trebala započeti igru. Kôd se na početku čini pomalo kompliciranim, ali malo po malo shvatit ćemo i s njim će se složenost smanjiti.
Sada ćemo konfigurirati naš projekt, za to ćemo izmijeniti datoteku projekt.json, u kojem ćemo definirati motor, broj sličica u sekundi igre, koji je njezin spremnik i popis datoteka koje sadrže logiku naše igre, ovo drugo ćemo vidjeti u sljedećem koraku. Za sada da vidimo što ćemo u početku staviti u datoteku:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "moduli": [" cocos2d "]," jsList ": [" src / gamescript.js "]}

Vrlo je važno da je sadržaj ove datoteke a JSON vrijedi, jer se u protivnom naša aplikacija neće pokrenuti.
Kad to učinite, vrijeme je da uključite logiku za naš prvi primjer, za to idemo u mapu src našeg projekta, gdje ćemo stvoriti datoteku gamescript.js, ako smo promatrači, shvatit ćemo da je ovo datoteka koju definiramo u projekt.json i počinjemo uviđati kako se komadi počinju slagati.
Unutar ove nove datoteke stvorit ćemo scenu naše igre, s ovim ćemo je i pokrenuti, naravno da nemamo ništa grafički za prikazati pa ćemo jednostavno ispisati nešto na konzoli JavaScript, pogledajmo kod koji moramo uključiti:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Naša igra nije zabavna, ali radi =)"); }});

Sad kad je sve na svom mjestu, moramo iz preglednika nazvati mapu projekta i otvoriti konzolu za razvojne programere ili neki dodatak koji nam omogućuje da vidimo konzolu JavaScript kako bismo vidjeli rezultat cijelog našeg rada:

POVEĆAJTE

Kao što vidimo, naš prvi pokušaj bio je uspješan, već imamo definiranu bazu za rad i učinili smo prve korake s ovim okvirom.
Zašto praviti 2D igre?Zasebno, mnogi se možda pitaju koja je prednost današnje igre u 2 dimenzije, a odgovor je vrlo jednostavan: jer su zabavne i omogućuju nam da iskoristimo mogućnost stvaranja igara u okruženjima s niskim performansama , što nas može približiti velikoj masi potencijalnih igrača koji nemaju konzolu, ali koji s pravim riječima i radnjama mogu kupiti našu igru ​​ili ako je to besplatan model za sudjelovanje u našoj zajednici.
Ovime smo završili ovaj vodič i možemo reći da je generiranje razigranog sadržaja jedno od područja s najvećim rastom i konkurencijom danas, za koje se i dalje očekuje da će nastaviti rasti, osobito na mobilnim uređajima, pa se očekuje da će veliki video igara poput Nintendo će se baviti ovim platformama, pa ako nas zanima komad ove torte, alati kao što su Cocos2d-JS Oni će nam pomoći da lakše uđemo na tržište.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod