Haciendo juegos con Html5

Agregando imagenes y efectos en Phaser.

Despues de haber terminado nuestro primer juego html5 con phaser aprendimos lo básico para empezar pero probablemente en nuestro juego queremos agregar imágenes, efectos y eso es lo que vamos a aprender en esta ocasión.

Todo lo que utilizaremos en este tutorial son imágenes básicas que hice en Inkscape

recuerda iniciar Wamp Sever y probarlo localmente, presiona click derecho seleccionas "guardar como" abrimos  el script en nuestro editor de texto y estamos listos.

Trabajar con imágenes en Phaser es muy sencillo, antes de agregar una imagen necesitamos cargarla y para esto tenemos la función Preload  el cual es el lugar indicado para hacerlo, a continuación tenemos: 

function preload () {
game.load.image("fondo","fondo.png");
game.load.image("edificios","edificios.png");
};

Mediante game.load accedemos a la clase Phaser.loader la cual  es la encargada de gestionar nuestro archivos y como en esta oportunidad necesitamos una imagen usamos el método image(“nombre clave” “ruta de la imagen”).

Este método recibe dos parámetros básicos  en primer lugar una “key” esto es un nombre clave para especificar el nombre de nuestros archivos y asi poder usarlo luego, el segundo parámetro es la ruta de nuestro archivo como  nuestra imagen se encuentra en la misma carpeta de el archivo html solo es cuestión de escribir el nombre del archivo con su respectiva extensión.

Ahora ya tenemos nuestros archivos cargados y listos para agregarlos y hacer que aparezcan en pantalla, tenemos dos variables declaradas, _fondo, _edificios las cuales inicializaremos en la función create.

function create(){
_fondo = game.add.image(0,0,"fondo");
_edificios = game.add.tileSprite(0,160,500,400,"edificios");
_edificios.autoScroll(-150,0);
}; 

Como aprendimos en el tutorial mi primer juego , para agregar objetos (imágenes,sonidos) usamos game.add, necesitamos agregar un fondo esto es una imagen que normalmente no necesita efectos u otra cosa aunque si podemos rotar o usar eventos del mouse, usamos:

game.add.image(posicionX,posicionY,”nombre clave”)

Los dos primeros parámetros son la posición en X y en Y, las coordenadas (0,0) en canvas apuntan a la esquina superior izquierda, como nuestra imagen y el canvas son del mismo tamaño y queremos que la imagen abarque todo el cuadro la ubicamos en  posición (x:0,y:0),  el siguiente parámetro es el nombre que le colocamos cuando cargamos la imagen.

Para hacer la cosa mas interesante agregaremos un pequeño efecto horizontal (scroll) utilizado en muchos juegos  uno de los mas nombrados por estos días el popular Flappy Bird, tambien se puede hacer vertical como en mi juego Archaic Roll,  hacer esto en phaser es sencillo:

_edificios = game.add.tileSprite(0,160,500,400,"edificios");
_edificios.autoScroll(-150,0);

Agregamos un tileSprite esto es una textura que se repite infinitamente, este método recibe 5 parametros en este orden: posición en X y Y, ancho ,alto, nombre clave, para dar un poco de movimiento la clase Phaser.tileSprite tiene un método llamado autoScroll(velocidad X , velocidad Y) que se inicia automáticamente y su dirección será hacia la izquierda por el valor negativo que pasamos al metodo. Felicidades con esto hemos conseguido un efecto genial que podemos implementar en nuestros juegos  para dar un toque muy profesional Hasta la próxima.