Multiple collision layers on a tileset

[BenClarkson]

Hi! I am working on a game with kids from the inner city in one of the most dangerous neighborhoods in Canada.

I am trying to integrate multiple layers from tiles to control behavior of different sprite classes (like enemies) that have their own collision tiles separate from the player tiles. 

I cannot actually figure out how to make the physics system recognize any layer but the player's layer. I've been able to get around it before with some tile classes but now I feel I need the enemy to interact with the tilemap separately than the player. Below is some of my code.

Please help! The children are waiting!
 

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

   

 map.addTilesetImage('tiletile')

 layer = map.createLayer('tiles');

 

 this.enemyLayer = map.createLayer('enemyCollide');

 

 this.enemyLayer.resizeWorld();

 this.enemyLayer.debug = true;

   

 

 layer.resizeWorld();

 

 map.setCollisionBetween(1,20);

 

 

console.log(map.layers[2])

[druphoria]

I ran into this same problem recently and came across this answer from Richard Davey (see the first reply to this thread):

http://www.html5gamedevs.com/topic/1450-collision-tiled-multiple-layers/

 

Basically, it looks like multiple collision layers are not supported at this time.

[marvster]

Each layer can contain it's seperate collision information, each layer can contain different behaviour on collide.
But you have to check collision between sprite and [sprite|group|layer] within the update and you have to use a physical movement (with velocity) to trigger collision.
And you have to enable physics on the layer (and on each collidable object) before.

this.game.physics.arcade.enable(this.EnemyLayer);

update: function () {        this.game.physics.arcade.collide(this.player, this.EnemyLayer);        this.enemyGroup.forEach(function (enemy) {                this.game.physics.arcade.collide(this.player, enemy);                this.game.physics.arcade.collide(enemy, this.EnemyLayer);        }, this);}

 

[naveen]

my physics enabled sprite is passing through Tilemap layer tiles. How can I fix this?

please help..

[Heppell08]

Marvster is right

i had this issue before and got it answered too. Give the layer collision code because phaser only gives you the single layer to collide with. You can add the collision to the layer by enabling body, physics and collision the same as any other physical body you attempt to collide with.

[marvster]

my physics enabled sprite is passing through Tilemap layer tiles. How can I fix this?

please help..

Have a look at this (bit outdated, but still usable example):

http://tannhauser-gate.net/projects/games/tilemap-test/

Source: http://tannhauser-gate.net/projects/games/tilemap-test/js/test.js

[naveen]

It is side scroll-er platform game. Player jumps up and down.

When player jumps down with higher velocity, it is passing through tiles.

Please help in this.

 

code:

 

 this.layer = this.map.createLayer('Tile Layer 1');

 this.layer.enableBody = true;

 this.layer.resizeWorld();

 this.layer.debug = true;

 this.game.physics.arcade.enable(this.layer, Phaser.Physics.ARCADE, true);

 

in update function:

this.game.physics.arcade.collide(this.character, this.layer);

 

But, still it passing through tiles.

[Heppell08]

Resize the layer at the end.

[Heppell08]

this.layer = this.map.createLayer('Tile Layer 1');

this.layer.enableBody = true;

this.layer.debug = true;

this.game.physics.arcade.enable(this.layer, Phaser.Physics.ARCADE, true);

this.layer.resizeWorld(); //resize at the end

[marvster]

 

It is side scroll-er platform game. Player jumps up and down.

When player jumps down with higher velocity, it is passing through tiles.

Please help in this.

 

code:

 

 this.layer = this.map.createLayer('Tile Layer 1');

 this.layer.enableBody = true;

 this.layer.resizeWorld();

 this.layer.debug = true;

 this.game.physics.arcade.enable(this.layer, Phaser.Physics.ARCADE, true);

 

in update function:

this.game.physics.arcade.collide(this.character, this.layer);

 

But, still it passing through tiles.

 

You have to setCollision on this Layer, as you have to pass the information, which tiles of the layer will collide.

Check this for more information:

http://docs.phaser.io/Phaser.Tilemap.html#setCollision

http://docs.phaser.io/Phaser.Tilemap.html#setCollisionBetween

http://docs.phaser.io/Phaser.Tilemap.html#setCollisionByExclusion

[Heppell08]

Here is a function i use in my game for multi levels but has all the relevant logic you would require.

createMap: function () {var gameSave = JSON.parse(localStorage.getItem('user'));if (gameSave){console.log('LOADED!!');mapnumber = gameSave.mapnumber - 1.5;console.log(JSON.parse(localStorage.getItem('user')));}elseif (mapnumber === 0){mapnumber = 1.5;}mapnumber -= 0.5;if (mapnumber === 1) {map = this.add.tilemap('level01');map.addTilesetImage('Space', 'tiles');layer = map.createLayer('Space');layer.resizeWorld();this.setGravs();currentLevelX = 60;currentLevelY = 480;mapnumber = 2.5;}if (mapnumber === 2) {map = this.add.tilemap('level02');map.addTilesetImage('Space02', 'tiles');layer = map.createLayer('Space02');layer.resizeWorld();this.setGravs();currentLevelX = 61;currentLevelY = 391;mapnumber = 3.5;}if (mapnumber === 3) {map = this.add.tilemap('level03');map.addTilesetImage('Space03', 'tiles');layer = map.createLayer('Space03');layer.resizeWorld();this.setGravs();currentLevelX = 130;currentLevelY = 710;mapnumber = 4.5;}if (mapnumber === 4) {map = this.add.tilemap('level04');map.addTilesetImage('Space04', 'tiles');layer = map.createLayer('Space04');layer.resizeWorld();this.setGravs();currentLevelX = 150;currentLevelY = 450mapnumber = 5.5;}if (mapnumber === 5) {map = this.add.tilemap('level05');map.addTilesetImage('Space05', 'tiles');layer = map.createLayer('Space05');layer.resizeWorld();this.setGravs();mapnumber = 6.5;currentLevelX = 125;currentLevelY = 3603;}if (mapnumber === 20) {this.game.state.start('Cutscene1'); // currently broken}if (mapnumber === 6) {map = this.add.tilemap('level06');map.addTilesetImage('Space06', 'tiles');layer = map.createLayer('Space06');layer.resizeWorld();this.setGravs();mapnumber = 7.5;currentLevelX = 120;currentLevelY = 660;}if (mapnumber === 7) {map = this.add.tilemap('level07');map.addTilesetImage('Space07', 'tiles');layer = map.createLayer('Space07');layer.resizeWorld();this.setGravs();mapnumber = 8.5;currentLevelX = 120;currentLevelY = 660;}if (mapnumber === 8) {map = this.add.tilemap('level08');map.addTilesetImage('Space08', 'tiles');layer = map.createLayer('Space08');layer.resizeWorld();this.setGravs();mapnumber = 8.5;currentLevelX = 120;currentLevelY = 660;}if (mapnumber === 99) {this.game.state.start('Endscene');}map.setCollisionBetween(211, 217);map.setCollisionBetween(246, 252);map.setCollisionBetween(71, 72);map.setCollisionBetween(106, 107);map.setCollisionBetween(141, 142);map.setCollisionBetween(176, 177);map.setCollision(143);map.setCollisionBetween(178, 179);map.setCollisionBetween(146, 148);map.setCollisionBetween(334, 336);map.setCollisionBetween(369, 372);map.setCollisionBetween(181, 182);map.setCollision(301);map.setCollision(299);map.setTileIndexCallback([168, 2], tileFunc4.playerReset, this);map.setTileIndexCallback(69, tileFunc5.mapChange, this);this.setPlayer();},

Inside that function there is map collisions and tilefunctions as welll as a few other code snips that are irrelevant but i didnt edit lol.

But if you look at the way the map is made and the collision is set then you should be fine