Unable to Enable Collision In Tilemap

[MishaShapo]

I can't seem to enable collisions between my player Sprite and my TileMap. 

 

I followed all the examples, and I have the same set-up, and the TileMap even shows up, but nothing is colliding.

I've tried all the 'setCollision' methods from TileMap and nothing works.

 

Here is my TileMap set up ('this' is a game state):

 buildMaze : function() {    this.map = this.add.tilemap('level_02');    this.map.addTilesetImage('tile_set_2','floor',50,50);    this.layer = this.map.createLayer('Floor');        this.map.setCollisionByIndex([1,2,3,4,5],true,this.map.currentLayer,true);        this.map.setTileIndexCallback(3,function(){console.log('collide 3');},this);        this.layer.debug = true;    this.layer.resizeWorld();  }

And this is my player set up:

 

setUpPlayer : function() {    this.player = this.add.sprite(this.world.width/2-50, this.world.height/2, 'player');    this.player.anchor.set(0.5);    this.physics.enable(this.player,Phaser.Physics.ARCADE);    this.player.body.drag.set(1000,1000);    this.player.body.collideWorldBounds = true;  },

And I have this in update:

this.physics.arcade.collide(this.player, this.map.currentLayer);

Then, I proceeded to use 'layer.debug = true' and this is the image that came up:

 

 

 

 

I have tried using the Intel XDK IDE and Brackets. Both yield the same result.

 

Does anyone know why my Tilemap won't collide with my player Sprite?

[drhayes]

That all looks right to me. The only thing that seems weird is you bounce between "this.layer" and "this.map.currentLayer" a lot. Maybe use "this.layer" the whole time? I don't think that's going to fix it since it looks like you really only have the one layer... I'm assuming your collision callback isn't ever called?

[MishaShapo]

Thank you for the recommendation. I did some more testing with an easier map (the black squares should be colliding), and I figured out that it seems that my layer is actually below what is being drawn. I have no idea what would cause this, but here is what it looks like:

 

The area in red is what my Tiled map looks like and the area in blue is what is collide-able. And what's even weirder is that this.world.height is the y-value of at the bottom red line, so it's as if the collide-able tilemap is outside the world bounds.

 

 

 

EDIT: I checked and the player sprite is only colliding with the red line because that is the world bounds. So it seems the tilemap doesn;t have a collision body even though when I debug the tilemap.collision index to the console, it outputs the right tile index.

[fariazz]

I'm not sure if the layer object you are creating here:

    this.layer = this.map.createLayer('Floor');

Is the same as what you can find when you browse inside your tilemap object:

this.map.layer.currentLayer

As @drhayes recommended, I would just use this.layer when setting collision and on update as well.

 

The only times when I browse inside of my tilemap objects like you are doing is when I need to find an Objects Layer and grab some object from there, but when working with tile layers I'd just use object you create with createLayer.

[drhayes]

Can you post this "live" somewhere so we can see the code?

[MishaShapo]

Well, I took both of your advice and it works! Mind you, I also went back through and

• In Tiled, I created separate layers for my non-collide-able and collide-able tiles.
• I went from using 50x50 pixel tiles to the more standard 32x32 pixel tiles.

 

This is my final code for generating the tilemap:

 

buildMaze : function() {    this.map = this.add.tilemap('level_04');    this.map.addTilesetImage('blocks','blocks',32,32);    this.map.createLayer("Floor");    this.layer = this.map.createLayer('Barrier');    this.map.setCollision(1,true,this.layer);    this.layer.resizeWorld();  }

And this is what I have for my update method:

this.physics.arcade.collide(this.player, this.layer);

Thanks to both of you, drhayes and fariazz!