Haciendo juegos con Html5

Como Colisionar Particulas en Phaser 

En esta ocasion veamos como colisionar particulas usando fisica y creando una reaccion despues de dicha colision. 

Las particulas en Phaser heredan propiedades y metodos de la clase Sprite asi que podemos acceder a metodos del sistema de fisica directamente. 




Usando los metodos propios de las particulas lo cual nos hace la tarea mas sencilla.

 Comenzemos: 

Creamos nuestras variables y una nueva instancia de Phaser.Game: 

var game =new Phaser.Game(500, 500, Phaser.AUTO, 'caja', { 

preload: preload, create: create, update: update }), 

particulaDer, particulaIzq;

Cargamos las imagenes a utilizar en nuestra funcion Preload: 

function preload() {
    game.load.spritesheet('diamante', 'diamantes.png', 64, 64);
};

En la funcion Create tenemos: 

function create() {
    particulasIzq = game.add.emitter(50, game.world.centerY - 200);
   particulasIzq.bounce.setTo(0.5, 0.5);
    particulasIzq.setXSpeed(100, 200);
    particulasIzq.setYSpeed(-50, 50);
    particulasIzq.makeParticles('diamante', 0, 200, 10, true);

    particulasDer = game.add.emitter(game.world.width - 50, game.world.centerY - 200);
    particulasDer.bounce.setTo(0.5, 0.5);
    particulasDer.setXSpeed(-100, -200);
    particulasDer.setYSpeed(-50, 50);
    particulasDer.makeParticles('diamante', 1, 200, 10, true);

    // explode, lifespan, frequency, quantity
    particulasIzq.start(false, 5000,10);
    particulasDer.start(false, 5000, 10);
}

En el tutorial como crear particulas vimos algunos de estos metodos necesarios para agregar particulas, aqui agregamos las particulas iniciales con game.add.emitter, queremos que reboten pero no mucho asi que usamos bounce.setTo(0.5,0.5); (al rebote le coloca el 50%). 

Para dar velocidad en sus ejes usamos el metodo setXSpeed(x,y), SetYSpeed(x,y) ,y para crear las particulas usamos el metodo makeParticles(key,frame,cantidad,colisiona con el mundo?).

Para terminar damos la orden que comienzen a generarse las particulas con el metodo start(explosion?,vida de las particulas ,cantidad). 

 En la funcion update generamos la reaccion: 

function update() {
    game.physics.arcade.collide(particulasIzq, particulasDer, cambio, null, this);
}

Aqui hacemos que las particulas choquen entre ellas y de ser asi llamamos a la funcion cambio donde cambiaremos de color las particulas aunque tambien podriamos modificar velocidad,angulos entre otras propiedades. 

La funcion cambio quedaria asi: 

function cambio(a, b) {
    a.frame = 3;
    b.frame = 3;
}

En esta funcion recibimos como parametros los objetos que colisionan como esta imagen que cargamos es un spritesheet en el cual tenemos varios objetos(imagenes) con diferentes colores en diferentes partes(frames) entonces solo es cuestion de modificar el valor de dicha frame para asi acceder a otro objeto en nuestra imagen. 

Asi conseguimos cada vez que colisionen cambien el color pero solo cuando colisionan con otra particula mas no con el cuadro(canvas) que lo rodea ademas cada que colisionan salen disparadas en direcciones contrarias tal como deberia ser una colision. 

Resultado:
 
Hasta la proxima!!!