Arcade Physics Collisions with Isometric tilemap

Phaser 3
1

Has anyone had success creating tilemap collisions with a sprite and isometric maps? I’ve been stuck on this for 3 days now. I’ve checked open issues on Github and here and have found these two posts which suggest a bug but both are with matter physics and I’m not sure if it would resolve my issue as well.

this.player=this.physics.add.sprite(1590,650, “tempplayer”).setDepth(100).setCollideWorldBounds(true);

var map =this.add.tilemap(‘mapData’)
var mapTiles=map.addTilesetImage(‘mapTileset’,‘mapImg’);
this.wall =map.createLayer(‘wall’, mapTiles)

this.wall.setCollision({playerCollides: true});

this.physics.add.collider(this.player,this.wall,function(){console.log(“hits wall”)},null,this)
this.debugGraphics = this.add.graphics();
map.renderDebug(this.debugGraphics );

Am I misunderstanding something or doing something wrong? Such as the nature of isometric tilemaps prevents collisions or would the bug in the github issue post resolve my issue. Any help would be appreciated.

2

I also tried using Arcade physics in the beginning but switched to Matter after going through this tutorial Modular Game Worlds in Phaser 3 (Tilemaps #4) — Meet Matter.js | by Michael Hadley | ITNEXT

Matter is another JavaScript 2D physics engine. Whereas arcade physics (AP) in Phaser aims to be fast and simple (mainly just axis-aligned bounding boxes and circles), Matter is a more realistic physics simulation engine — complex body shapes, mass, density, constraints, etc.

Specifically, because I’m using Tiled to create my tilemaps and custom polygon collider shapes (both on tiles and as objects), I needed to use a physics engine, in this case Matter, that could handle that. That being said, there is a bug in Phaser–the issues you linked to–which make it impossible to actually create the collision shapes.

I ultimately ended up using my fork of the repo in the project because I need the fix in the PR to get my game working. I hope that offers a little more context on the problem. I do have working collisions in an isometric game, but it was not without its struggles.

3

Also, after rendering the object collider polygons, I had problems placing them correctly in the game. Turns out that Matter expects its x and y positions to be the center of the polygon, I’m not exactly sure what Tiled returns for the x and y position of an object. I ended up calculating the center of each polygon based on the vertices (specifically using the same method that Matter uses) in order to place them correctly.

4

I would be very interested to see how you got the collisions working. I also recently switched to tiled for my isometric game. Before I decided not to add collision as I was advised to use 3d for that. But since then I continued building in 2d. I also need to detect clicks on isometric shapes and I have another bug that collision detection could help with.

This is my project:
daan93/phaser-isometric-demo: Isometric game demo for Phaser 3 (github.com)
Phaser Webpack Setup (daan93.github.io)

5

Thanks for your help and that tutorial. I am going to try and switch my game to the matter physics engine and use the fixes you tried and update this post with what I get.

7

I used the changes in your fork and was able to get tilemap collisions to work , with callbacks, no issues yet. Thanks so much.

1 Like