Phaser isometric tiled map collisions

Phaser 3
1

So quick question as to whether this is an unsupported feature, or whether I am doing something wrong.
Essentially I cannot get matter physics to generate collision tiles for an isometric map created in tiled.

my code within a create() goes along these lines (with this being cut-down):

const map = this.make.tilemap({ key: this.currentLevel });
const tileset1 = map.addTilesetImage('floor', 'floor');
this.layer0 = map.createLayer('Tile Layer 0', [tileset1], 0, 0);
this.layer0.setCollisionByProperty({ collides: true });
this.matter.world.convertTilemapLayer(this.layer0);

So - while the map renders fine, no collisions are set.
I have got tiles set with collides = true in my layers, in fact I am setting collisions via a

this.layer0.forEachTile(object => {
if (object.collides) {

statement, but wondered if I am missing how to set these automatically.
I’m using phaser 3.50.0.
Any help much appreciated!

2

Does this.matter.world.createDebugGraphic(); look right?

3

Hi Milton, thanks for the advice, but no, still no collisions showing. I’ve set debug to true on matter and while collision shapes that I’m adding “manually” within the forEach loop show up, nothing is created automatically from the tiled map.

4

See if this helps, otherwise it may be a bug.

5

Hello,
I have the same problem and I think it is a bug. I looked in the code for Matter js and when I try to call getBounds() from a tile created by an isometric map x and width are undefined. I tried the code with orthogonal and isometric maps. It ony fails on the isometric map.

Test code:

const map = this.make.tilemap({ key: "64_64_isometrisch_map" });
const tiles = map.addTilesetImage(
  map.tilesets[0].name,
  map.tilesets[0].name
);
const ground = map.createLayer("ground", tiles, 0, 0);
ground.setCollisionByProperty({ collides: true });

this.matter.world.convertTilemapLayer(ground);
//code from World.js convertTilemapLayer()
var layerData = ground.layer;
var tilesData = ground.getTilesWithin(
  0,
  0,
  layerData.width,
  layerData.height,
  { isColliding: true }
);
console.log(tilesData[0]);
//getBounds() from MatterTileBody.js -> setFromTileRectangle()
console.log(tilesData[0].getBounds());

I don´t know if this was helpful for finding the bug :D.

6

Hi Zechon - thanks for the confirmation - I did wonder if I was just doing something wrong.

7

Hi - thanks for the comments all. Sorry, been on hols, so haven’t replied adequately.
So - not that I am suggesting that this is to be done at all, especially as this is a topic about where I can’t work out how to do it properly, but here is the code I used to create individual matter physics collision elements.
this.layer0 is a layer loaded from a Tiled map creates with object collides - please let me know if you want me to elucidate. Anyway…

 this.layer0.forEachTile(object => {
      if (object.collides) {
        var cartPt = new Object();
        var tileWidth = 32;
        cartPt.x = (object.x * tileWidth);
        cartPt.y = (object.y * tileWidth);
        var isoPt = this.cartesianToIsometric(cartPt);

    //set the collision to the "height" of a flat tile
    //when calculating cartPt.x for the below only add 32px eg:
    //cartPt.x = (object.x * tileWidth)+32		
    //var iso_collision = this.add.polygon(isoPt.x + tileWidth, isoPt.y + tileWidth * 1.5, shapes.diamond, 0xff0000, 0.2);
	
	// set the collision to the "height" of a "3D" tile
    // below collision for 64*32 tiles
    //var iso_collision = this.add.polygon(isoPt.x + tileWidth, isoPt.y - (tileWidth / 2), shapes.diamond, 0xff0000, 0.2);
    
	// below collision for 64*64 tiles
    // var iso_collision = this.add.polygon(isoPt.x + tileWidth, isoPt.y + (tileWidth / 2), shapes.diamond, 0xff0000, 0.2);
    // whichever is active gets created
    var shapes = {
      "diamond": [
        [{ "x": 0, "y": -(tileWidth / 2) }, { "x": tileWidth, "y": 0 }, { "x": 0, "y": (tileWidth / 2) }, { "x": -tileWidth, "y": 0 }]
      ]
    };
// so an example for setting the collision to the "height" of a "3D" tile
    // below collision for 64*32 tiles
    var iso_collision = this.add.polygon(isoPt.x + tileWidth, isoPt.y - (tileWidth / 2), shapes.diamond, 0xff0000, 0.2);
    this.matter.add.gameObject(iso_collision, { shape: { type: 'fromVerts', verts: shapes.diamond } }).setStatic(true);
	}
});

//and the math helper function	
//credit to Juwal Bose
//see https://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-primer-for-game-developers-updated--cms-28392
  cartesianToIsometric(cartPt) {
    var tempPt = new Object();
    tempPt.x = cartPt.x - cartPt.y;
    tempPt.y = (cartPt.x + cartPt.y) / 2;
    return (tempPt);
  }

So wrong - someone please suggest a better way to do this :slight_smile:

8

Sorry - probably should have added that the colour / scaling in declaring iso_collision is specific to what I was doing and should be adjusted by yourself accordingly (if you ever use this code - which you probably shouldn’t :slight_smile: ).

9

I know this thread is a little old, but I’ve opened an issue on GitHub for it convertTilemapLayer for isometric tilemaps not setting bodies properly · Issue #5764 · photonstorm/phaser · GitHub

I think I might also have a solution for it, so thanks everyone here for the investigative work. Turns out that getting the x value in getBounds() just wasn’t supported for any kind of projection that isn’t Orthogonal.