Haciendo animaciones con Phaser

 Nuestros juegos siempre debemos pulirlos llevándolos a su máxima expresión, Phaser nos permite hacer animaciones fluidas gracias a algo llamado Tween , muy usado por muchas librerías de juegos ya que permiten efectos muy llamativos. Existen variedad de métodos Easing como me gusta traducir literalmente seria métodos de suavizado pero digamos que son métodos para pulir, esto nos ayuda a definir curvas movimientos autónomos, predefinidos.
 Comenzemos:

Usando el teclado con Phaser.

Ya vimos algo básico sobre eventos del mouse ahora vamos a explorar un poco con nuestro teclado, usaremos las teclas mas comunes me refiero a las direccionales y otras complementarias usadas muy seguido en juegos de plataformas, disparos me refiero a nuestra barra esparceadora.

Información de nuestros objetos en Phaser.

Una de las características de Phaser utiles al momento de desarrollar nuestro proyecto es observar la información sobre los objetos que tenemos en pantalla, esto nos permite saber exactamente tanto la información mas básica hasta la mas avanzada de nuestro sprites,etc.

Pero en que nos puede ayudar?

En todo si estamos utilizando algún sistema de física y en algún momento determinado los cuerpos no colsionan esto nos ayudara a identificar rápidamente el problema, si necesitas ver los limites del sprite, conocer su velocidad, posición ,angulo, son muchas posibilidades.

Graficos gratis para juegos

En nuestros juegos no todo es programación, casi siempre unos buenos graficos le dan mas vida y atención a nuestras creaciones , como no todo las personas son muy buenas en temas de diseño siempre esta la opción de buscar en la web y encontrarnos con personas que permiten usar sus pequeñas obras de arte en nuestros proyectos sean comerciales o no, claro no esta de mas colocar y dar el crédito a sus creadores.

Para mis ejemplos uso graficos tomados de un pack creado por Kenney y la verdad son de muy buena calidad, los hay de todo tipo si quieres hacer un juegos de plataforma, puzzle, y con un poco de imaginación crear nuevas mecanicas.

Crear particulas con Phaser

Seguimos conociendo a nuestro amigo Phaser, en juegos donde hay disparos , destrucción véase Angry Birds, etc. Cuando se produce un contacto entre dos objetos vemos generarse un monton de partículas ya sea de humo , piedras, luces y esto da un efecto muy cool, en esta oportunidad aprenderemos a crear un efecto similar.

Empezemos:

Agarrando nuestros objetos en Phaser.

En html5 podemos hacer lo que conocemos como hacer drag, que consiste en agarrar a nuestro sprite con el puntero del mouse o en smartphones mediante un evento touch y phaser lo realiza de una forma muy sencilla. Cuando aprendimos a agregar eventos del mouse conocimos propiedades importantes sobre los eventos del mouse y como hacer que nuestro sprite los reconozca, en esta ocasión solo con un nuevo método podemos lograr el objetivo de este tutorial.

Empezemos:

Agregar un sprite a un grupo en Phaser.

En la anterior entrada vimos como agregar varias imágenes, pero en nuestros juegos en html5 tener muchos objetos que ya no se estén usando sin control alguno puede traernos problemas de performance, para eso necesitamos mas control sobre los objetos que agregamos en pantalla.Esto normalmente lo hacemos creando un array donde meteríamos objetos a eliminar , estos serian aquellos que ya no estén visible en pantalla o sean destruidos y asi poder controlar el uso de recursos.
 En phaser esto lo hacemos creando grupos , Phaser.Group es una de la partes mas importante del nucleo de este framework, y gracias a esto podemos hacer un uso adecuado de nuestros sprites si necesitamos reciclar objetos, un grupo es lo que necesitamos pero de eso hablare en próximas entradas. Por ahora veamos como crear un grupo y agregar cosas a el.

Agregando muchas Imagenes en Phaser

En esta oprtunidad aprenderemos como agregar cierta cantidad de sprites y en lugares diferentes de la pantalla,empezemos:
Tenemos nuestras variables declaradas :
_alien: nuestro sprite.
 Contador: cada cuanto aparece un nuevo sprite
Cantidad:cuantos sprite queremos que aparezcan.
Cargamos nuestra imagen:

 function preload(){
 game.load.image("extra",'alien.png');
 };

Llamamos a la función creaSprite.

function create(){
 creaSprite();
};

Creamos la función responsable de gestionar nuestros sprites.

function creaSprite(){
_alien=game.add.sprite(game.world.randomX,(Math.random()*400),'extra');
_alien.angle = game.rnd.angle();
cantidad-=1;
contador = game.time.now + 200;
}; 

Agregando eventos del mouse en Phaser

En este tutorial aprenderemos a agregar eventos del mouse en phaser y comprobaremos una vez mas lo sencillo que nos hace todo, para esto aplicaremos conceptos vistos y conoceremos unos nuevos. Declaramos tres variables: 
Bloque: nuestra imagen.
Texto:la string que agregaremos.
Contador: Inicializada en cero,será actualizada cada vez que se presione click.
A todas nuestras imágenes podemos activarles unas serie de eventos, en esta oportunidad será un evento del mouse que se activara cuando hagamos click sobre ella, entonces veamos el código:

bloque = game.add.image(game.world.centerX, game.world.centerY,"_bonus");
bloque.anchor.set(0.5);
bloque.inputEnabled = true; 
bloque.events.onInputDown.add(actualiza, this);
texto=game.add.text(game.world.centerX, game.world.centerY-100,contador+'',
{ fill:'#ccffcc'});  

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");
};

Juego con Html5 y Phaser "Archaic Roll"

Este es mi videojuego creado con el framework Phaser insipirado por el juego llamado Rapid Roll.

Como hacer un juego con Phaser "El Codigo"

En la entrada anterior mi primer juego en html5 "holamundo" mostre el resultado de lo que conseguiremos, para ver el codigo solo es cuestión de presionar click izquierdo y seleccionar "ver codigo fuente de la pagina", puedes seleccionar esto y abrir tu editor de preferencia en mi caso notepad ++, crear un nuevo documento , pegar el codigo y guardarlo con extensión .html. 

Esto es algo básico una  estructura en html con sus etiquetas básicas <html>,<head>,<body>,<script> dentro de la etiqueta <head> tenemos la etiqueta <meta> donde colocamos el tipo de codificación para nuestro documento, un ejemplo rápido para demostrar para que sirve esto si presionas ctrl+mayus+j en el navegador se desplegara la consola de javascript aqui puedes la versión de Phaser y algunos corazones intenta quitar esta línea y nota que pasa, también tenemos la etiqueta <title> como lo indica es el titulo que tendrá nuestra pagina esta aparece en la parte superior de la pestaña de nuestro navegador, la etiqueta <script> con su atributo src aquí especificamos la ruta de nuestro archivo minificado que esta en la misma carpeta junto a nuestro archivo Html.

         Como hacer un juego en Html5 con              Phaser "Hola Mundo"

Configurado el servidor viene el siguiente paso, si no tienes mucha experiencia con Html5 ni haciendo juegos no te preocupes phaser nos hace la vida muy fácil en ese sentido, solo es cuestión de aprender cómo funciona sus componentes más básicos y tener algo de conocimiento sobre que es javascript, ya después entraremos en temas más específicos y complejos pero lo más importante es tener bien claro los conceptos esenciales.

Como es tradición en programación nuestra primera incursión será hacer el muy conocido “Hola Mundo”, lo primero que necesitamos es entrar en la página oficial de phaser y procedemos a descargar la última versión del framework, obtendremos un archivo llamada phaser-master lo descomprimimos, y estaríamos aquí