Cargando



Cargar y remover imágenes en Cocos2d-JS

En este tutorial aprenderemos como cargar y luego remover una imagen de nuestro espacio de juego, una habilidad muy importante cuando desarrollamos todo lo referente al apartado lúdico de nuestros proyectos.


abr 24 2015 04:22
Profesional
abr 24 2015 10:26
A pesar que la parte de algoritmos de los juegos es una de las partes más importantes y es lo que les da la lógica y la inteligencia para ser un reto, realmente eso por sí solo no llama la atención de la mayoría de los usuarios, un buen juego además de ser divertido nos debe llamar la atención en el apartado gráfico, claro se han visto casos donde buenas gráficas no significa un buen juego pero es lo que ayuda a venderlo y comercializarlo, que es una de nuestras metas.

Por supuesto el apartado gráfico no se construye de un día para otro y la cantidad de recursos que necesitamos para ello puede ser alta, lo que si es cierto es que podemos empezar por los recursos más básicos para poder entender cómo funciona un videojuego.

Afortunadamente para nosotros Cocos2d-JS hace un manejo impecable de los recursos o assets gráficos, donde el mismo nos provee de algunos métodos y motores con los cuales nos hace la vida más fácil, haciendo que nos preocupemos solo en hacer que nuestro juego luzca lo mejor posible para nuestros futuros usuarios.

Requisitos


1- Para este tutorial tenemos dos tipos de requerimientos, los técnicos y los de aplicación, entre los técnicos necesitamos en primer lugar haber descargado Cocos2d-JS desde su página oficial y por supuesto tenerlo disponible en nuestro sistema.

2- Requerimos un servidor web estilo Apache, ya que el framework no va a cargar directamente si hacemos el llamado desde el navegador por motivos de seguridad ya que se ejecutan muchas peticiones.

3- En el aspecto aplicación, necesitamos haber cumplido o por lo menos leer el tutorial de los primeros pasos con Cocos2d-JS que se publicó en una ocasión para poder construir la plantilla base del juego, ya que el código que ofreceremos en el tutorial tiene como pre requisito que tengamos una plantilla base.

4- Por último debemos tener acceso a Internet para poder descargar las imágenes que deseemos para cumplir con los objetivos de los ejemplos.

Preparando nuestra aplicación


Lo primero que tenemos que encargarnos en nuestro juego es en preparar donde recibiremos los recursos gráficos, para ello en nuestro archivo project.json debemos indicarle que vamos a requerir un nuevo archivo JavaScript llamado cargaassets.js, que es quien se encargará de llevar el control de todas las imágenes que vayamos a utilizar en nuestro juego. El código de nuestro archivo project.json debe lucir de la siguiente manera:
{
"debugMode" : 0,
"showFPS" : false,
"frameRate" : 60,
"id" : "gameCanvas",
"renderMode" : 0,
"engineDir":"cocos2d-html5/",
"modules" : ["cocos2d"],
"jsList" : [
		    "src/cargaassets.js"
		    "src/gamescript.js"
		    ]
}
Vemos entonces que esto nos lleva a una nueva necesidad, debemos ahora crear el archivo cargaassets.js, este archivo es muy importante ya que cuando nuestro archivo de configuración lo incluya él se encargará de forma adecuada de todo lo que necesitemos, el mismo debe ir en la carpeta src que es donde colocamos todo lo que tiene que ver con la lógica de nuestro juego y debe tener un código como el siguiente:
var gameResources = [
	 "assets/target.png"
];
Si nos fijamos del código le estamos diciendo que de una carpeta llamada assets debemos cargar un archivo llamado mario.png, este archivo va a ser una imagen que deseemos incorporar en nuestro juego con el nombre que queramos solo que debe coincidir con el archivo, para referencia la imagen que elegimos mide unos 128 por 128 píxeles lo que la hace pequeña y fácil de manejar.

Ahora nos quedan aún dos pasos para hacer que podamos iniciar nuestro juego, en primer lugar en el archivo main.js que debemos tener de nuestro ejemplo del tutorial anterior hay que indicar que se debe hacer una precarga del recurso, para ello utilizaremos el método preload de la clase LoaderScene, haciendo que nuestro código quede de la siguiente manera:
cc.game.onStart = function(){
  cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL);
  cc.LoaderScene.preload(gameResources, function () {
    cc.director.runScene(new gameScene());
  }, this);
};
cc.game.run();
Vemos entonces como dentro del callback del preloader es que hacemos el verdadero llamado de la escena que mostraremos al momento. El segundo paso para nuestro juego funcione es que ahora debemos colocar en nuestro archivo gamescript todos los recursos necesarios para mostrar la imagen, para ello debemos utilizar el siguiente código:
var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});
var game = cc.Layer.extend({
  init:function () {
    this._super();
    var target = cc.Sprite.create("assets/target.png");
    this.addChild(target,0);
  }
});
Aquí lo que hacemos es crear una nueva escena de nuestro juego, dentro de ella creamos una capa que contendrá nuestros recursos y para ello debemos en la parte inferior crear dicha capa, esto lo logramos creando un objeto llamado game, donde ahí le indicamos que debe cargar y crear el sprite con la imagen que hemos descargado a nuestro proyecto.

Una vez que hemos realizado todo el proceso podemos entonces iniciar nuestro juego en el navegador, ingresando a la ruta de nuestro servidor donde almacenamos nuestro proyecto y veremos algo similar dependiendo de la imagen que hayamos seleccionado:


Vemos como tímidamente nuestra imagen se asoma al final de la pantalla, este es un primer logro muy importante que hemos conseguido, sin embargo a pesar de ser un buen logro no podemos conformarnos con eso, es por ello que ahora debemos posicionar nuestra imagen de mejor manera. Para ello nos valdremos del método setPosition, como vemos en el siguiente código:
target.setPosition(160,240);
Notamos que le pasamos unas coordenadas, las cuales son para posicionar nuestra imagen en un lugar de la pantalla. Esta línea la debemos colocar en nuestro archivo gamescript.js en el objeto game que creamos, donde al final el código de este debe lucir de la siguiente manera:
var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});
var game = cc.Layer.extend({
  init:function () {
    this._super();
    var target = cc.Sprite.create("assets/target.png");
    this.addChild(target,0);
    target.setPosition(160,240);
  }
});
Hecho esto vamos a refrescar nuestro navegador para poder ver los cambios aplicados:


Como vemos ya nuestra imagen se muestra de forma completa en la pantalla de nuestro juego.

Remover la imagen


Ya que sabemos añadir una imagen es momento de aprender a quitarla, para ello nos vamos a apoyar en el método removeChild y con ello quitaremos el nodo hijo que contiene la imagen, pero no solo realizaremos esa acción vamos a aprovechar de cambiar el color del fondo de pantalla, con esto lograremos un efecto adicional y así utilizaremos otras técnicas de nuestro framework.

Para lograr este nuevo objetivo debemos trabajar nuevamente en el archivo gamescript.js, como podemos darnos cuenta es muy importante y el código que debemos tener en el mismo debe ser el siguiente:
var gameScene = cc.Scene.extend({
  onEnter:function () {
  this._super();
    var gameLayer = new game();
    gameLayer.init();
    this.addChild(gameLayer);
  }
});
var capaFondo;
var game = cc.Layer.extend({
  init:function () {
    this._super();
    capaFondo = cc.LayerColor.create(new cc.Color(40,40,40,255),320, 480);
		    this.addChild(capaFondo);
    var target = cc.Sprite.create("assets/target.png");
    capaFondo.addChild(target,0);
    target.setPosition(160,240);
    setTimeout(function(){
    capaFondo.removeChild(target);
    }, 3000);
  }
});
Este cambio es un poco más complejo pero vamos a explicar que se hizo. Empezamos por definir una variable llamada capaFondo y su nombre ya nos lleva a entender que significa, es el objeto de control del fondo de pantalla, le creamos un nuevo color dentro del objeto game y por último se la añadimos a nuestra imagen.

Al final de nuestro objeto creamos una función llamada setTimeout, esta lo que hace es invocar al método removeChild que habíamos mencionado al inicio, donde le pasamos nuestro objeto target que es quien lleva la imagen de los assets o recursos, adicionalmente le pasamos un segundo parámetro con un número 3000 que es la cantidad en mili-segundos para 3 segundos, al iniciar de nuevo nuestro juego veremos que el fondo del juego es diferente y que luego que la imagen aparece a los 3 segundos desaparece de la pantalla. Veamos como luce esto:


En el lado izquierdo vemos el estado inicial de nuestro juego, luego en el derecho como queda luego que transcurren los 3 segundos donde podemos ver que ya la imagen no está pero nuestro fondo sigue igual y con ello cumplimos el otro objetivo del tutorial que era remover imágenes.

Con esto hemos finalizado este tutorial, ya podemos hacer dos acciones muy importantes, agregar y remover imágenes de nuestro juego, con ello podemos empezar a construir una base gráfica que acompañe a la jugabilidad de nuestra aplicación. Por supuesto las imágenes deben tener estándares de calidad alto y ser diseñadas para videojuegos, pero si estamos apenas empezando no debemos preocuparnos por eso, simplemente hay que practicar y entender cómo debe funcionar nuestra lógica, una vez que logremos eso el embellecimiento del juego será un trabajo mucho más sencillo.

¿Te ayudó este Tutorial?


1 Comentarios


Vega Ortiz
abr 25 2015 21:33

Genial entrada a Coco´s ;)

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X