Haciendo juegos con Html5

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:

Declaramos nuestra variable.

var particulas;

Creamos nuestra funcion create:

    function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = 0x114799;
    particulas = game.add.emitter(0, 0, 100);
    particulas.makeParticles('_diamante');
   particulas.gravity = 200;
   game.input.onDown.add(genera, this);
}

Aqui iniciamos nuestro sistemas de fisica esta parte es algo que estare explicando de manera mas detallada en futuras entradas. Luego le colocamos un poco de color a nuestro canvas, aquí también se puede escribir el color en formato hexadecimal #ff0000 que seria rojo,lo hacemos mediante la clase Phaser.Stage y su propiedad backgroundColor ,esta clase controla todo lo que se esta mostrando en nuestro canvas también controla si dejamos de enfocar nuestro juego, si lo estamos escalando, lo pausamos o necesita cambiar la orientación en caso de los smartphones,etc. Inicializamos nuestra variable partículas, como necesitamos agregar partículas a nuestro juego entonces agregamos un emitter digamos que es un “emisor” de partículas lo hacemos:

 
particulas = game.add.emitter(0, 0, 100);

Este método recibe tres parámetros su posición en X y en Y , la cantidad máxima de partículas que deseas que se generen. Mediante la variable partículas accedemos a la clase Phaser.Arcade.Particles.Emitter y llamamos al método makeParticles(“palabra clave de nuestra imagen”) con esto le indicamos que usar para crear nuestras partículas. Como iniciamos nuestro sistema de física ahora nuestra particula puede tener gravedad en este caso positiva en y que la hace caer; Como vimos en como agregar eventos con phaser aprendimos como se crea una señal para un evento del mouse pero en esa oportunidad solo afectaba al sprite, esta vez queremos que en cualquier posición de nuestro canvas se reconozca el click:

 
game.input.onDown.add(genera, this);

Si recuerdas el primer tutorial mi primer juego con phaser explique que hacia esto:

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo', { preload: preload, create: create });

La clase Phaser.Game es donde todo ocurre, accede a todo las funciones , procesos, habidos y por haber en Phaser, entonces llamamos directamente a la clase Phaser.Input y creamos una señal, agregamos la función que será llamada cada que se genere el evento y el contexto que normalmente es “this” que apunta a los objetos con los que estamos trabajando. Ahora creamos nuestra función genera:

function genera(punto) {
    particulas.x = punto.x;
    particulas.y = punto.y;
    particulas.start(true, 2000, null, 10);
};

Nuestra función puede recibir parámetros que aputan a la clase Phaser.Input donde se controla todos los tipos de Input en Phaser esto es todo lo que se refiere posicion del mouse o de un evento touch, con esto podemos acceder a la posición exacta en donde presionemos click , estos valores serán la nueva posición de las partículas en sus respectivo ejes y llamamos por ultimo:

 
particulas.start(true, 2000, null, 10);  

El metodo start(explosion,tiempo,tiempo en aparecer,cantidad); es el responsable de hacer nuestras partículas y recibe cuatro parámetros:
 1. si es "true" todas la particulas seran lanzadas de una vez de lo contrario una por una.
 2. La duracion de vida de la particula en este caso 2000 ms es decir 2 segundos.
  3. No interfiere siempre y cuando el primer parametro sea true.
 4. La cantidad de particulas que deseamos que aparezcan.
 Asi logramos que al presionar click se generen diez particulas Hasta la Proxima.