Usando mapas de Tiled en Phaser

Retomamos el tutorial de Tiled. Deberíamos tener ya un mapa de Tiled con dos capas (Paredes y Suelo), una con el atributo pasable en desactivado y en otro no.

Vamos a Tiled y exportamos el archivo en formato JSON (CSV también nos valdría pero no lo he probado).

Cargando el tilemap y el tileset

En la función preload cargamos el JSON con la descripción del mapa (tilemap) y las imágenes que usa el mapa (tileset). Es muy parecido a como vimos en Iniciar Phaser.js.

function preload(){
    game.load.tilemap("Mapa","Mapa.json",null,Phaser.Tilemap.TILED_JSON);
    game.load.image("Tileset-1","Wall.png");

Ahora creamos los objetos en pantalla dentro de la función create.

var map, paredes, suelo;

function create(){
    map = game.add.tilemap("Mapa");
    map.addTilesetImage("Wall","Tileset-1"); // El nombre Wall hace referencia a como se llama el tileset en Tiled
    suelo = map.createLayer("Suelo"); // El nombre hace referencia a como se llama la capa en Tiled
    paredes = map.createLayer("Paredes");
}
</code></pre>
Es importante usar los nombres que hemos usado en Tiled previamente. Además, el orden en que llamemos a createLayer importa, ya que no tiene en cuenta el orden de las capas que hubiese en Tiled.


Colisiones
Vamos ahora a hacer que las paredes sean objetos no atravesables, mientras que el suelo sí lo sea. Para gestionar las físicas vamos a usar Arcade Physics aunque con P2 es parecido.


var map, suelo, paredes, player;

function create(){
    game.physics.startSystem(Phaser.Physics.ARCADE);
map = game.add.tilemap("Mapa");
map.addTilesetImage("Wall","Mapa-TileImage");
suelo = map.createLayer("Suelo");
paredes = map.createLayer("Paredes");

console.log("Paredes es pasable?: "+paredes.layer.properties.pasable);

map.setCollisionBetween(1,10000,true,paredes);

suelo.resizeWorld();
paredes.resizeWorld();

... crear player y activar arcade physics en él...
player = game.add.sprite(100,100,"player");
game.physics.arcade.enable(player);

}
function update(){
    game.physics.arcade.collide(paredes,player);
}
</code></pre>
En la función create he usado la propiedad que definimos en Tiled como pasable. En realidad lo pongo como ejemplo para que se vea como es posible definir atributos arbitrarios en Tiled y acceder a ellos desde Phaser.



La función setCollisionBetween se encarga de que todos cuadrados de la capa paredes se vuelvan infranqueables. Posteriormente en update hacemos la comprobación de física con cada cuerpos ajeno al tilemap que lo necesite, habitualmente el jugador.