En este tutorial veremos como implementar colisiones de objetos con P2, el motor de física más avanzado disponible para Phaser. En primer lugar necesitamos los objetos, en mi caso voy a usar este cohete:
La interfaz es muy sencilla. Arrastramos las imágenes de las que queramos generar colisiones a la izquierda. Ahora para generar los bordes usamos la varita mágica. Modificamos el valor de Tolerancia para que el número de vértices sea el menor posible pero aun así coja bien la forma.
Si el trazado automático no funcionase puedes añadir polígonos y círculos así como añadir o eliminar vértices. Cuando ya tenemos la figura vamos a la derecha en Exporter y seleccionamos Phaser (P2). Y pulsamos Publish. Ese archivo JSON contendrá las formas para las colisiones de todos las imágenes cargadas en la columna de la izquierda (en nuestro caso solo contará con una entrada, "cohete").
Ahora vamos a cargar el cohete con sus físicas.
var game = new Phaser.Game(480,320,Phaser.CANVAS,"",{preload: preload, create: create, update: update});
function preload(){
game.load.image("cohete","cohete.png");
game.load.physics("fisica","fisica.json");
}
function create(){
game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.gravity.y = 1000;
var cohete = game.add.sprite(100,100,"cohete");
game.physics.p2.enable(cohete);
cohete.body.clearShapes();
cohete.body.loadPolygon("fisica","cohete");
}
function update(){
}
</code></pre>
Los objetos P2 colisionan solamente entre ellos. Si quieres tener un objeto P2 estático debes ponerlo como static.
cohete.body.static = true;
Puede ajustar algunas propiedades de los cuerpos como la masa:
cohete.body.mass = 50;