Collision not working on tilemap imported from Tiled

Hi all

I am trying to get collisions working for my Tiled imported tilemap. Here are the steps I have taken so far:

  1. Created a tileset in Tiled
  2. Added a custom boolean property called “collides” set to true on the collidable tiles in the tileset
  3. Created a tilemap (with the tileset embedded in the map) in Tiled and populated it with the tileset
  4. Created separate Tile Layers, with a layer called Solid for collidable tiles only
  5. Exported the tilemap as json
  6. Put the tileset in a separate tilemap, so that I could export the tileset as an image.

After all this, I can successfully read in the tilemap and tileset into my game and everything looks good. I can even read in each of the Tile Layers created in Tiled with success.

However, the issue comes when I try to make the player collide with the tiles in the Solid layer. Here is how I attempt to do so:

this.map = this.make.tilemap( {key: settings.mapKey} );

this.tileset = this.map.addTilesetImage(settings.tiledTilesetKey, settings.phaserTilesetKey);

this.solidLayer = this.map.createLayer('Solid', this.tileset, 0, 0);

this.physics.add.collider(this.player, this.solidLayer);

this.solidLayer.setCollisionByProperty({collides: true});

In all the examples I have seen online, this code should make the player collide with the tiles with the collides property set to true. In the json file that my tilemap is referencing, I can see that the collides property is in fact being read in and for the correct tiles. I have even tried manually setting the collision tiles with this.solidLayer.setCollision([927, 928]), as I can see from the json that those tiles have the collides set to true. However, this still does not work.

In debugger mode there aren’t even any hitboxes being created anywhere on the Solid layer tiles.

Any help would be appreciated.

Add

this.solidLayer.renderDebug(this.add.graphics());

after setCollisionByProperty() etc. Colliding tiles should show orange borders.

Does the player have a physics body (pink rect) and nonzero velocity (green line)?

1 Like

thanks for the reply samme

i added that line and i do see orange boxes around the correct tiles.

there is a pink box around the player, however no velocity line as i manually alter the player’s x and y positions based on keyboard input

As you can see below, the hitboxes look like they are set up properly.

I wanted to make sure the layers were actually being read, so I changed the offset of the layer’s coords with this.solidLayer = this.map.createLayer('Solid', this.tileset, 25, 25), and confirmed that the layers are properly being read.

Below is be an example of collision working properly in my game, however this is with another gameobject. Here, the collision is registered when the pink boxes overlap.

Screen Shot 2022-05-13 at 6.43.21 PM

I have noticed that with the debug render, there is a sort of opaque filter over the tilemap layers and the player, however not the other gameobjects. Because of this I tried troubleshooting the z-index of the player and the layer, but that does not seem to change anything.

If you want true collisions with tiles then you need to change the player’s velocity, not position.

1 Like

okay i will try this and update

got it working! marking @samme’s last comment as solution.

the reason my player was not colliding was due to the fact that i was directly changing the player’s x and y positions. by instead using player.setVelocityX() and player.setVeloctyY(), the collisions began to work.

another issue i was having that convinced me that the issue was with the tilemap, was that my “overhead” layer was not actually appearing overhead of the player (i.e. the player was still in front of the overhead tiles, rather than the overhead tiles appearing in front of the player).

this was because i was reading in the layer correctly, but setting its depth incorrectly using layer.setZ(). the correct way to change the depth of a tilemap layer is by using the function layer.setDepth().

my game is now running perfectly. thanks @samme