Come usare Cocos2d-JS?

Successivamente, in questo nuovo post ti mostreremo tutte le informazioni di base che devi sapere per iniziare a usare Cocos2d-JS . Prima ti parleremo del processo di installazione, poi delle sue basi e infine ti mostreremo un esempio per mettere in pratica ciò che hai imparato.

Requisiti per l’installazione di Cocos2d-JS +

Prima di tutto, prima di conoscere il processo per iniziare a usare Cocos2d-JS , dovresti sapere quali sono i suoi requisiti.

  • Editor di testo : per iniziare devi avere a portata di mano uno strumento che ti offra la possibilità di scrivere il codice delle tue app. Al momento possiamo usare un IDE ufficiale chiamato IDC Codice Cocos . Di solito quell’editor è il più raccomandato, ma in questo post useremo la versione 2 del Sublime Text.
  • Web server: grazie alle diverse parti di un framework, avremo bisogno di un web server per poter aumentare le nostre app. Di solito possiamo usare un ambiente Apache come: XAMPP, LAMP o persino WAMP.
  • Browser compatibile con HTML 5 : in questo tutorial utilizzeremo il browser Firefox Developer Edition , per le sue capacità di sviluppo web. Tuttavia, se disponiamo già di un browser delle preferenze, non è obbligatorio modificarlo.

Istruzioni per ottenere il Framework

Prima di tutto devi scaricare tutti i file necessari per utilizzare le risorse disponibili. Quindi, è necessario visitare il sito Web ufficiale per effettuare il rispettivo download. Ricorda di scaricare la versione più aggiornata di Cocos2d-JS

A sua volta, in questa pagina puoi notare che ci sono altri prodotti dell’azienda che sviluppano questo framework. Ad esempio abbiamo l’IDE e un kit di strumenti di sviluppo, ma in questo caso dovresti concentrarti su Cocos2d-JS . D’altra parte, sulla stessa pagina vedrai che il download pesa oltre 350 MB.

Come usare Cocos2d-JS? 1

Struttura di base di un’applicazione con Cocos2d-JS

Dopo aver scaricato il framework, devi decomprimere il file . Quindi procedere per individuare la cartella cocos2d-html5 e copiare la directory in cui si avvia il progetto.

Successivamente, all’interno del progetto devi creare una cartella con il nome di “src” e 3 file extra

  • Index.html : questo è il contenitore fondamentale dell’app. È anche il file che verrà chiamato nel browser dal server web.
  • Main.js : contiene tutto il codice JavaScript che corrisponde alla logica del gioco.
  • Project.json : contiene tutti i parametri di configurazione in modo che il gioco funzioni senza problemi.

Procedura per creare il gioco

Ora che sai come iniziare a usare Cocos2d-JS , ora puoi imparare come creare il tuo gioco.

  • Innanzitutto è necessario includere il file main.js e la libreria Cocos2d-JS CCBoot nel file index.html. Infine, devi anche aggiungere un’etichetta che sarà responsabile della ricezione delle informazioni dell’esempio che stiamo sviluppando. Successivamente ti mostreremo il codice sorgente del nostro esempio:
<! DOCTYPE html>
<html lang = "es">
<Head>
		    <meta charset = "UTF-8">
		    <title> Il nostro primo gioco </title>
		    <script type = "text / javascript" src = "cocos2d-html5 / CCBoot.js"> </script>
		    <script type = "text / javascript" src = "main.js"> </script>
</ Head>
<body style = "padding: 0; margin: 0; background-color: # 000000;">
		   
		    <canvas id = "gameCanvas"> </canvas>
 
</ Body>
</ Html>
  • Ora dobbiamo concentrarci sul file main.js che funge da file di configurazione. All’interno di questo file devi inserire il seguente codice:
cc.game.onStart = function () {
 
		    cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL);
		    cc.director.runScene (new gameScene ());
 
};
 
cc.game.run ();

Come usare Cocos2d-JS? 2

  • Successivamente dobbiamo assemblare la configurazione del progetto e per farlo dobbiamo modificare il file di progetto . Sono . In questo dobbiamo definire il motore e il numero di frame al secondo. Inizialmente devi inserire questo codice
{
		    "debugMode": 0,
		    "showFPS": false,
		    "frameRate": 60,
		    "id": "gameCanvas",
		    "renderMode": 0,
		    "engineDir": "cocos2d-html5 /",
		    "moduli": ["cocos2d"],
		    "jsList": [
		    "src / gamescript.js"
		    ]
}
  • Successivamente dobbiamo includere la rispettiva logica per il nostro primo esempio . Quindi devi andare nella cartella src del progetto e quindi creare un file chiamato gamescript.js. All’interno di questo file dobbiamo creare la scena del gioco, per questo devi includere il seguente codice nella console:
var gameScene = cc.Scene.extend ({
		    onEnter: function () {
					    this._super ();
					    console.log ("Il nostro gioco non è divertente, ma funziona =)");
		    }
});

Questo è stato tutto! Completando correttamente tutti i passaggi, avremo una base per lavorare e quindi abbiamo già imparato a usare cocos2d-JS in modo soddisfacente

 

Potrebbe interessarti

Lascia un commento