Jump to content

Unable to Enable Collision In Tilemap


Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


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.

Link to comment
Share on other sites

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!  :D

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...