Phaser tilemap collisions!

[Lomaz]

Hey, so I am relatively new to Phaser and Tiled, I am trying to set up a map, and I have tried with both two tile layers and one tile, one object layer and I can't seem to get things to work..

 

I am simply trying to get my player sprite to interact with the walls using P2 physics.  I have tried basically mimicking the phaser examples around the web, but having no luck (so I kinda feel like it is an issue with the Json i generated with Tiler.. my code looks something like this.

 

game.stage.backgroundColor = '#787878';

map = game.add.tilemap('tilemap');

map.addTilesetImage('all', 'tiles');

layer = map.createLayer('floor');

layer2 = map.createLayer('walls');

layer.resizeWorld();

 

this.game.physics.startSystem(Phaser.Physics.P2JS);

this.game.physics.p2.setImpactEvents(true);

 

var playerCG = game.physics.p2.createCollisionGroup();

 var wallsCG =  game.physics.p2.createCollisionGroup();

 var walls = game.physics.p2.convertCollisionObjects(map, "walls", true);   

 for(var wall in walls)

 {

walls[wall].setCollisionGroup(wallsCG);

walls[wall].collides(playerCG);

walls[wall].debug = true;

 }

this.game.physics.startSystem(Phaser.Physics.P2JS);

this.game.physics.p2.setImpactEvents(true);

//var walls = game.physics.p2.createCollisionGroup()

//var playerCG = game.physics.p2.createCollisionGroup()

this.player = game.add.sprite(500, 500, 'walker');

this.player.animations.add('walk');

this.game.physics.p2.enable(this.player);

this.player.anchor.set(0.5, 0.5);

console.log(this.player.anchor);

this.player.body.mass = 100;

this.player.name = "bob!";

this.player.body.debug = true;

this.player.body.setCollisionGroup(playerCG);

this.player.body.collides(wallsCG);

//this.player.body.collides(brickCollisionGroup);

this.game.camera.follow(this.player);

//map.setCollisionBetween(1, 10000, true, walls);

 

I know this really needs to be cleaned up, it's really messy just from grabbing different code examples.  Ideas?

[kctang]

Hi,

 

You need to set which tiles to collide before calling convertTilemap(). Quote from the docs:

 

Goes through all tiles in the given Tilemap and TilemapLayer and converts those set to collide into physics bodies. Only call this after you have specified all of the tiles you wish to collide with calls like Tilemap.setCollisionBetween, etc. Every time you call this method it will destroy any previously created bodies and remove them from the world. Therefore understand it's a very expensive operation and not to be done in a core game update loop.

 

 

Good luck! ;-)

 

[Lomaz]

Does this work with object layers? or just tiles?

[xerver]

@Lomaz convertTilemap works with just tiles, not object layers. Checkout phaser-tiled which adds advanced Tiled Editor support including creating collisions from objects.

[Lomaz]

Tried with that, still not getting it to work, swiched it back to a tile layer I want to collide with, and again, no luck

game.stage.backgroundColor = '#787878';

map = game.add.tilemap('tilemap');

map.addTilesetImage('all', 'tiles');

layer = map.createLayer('floor');

layer2 = map.createLayer('walls');

layer2.debug = true;

layer.resizeWorld();

map.setCollisionBetween(1, 99);

this.game.physics.startSystem(Phaser.Physics.P2JS);

this.game.physics.p2.setImpactEvents(true);

var tilesCollisionGroup   = this.game.physics.p2.createCollisionGroup();

var playerCollisionGroup  = this.game.physics.p2.createCollisionGroup();

var tileObjects = game.physics.p2.convertTilemap(map, layer2);

console.log(tileObjects);

 

For some reason tileObjects is still empty =/

 

Ideas?

[xerver]

Tried with that, still not getting it to work, swiched it back to a tile layer I want to collide with, and again, no luck

game.stage.backgroundColor = '#787878';

map = game.add.tilemap('tilemap');

map.addTilesetImage('all', 'tiles');

layer = map.createLayer('floor');

layer2 = map.createLayer('walls');

layer2.debug = true;

layer.resizeWorld();

map.setCollisionBetween(1, 99);

this.game.physics.startSystem(Phaser.Physics.P2JS);

this.game.physics.p2.setImpactEvents(true);

var tilesCollisionGroup   = this.game.physics.p2.createCollisionGroup();

var playerCollisionGroup  = this.game.physics.p2.createCollisionGroup();

var tileObjects = game.physics.p2.convertTilemap(map, layer2);

console.log(tileObjects);

 

For some reason tileObjects is still empty =/

 

Ideas?

Use code tags for your code so I can read it

Also none of the code you posted is using the tiled plugin...