Primi passi con Cocos2d-JS

I videogiochi sono attualmente una delle componenti più importanti dell'economia digitale, ogni anno vengono investiti miliardi di dollari nella progettazione, sviluppo e manutenzione di videogiochi, e allo stesso tempo una quantità maggiore viene ricevuta dalle persone che consumano questo tipo di contenuto.
È molto semplice pensare che i videogiochi siano solo per bambini o per persone che sono in quel mondo, ma la realtà è diversa, non tutti i giochi sono per bambini, e non tutte le persone devono essere fan per godersi un buon gioco, ce ne sono migliaia di casi, ma due esempi possono essere Candy Crush e il Sims, la prima è stata una rivoluzione nell'area dei giochi sui social e sulle reti mobili, generando molti soldi ogni giorno, e la seconda, molto più antica, è stata una rivoluzione nei giochi per PC poiché includeva molte persone che non avevano mai pensato di prendere un interesse per i videogiochi.

INGRANDIRE

Tutta questa introduzione ci porta a uno strumento che facilita la creazione di videogiochi, così com'è Cocos2d-JS, che altro non è che un framework che ci permette di creare semplici giochi bidimensionali per qualsiasi tipo di dispositivo che supporti JavaScript sì HTML5.
Grazie al fatto che questo quadro è realizzato interamente in JavaScript, i requisiti di utilizzo non sono così difficili da soddisfare, vediamo di cosa abbiamo bisogno per sviluppare progetti con questo tutorial Cocos2d-JS:
Editor di testoAbbiamo bisogno di uno strumento che ci permetta di scrivere il codice per le nostre applicazioni, attualmente esiste un SDI ufficiale che cos'è? Codice Cocos IDE tuttavia è disponibile solo per finestre sì MAC. Ovviamente possiamo usare l'editor di nostra preferenza quindi l'IDE sopra è il primo suggerimento, nel caso di questo tutorial l'editor utilizzato è Testo sublime nella versione 2, ma non è essenziale.
Un server webA causa delle diverse parti del framework, abbiamo bisogno di un server web per costruire le nostre applicazioni, generalmente un ambiente Apache ci servirà come può essere XAMPP, LAMPADA o WAMP, anche se abbiamo una vasta conoscenza nella configurazione del server, possiamo usare un server come Nginx per servire i nostri contenuti, ma non è necessario.
Browser con supporto HTML5Nel nostro caso useremo Firefox Developer Edition per i suoi benefici per lo sviluppo web, ma se abbiamo un browser preferito possiamo continuare ad usarlo senza problemi.
La prima cosa che dobbiamo fare è scaricare i file necessari per poter utilizzare le risorse disponibili, per questo possiamo accedere al sito Web ufficiale ed effettuare il download corrispondente, inizialmente dobbiamo scegliere la versione più recente, nel nostro caso in particolare è il 3.5Tuttavia, potrebbero venire fuori più revisioni. Vediamo come si presenta l'area download:

INGRANDIRE

Possiamo vedere che abbiamo altri prodotti dell'azienda incaricata del framework, come il SDI e un kit di strumenti di sviluppo, tuttavia siamo interessati solo al momento Cocos2d-JS, che possiamo vedere al secondo posto nell'elenco dei prodotti. È importante notare che lo scarico è superiore a 350 MB quindi dobbiamo preparare uno spazio per questo file ma non dobbiamo aver paura poiché questo download include una grande quantità di materiale, quindi il vero motore non è così pesante.
Una volta che abbiamo il framework sul nostro computer, dobbiamo decomprimere il file e nella cartella quadri stiamo andando a individuare la cartella cocos2d-html5 e lo copieremo nella directory dove inizieremo il nostro progetto, che in questo caso si chiamerà prima partita, dovrebbe inizialmente assomigliare a questo:

Quindi all'interno del nostro progetto dobbiamo creare una cartella chiamata src e tre file aggiuntivi; il index.html che è il contenitore principale della nostra applicazione ed è il file che verrà chiamato nel browser dal server web. Il file main.js che conterrà tutto il nostro codice JavaScript corrispondente alla logica del nostro gioco, e infine il file progetto.json che conterrà i parametri di configurazione in modo che il nostro gioco possa funzionare correttamente. Vediamo come dovrebbe essere la nostra struttura finale:

Una volta che abbiamo la nostra configurazione iniziale è il momento di creare il nostro gioco, ovviamente un gioco è complesso e ciò che creeremo avrà una funzionalità molto semplice semplicemente mostrandoci un messaggio sullo schermo, non è qualcosa che compete con i giochi sul mercato ma è un inizio per vedere come funzionano le cose nel framework.
Nel nostro archivio index.html dobbiamo includere la libreria CCBoot di Cocos2d-JS, dobbiamo includere anche il nostro file main.js, e infine all'interno del nostro corpo dobbiamo includere un'etichetta tela che è responsabile della ricezione delle informazioni dell'esempio che stiamo creando, vediamo come appare il codice sorgente del nostro esempio:

 Il nostro primo gioco 

Dato che abbiamo fatto il primo passaggio ora ci sposteremo al file main.js, questo file di solito non porta la logica del gioco duro, la sua funzionalità il più delle volte è quella di servire come file di configurazione per indicare alcuni parametri al motore e per essere in grado di includere la vera logica all'interno del progetto, in esso posizioneremo il seguente codice:

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

Qui abbiamo semplicemente definito cosa accadrà all'inizio del gioco, le due righe all'interno della funzione principale stanno ad indicare la risoluzione e la scena che dovrebbe iniziare e infine nell'ultima riga indichiamo che dovrebbe iniziare il gioco. Il codice sembra un po' complicato all'inizio, ma piano piano lo capiremo e con esso la complessità diminuirà.
Ora configureremo il nostro progetto, per questo modificheremo il file progetto.json, in cui andremo a definire il motore, il numero di fotogrammi al secondo del gioco, che è il suo contenitore e l'elenco dei file che contengono la logica del nostro gioco, vedremo quest'ultimo nel passaggio successivo. Per ora vediamo cosa andremo a posizionare inizialmente nel file:

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

È molto importante che il contenuto di questo file sia a JSON valido, poiché altrimenti la nostra applicazione non verrà avviata.
Fatto ciò, è il momento di incorporare la logica per il nostro primo esempio, per questo andiamo alla cartella src del nostro progetto, dove andremo a creare il file gamescript.js, se siamo osservatori ci renderemo conto che questo è il file che definiamo nel progetto.json e iniziamo a vedere come i pezzi iniziano a combaciare.
All'interno di questo nuovo file creeremo la scena del nostro gioco, con questo lo avvieremo, ovviamente non abbiamo nulla di grafico da mostrare quindi stamperemo semplicemente qualcosa sulla console JavaScript, vediamo il codice che dobbiamo includere:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Il nostro gioco non è divertente, ma funziona =)"); }});

Ora che tutto è a posto dobbiamo chiamare la nostra cartella del progetto dal browser e aprire la console degli sviluppatori o qualche componente aggiuntivo che ci permetta di vedere la console JavaScript per vedere il risultato di tutto il nostro lavoro:

INGRANDIRE

Come possiamo vedere, il nostro primo tentativo è andato a buon fine, abbiamo già una base definita su cui lavorare e abbiamo mosso i primi passi con questo framework.
Perché creare giochi 2D?A parte questo, molti si staranno chiedendo quale sia il vantaggio di realizzare oggi un gioco in 2 dimensioni, e la risposta è molto semplice: perché sono divertenti, e ci permettono di sfruttare la possibilità di realizzare giochi in ambienti poco performanti , che può avvicinarci a una grande massa di potenziali giocatori che non hanno una console ma che con le parole e le azioni giuste possono acquistare il nostro gioco o se è un modello gratuito per far parte della nostra comunità.
Con questo abbiamo terminato questo tutorial e possiamo dire che la generazione di contenuti ludici è una delle aree con la maggiore crescita e concorrenza oggi, che dovrebbe continuare a crescere soprattutto sui dispositivi mobili ed è tale l'aspettativa che un grande di videogiochi come Nintendo si diletta in queste piattaforme, quindi se siamo interessati a un pezzo di questa torta, strumenti come Cocos2d-JS Ci aiuteranno ad entrare nel mercato in modo più semplice.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo