Partículas en Phaser

En esta entrada vamos a ver como usar partículas en Phaser. Para ilustrarlo intentaremos construir un fluido.

El concepto de partícula

Para construir nuestro fluido vamos a usar partículas. ¿Qué son las partículas? Podemos entenderlo como pelotillas o puntos, cada una independiente del resto de las demás partículas pero que se usan de forma combinada para generar formas. Las partículas se pueden usar para generar fuegos artificiales, fluidos, humo, lluvia, etc

En el caso del agua es fácil de entender. Podemos asimilarlo a la realidad donde el agua contenida en una copa está formada por moléculas de H2O.

El sistema de partículas en Phaser

Phaser cuenta con un sistema de partículas, que usa Arcade Physics como motor de física. Es interesante usar un sistema de partículas siempre que sea posible pues normalmente ya están optimizados para trabajar con grandes cantidades de objetos. Usando Arcade Physics tendremos varios problemas y no es 100% válido para fluidos (si lo es, por ejemplo, para explosiones y fuegos artificiales). En otro post veremos como diseñar fluidos de forma más completa usando otro motor de físicas.

En el sistema de partículas de Phaser hay dos clases importantes: Emitter y Particle. Estas dos clases son las que usaremos. La clase Particle derive de Sprite por lo que todo lo que podías hacer con un sprite lo puedes hacer con un Particle. Por su parte Emitter es el emisor de partículas. Tiene una posición en la pantalla y es invisible pero de él salen todas las partículas.

Simples pelotas

Vamos a hacer un programa que suelte pelotas naranjas. El código es el siguiente:

var game = new Phaser.Game(800,600,Phaser.CANVAS,"particulas",{preload: preload, create: create, update: update});

var emitter;
function preload(){
    game.load.spritesheet("pelota","pelota.png",16,16);
}
function create(){
    emitter = game.add.emitter(64,64,400);
    emitter.makeParticles("pelota",0,400,true,true);
    emitter.setXSpeed(-64,64);
    emitter.setYSpeed(-10,10);
    emitter.gravity = 1000;
    emitter.bounce.setTo(1,0.7);
emitter.start(false,0,10);

}
function update(){
    game.physics.arcade.collide(emitter);
}
</code></pre>




Veamos el código. En la función create añadimos un Emitter en la posición 64,64. Indicamos que emitirá como máximo 400 elementos. Posteriormente pasamos a crear las partículas, usamos la imagen pelota, generamos 400 y activamos las colisiones tanto con otras partículas como con los bordes de la pantalla.



A continuación unos ajustes con los que podemos jugar hasta que demos con los que nos gusten. La velocidad en X y en Y se refiere a la velocidad mínima y máxima que pueden tener las partículas al salir. Phaser aleatoriamente les dará velocidades dentro del rango. La gravedad que afecta a las partículas y por último el rebote, indicando un rebote para el eje X y otro para el eje Y. Un rebote de 1 quiere decir que no pierde velocidad al chocar con otra partícula en ese eje.



Finalmente podemos arrancar con start. El primer argumento sirve para indicar si va a ser una explosión (todas las partículas de golpe) o no. El segundo argumento indica cuanto tiempo van a mantenerse en pantalla las partículas, un valor de 0 hace que duren para siempre. Por último, indicamos en milisegundos cada cuanto queremos que salga una partícula nueva.



En la función update llamamos a Arcade Physics para que compruebe las colisiones de las partículas y las separe.



Si ahora pruebas a aumentar el número de partículas mientras las sigues haciendo más pequeñas conseguirás un fluido cada vez más realista.