Tiled + Arcade physics, custom collision box not working

Phaser 3
1

Hello,
I am using tiled to make tilemaps, and for some tiles I set custom collision rectangles.
But when I use them in phaser 3 with Arcade physics, it completely ignores my custom rectangle, and makes me collide with the entire tile’s size.
Is it even possible to have Arcade physics recognize custom collision rectangles from the tile json?
Thanks

2

I don’ t think so.

3

I solved it by manually adding collision rectangles in the game in a for loop.
The code assumes that the first shape, created in Tiled, is a rectangle.
In addition, the code assumes that:

  • the map is called “map”
  • the tileset is called “tileset”
  • only the player physically collides with the tile
 map.forEachTile((tile) => {
      if(tile.index != -1)
      {
        let firstObject = tileset.tileData[tile.index-1].objectgroup.objects[0]
        let colBoxX = tile.pixelX + firstObject.x;
        let colBoxY = tile.pixelY + firstObject.y;
        let colBoxW = firstObject.width;
        let colBoxH = firstObject.height;
        let t = this.add.rectangle(colBoxX+(colBoxW/2),colBoxY+(colBoxH/2), colBoxW,colBoxH, 0xffffff)
        t.alpha = 0
        this.physics.add.existing(t, true)
        this.physics.add.collider(this.player, t)
      }
    })

Any suggestions for improvements?

1 Like
4

That looks good.

You can use a Zone instead of an invisible Rectangle. And if you use a static physics group it will make the collision searches faster.

1 Like
5

@bingbong thanks for sharing your solution! I’m implementing this along with @samme 's suggestions as well.

6

Keep in mind that this will only add the collision boxes to the current layer, which is by default the one you added last. Further, it fails if it encounters tiles that have no object.