Primii pași cu Cocos2d-JS

Jocurile video sunt în prezent una dintre cele mai importante componente ale economiei digitale, în fiecare an se investesc miliarde de dolari în proiectarea, dezvoltarea și întreținerea jocurilor video și, în același timp, o sumă mai mare este primită de persoanele care consumă acest tip de conținut.
Este foarte simplu să ne gândim că jocurile video sunt doar pentru copii sau pentru oamenii care se află în acea lume, dar realitatea este diferită, nu toate jocurile sunt pentru copii și nu toți oamenii trebuie să fie fani pentru a se bucura de un joc bun, sunt mii de cazuri dar pot fi două exemple Zdrobire de dulciuri si Sims, prima a fost o revoluție în domeniul jocurilor pe rețelele sociale și mobile, generând o mulțime de bani zilnic, iar a doua, mult mai veche, a fost o revoluție în jocurile pe PC, deoarece a inclus mulți oameni care nu s-au gândit niciodată să ia un interes pentru jocurile video.

MARI

Toată această introducere ne conduce la un instrument care facilitează crearea de jocuri video, așa cum este Cocos2d-JS, care nu este altceva decât un cadru care ne permite să creăm jocuri bidimensionale simple pentru orice tip de dispozitiv care acceptă JavaScript Da HTML5.
Datorită faptului că acest cadru este realizat în întregime în JavaScript, cerințele de utilizare nu sunt atât de dificil de îndeplinit, haideți să vedem ce avem nevoie pentru ca acest tutorial să dezvolte proiecte Cocos2d-JS:
Editor de textAvem nevoie de un instrument care să ne permită să scriem codul pentru aplicațiile noastre, în prezent există un SDI ofițer ce este el Codul Cocos IDE cu toate acestea este disponibil numai pentru Windows Da MAC. Desigur, putem folosi editorul preferinței noastre, astfel încât IDE de mai sus este prima sugestie, în cazul acestui tutorial editorul utilizat este Text sublim în versiunea 2, dar nu este esențial.
Un server webDatorită diferitelor părți ale cadrului, avem nevoie de un server web pentru a construi aplicațiile noastre, în general un mediu Apache ne va servi cât se poate XAMPP, LAMPĂ sau WAMP, chiar dacă avem cunoștințe extinse în configurația serverului, putem folosi un server de genul Nginx pentru a ne servi conținutul, dar nu este necesar.
Browser cu suport HTML5În cazul nostru vom folosi Firefox Developer Edition pentru beneficiile sale pentru dezvoltarea web, dar dacă avem un browser preferat îl putem folosi fără probleme.
Primul lucru pe care trebuie să-l facem este să descărcăm fișierele necesare pentru a putea utiliza resursele disponibile, pentru aceasta putem accesa site-ul oficial și putem face descărcarea corespunzătoare, inițial trebuie să alegem cea mai recentă versiune, în cazul nostru în special este 3.5Cu toate acestea, pot apărea mai multe revizuiri. Să vedem cum arată zona de descărcare:

MARI

Putem vedea că avem alte produse de la compania responsabilă de cadru, cum ar fi SDI și un set de instrumente de dezvoltare, totuși suntem interesați doar în acest moment Cocos2d-JS, pe care îl putem vedea al doilea în lista de produse. Este important să rețineți că descărcarea este mai mult decât 350 MB deci trebuie să pregătim un spațiu pentru acest fișier, dar nu ar trebui să ne sperie, deoarece această descărcare include o cantitate mare de material, astfel încât motorul real nu este atât de greu.
Odată ce avem cadrul pe computerul nostru, trebuie să dezarhivăm fișierul și în dosar cadre vom localiza folderul cocos2d-html5 și îl vom copia în directorul în care vom începe proiectul nostru, care în acest caz va fi numit primul joc, ar trebui să arate inițial astfel:

Apoi, în cadrul proiectului nostru, trebuie să creăm un folder numit src și trei fișiere suplimentare; index.html care este containerul principal al aplicației noastre și este fișierul care va fi apelat în browser de pe serverul web. Fișierul main.js care va conține tot codul nostru JavaScript corespunzând logicii jocului nostru și, în final, fișierului proiect.json care va conține parametrii de configurare, astfel încât jocul nostru să funcționeze corect. Să vedem cum ar trebui să arate structura noastră finală:

Odată ce avem configurarea inițială, este timpul să ne creăm jocul, bineînțeles că un joc este complex și ceea ce vom crea va avea o funcționalitate de bază doar prin afișarea unui mesaj pe ecran, nu este ceva care concurează cu jocurile de pe piață, dar este un început pentru a vedea cum funcționează lucrurile în cadrul.
În arhiva noastră index.html trebuie să includem biblioteca CCBoot de Cocos2d-JS, trebuie să includem și fișierul nostru main.js, și în cele din urmă în cadrul nostru corp trebuie să includem o etichetă pânză care este responsabil pentru primirea informațiilor din exemplul pe care îl creăm, să vedem cum arată codul sursă al exemplului nostru:

 Primul nostru joc 

Deoarece am făcut primul pas acum, vom trece la fișier main.js, acest fișier nu poartă de obicei logică de joc greu, funcționalitatea sa de cele mai multe ori este de a servi ca fișier de configurare pentru a indica unii parametri motorului și pentru a putea include adevărata logică în cadrul proiectului, în el vom plasa următorul cod:

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

Aici am definit pur și simplu ce se va întâmpla când începe jocul, cele două linii din funcția principală sunt de a indica rezoluția și scena pe care ar trebui să o înceapă și în cele din urmă în ultima linie indicăm că ar trebui să înceapă jocul. Codul pare cam complicat la început, dar încetul cu încetul vom înțelege și odată cu acesta complexitatea va scădea.
Acum vom configura proiectul nostru, pentru aceasta vom modifica fișierul proiect.json, în care vom defini motorul, numărul de cadre pe secundă al jocului, care este containerul său, și lista de fișiere care conțin logica jocului nostru, îl vom vedea pe acesta din urmă în pasul următor. Deocamdată să vedem ce vom plasa inițial în fișier:

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

Este foarte important ca conținutul acestui fișier să fie JSON valabil, întrucât altfel aplicația noastră nu va porni.
Odată ce acest lucru este făcut, este timpul să încorporăm logica pentru primul nostru exemplu, pentru aceasta mergem în dosar src a proiectului nostru, unde vom crea fișierul gamescript.js, dacă suntem observatori, ne vom da seama că acesta este fișierul pe care îl definim în proiect.json și începem să vedem cum piesele încep să se potrivească.
În acest nou fișier vom crea scena jocului nostru, cu acesta îl vom începe, bineînțeles că nu avem nimic grafic de arătat, așa că pur și simplu vom imprima ceva pe consolă JavaScript, să vedem codul pe care trebuie să îl includem:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Jocul nostru nu este distractiv, dar funcționează =)"); }});

Acum că totul este la locul nostru, trebuie să apelăm folderul proiectului nostru din browser și să deschidem consola pentru dezvoltatori sau un supliment care ne permite să vedem consola JavaScript pentru a vedea rezultatul tuturor lucrărilor noastre:

MARI

După cum putem vedea, prima noastră încercare a avut succes, avem deja o bază definită pe care să lucrăm și am făcut primii pași cu acest cadru.
De ce să faci jocuri 2D?Într-o notă separată, mulți se pot întreba care este avantajul de a face un joc în 2 dimensiuni astăzi, iar răspunsul este foarte simplu: pentru că sunt distractive și ne permit să exploatăm posibilitatea de a face jocuri în medii cu performanțe reduse. , care ne poate apropia de o mare masă de potențiali jucători care nu au o consolă, dar care cu cuvintele și acțiunile potrivite pot cumpăra jocul nostru sau dacă este un model gratuit pentru a face parte din comunitatea noastră.
Cu aceasta am terminat acest tutorial și putem spune că generația de conținut ludic este unul dintre domeniile cu cea mai mare creștere și concurență de astăzi, care se așteaptă să continue să crească în special pe dispozitivele mobile și este atât de așteptată încât o mare de jocuri video precum Nintendo va merge la aceste platforme, deci dacă ne interesează o bucată din acest tort, instrumente precum Cocos2d-JS Ele ne vor ajuta să intrăm pe piață într-un mod mai ușor.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv