Saltar al contenido

¿Cómo Usar Cocos2d-JS?

10 junio, 2019

A continuación, en este nuevo post te mostraremos toda la información básica que necesitas saber para comenzar a utilizar Cocos2d-JS. Primero te hablaremos sobre el proceso de instalación, luego de sus fundamentos y por último te mostraremos un ejemplo para practicar lo que aprendiste.

Requerimientos para instalar Cocos2d-JS+

Primero que nada, antes de saber el proceso para comenzar a utilizar Cocos2d-JS, debes saber cuáles son sus requisitos.

  • Editor de texto: para empezar debes tener a la mano una herramienta que te ofrezca la posibilidad de escribir el código de tus apps. Actualmente podemos usar un IDE oficial llamado Cocos Code IDE. Por lo general ese editor viene siendo el más recomendado, pero en este post usaremos la versión 2 del Sublime Text.
  • Servidor web: gracias a las distintas partes que tiene un framework, vamos a necesitar un servidor web para poder levantar nuestras apps. Por lo general podemos usar un entorno Apache como por ejemplo: XAMPP, LAMP o incluso WAMP.
  • Navegador compatible con HTML 5: en este tutorial vamos a utilizar el navegador Firefox Developer Edition, por sus prestaciones para el desarrollo web. Sin embargo, si ya tenemos un navegador de preferencia no es obligatorio cambiarlo.

Instrucciones para Obtener el Framework

Primero que nada tienes que descargar todos los archivos que sean necesarios para así usar los recursos disponibles. Entonces, debes ir a la página oficial para realizar su respectiva descarga. Recuerda descargar la versión más actualizada de Cocos2d-JS

A su vez, en esta página puedes notar que hay otros productos de la empresa que desarrolla este framework. Por ejemplo tenemos el IDE y un tool kit de desarrollo, pero en este caso debes centrarte en Cocos2d-JS. Por otro lado, en esa misma página verás que la descarga pesa más de 350MB.

Estructura base de una aplicación con Cocos2d-JS

Cuando ya tengas descargado el framework, tienes que descomprimir el archivo. Posteriormente procede a ubicar la carpeta cocos2d-html5 y copia el directorio en el cual iniciarás el proyecto.

A continuación, dentro del proyecto tienes que crear una carpeta con el nombre de “src” y 3 archivos extras

  • Index.html: este es el contenedor fundamental de la app. A su vez también es el archivo que va a ser llamado en el navegador desde el servidor web.
  • Main.js: contiene todo el código JavaScript que corresponde a la lógica del juego.
  • Project.json: en él están contenidos todos los parámetros de configuración para que el juego funcione sin problema alguno.

Procedimiento para crear el Juego

Ahora que sabes cómo comenzar a utilizar Cocos2d-JS, ya puedes aprender a crear tu propio juego.

  • Primero debes incluir el archivo main.js y la librería CCBoot de Cocos2d-JS en el archivo index.html. Por último también tienes que añadir una etiqueta que será la encargada de recibir la información del ejemplo que estamos elaborando. A continuación te mostraremos el código de fuente de nuestro ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
		    <meta charset="UTF-8">
		    <title>Nuestro Primer Juego</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>
  • Ahora debemos enfocarnos en el archivo main.js el cual sirve como archivo de configuración. Dentro de este archivo tienes que colocar el código siguiente:
cc.game.onStart = function(){
 
		    cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
		    cc.director.runScene(new gameScene());
 
};
 
cc.game.run();

  • Posteriormente tenemos que armar la configuración del proyecto y para hacerlo tenemos que modificar el archivo project.son. En este debemos definir el motor y el número de cuadros por segundo. Inicialmente tienes que ingresar este código
{
		    "debugMode" : 0,
		    "showFPS" : false,
		    "frameRate" : 60,
		    "id" : "gameCanvas",
		    "renderMode" : 0,
		    "engineDir":"cocos2d-html5/",
		    "modules" : ["cocos2d"],
		    "jsList" : [
		    "src/gamescript.js"
		    ]
}
  • A continuación tenemos que incluir la respectiva lógica para nuestro primer ejemplo. Por lo tanto tienes que ir a la carpeta src del proyecto para luego crear un archivo llamado gamescript.js. Dentro de este archivo tenemos que crear la escena del juego, para esto tienes que incluir el siguiente código en la consola:
var gameScene = cc.Scene.extend({
		    onEnter:function () {
					    this._super();
					    console.log("Nuestro juego no es divertido, pero funciona =)");
		    }
});

¡Esto ha sido todo! Al culminar todos los pasos de forma correcta, tendremos una base para trabajar y por tanto ya aprendimos a utilizar cocos2d-JS de forma satisfactoria

¿Nos das 5 estrellas? ?