Isometric Collision Matter convertTilemapLayer not working

Phaser 3
1

I’ve been working with Tiled and setting tilesets to have the collides property and I’m encountering an issue whereby the Tiled isometric map does not work with convertTilemapLayer. I’m currently testing this on the latest 3.60 beta 5.

import Phaser from "phaser";
import outside from "../assets/map/iso-64x64-outside.png";
import building from "../assets/map/iso-64x64-building.png";
import tilemap from "../assets/map/isorpg.json";
var config = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  backgroundColor: "#2d2d2d",
  parent: "phaser-example",
  pixelArt: true,
  scene: {
    preload: preload,
    create: create,
    update: update,
  },
  physics: {
    default: "matter",
    matter: {
      debug: true,
    },
  },
};

var controls;

var game = new Phaser.Game(config);

function preload() {
  this.load.image("tiles", outside);
  this.load.image("tiles2", building);
  this.load.tilemapTiledJSON("map", tilemap);
}

function create() {
  var map = this.add.tilemap("map");

  console.log(map);

  var tileset1 = map.addTilesetImage("iso-64x64-outside", "tiles");
  var tileset2 = map.addTilesetImage("iso-64x64-building", "tiles2");

  var layer1 = map.createLayer("Tile Layer 1", [tileset1, tileset2]);
  var layer2 = map.createLayer("Tile Layer 2", [tileset1, tileset2]);
  var layer3 = map.createLayer("Tile Layer 3", [tileset1, tileset2]);
  var layer4 = map.createLayer("Tile Layer 4", [tileset1, tileset2]);
  var layer5 = map.createLayer("Tile Layer 5", [tileset1, tileset2]);
  layer2.setCollisionByProperty({ collides: true });
  this.matter.world.convertTilemapLayer(layer2);
  var cursors = this.input.keyboard.createCursorKeys();

  var cursors = this.input.keyboard.createCursorKeys();

  this.cameras.main.setZoom(2);

  var controlConfig = {
    camera: this.cameras.main,
    left: cursors.left,
    right: cursors.right,
    up: cursors.up,
    down: cursors.down,
    acceleration: 0.04,
    drag: 0.0005,
    maxSpeed: 0.7,
  };

  controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
}

function update(time, delta) {
  controls.update(delta);
}
export default game;

I’ve been toggling the map type between orthogonal, isometric, staggered isometeric and staggered hexagonal and seeing that the physics debugger is showing that bodies are being generated for the other map types, but not isometric. Is there some behaviour that I’m not aware of with regards to the isometric map type?

Based on the current change logs i saw that there was some kind of issue with staggered isometric which was fixed in beta 4

Based on my understanding this was changing how structured isometric works, but not (regular) isometric. Could this be part of the issue?

2

Upon further investigation i’m seeing in console logging the point vector in IsometricTileToWorldXY.js that the function repeats seemingly infinitely.

   console.log(point);
   return point.set(x,y);

whereas that doesn’t happen when logging TileToWorldXY.js for orthogonal maps.
I’ve gone down through the debugger and seeing that in getBounds

    /**
     * Gets the world rectangle bounding box for the tile, factoring in the layers position,
     * scale and scroll.
     *
     * @method Phaser.Tilemaps.Tile#getBounds
     * @since 3.0.0
     *
     * @param {Phaser.Cameras.Scene2D.Camera} [camera] - The Camera to use to perform the check.
     * @param {Phaser.Geom.Rectangle} [output] - Optional Rectangle object to store the results in.
     *
     * @return {(Phaser.Geom.Rectangle|object)} The bounds of this Tile.
     */
    getBounds: function (camera, output)
    {
        if (output === undefined) { output = new Rectangle(); }

        output.x = this.getLeft(camera);
        output.y = this.getTop(camera);
        output.width = this.getRight(camera) - output.x;
        output.height = this.getBottom(camera) - output.y;

        return output;
    },

output.y and output.height is returning NaN. Any ideas what is causing this?

3

I edited getTop to use IsometricTileToWorldXY to get the y value based on the changes mayacoda had done to get staggered isometric to work

    getTop: function (camera)
    {
        var tilemapLayer = this.tilemapLayer;

        // Tiled places tiles on a grid of baseWidth x baseHeight. The origin for a tile in grid
        // units is the bottom left, so the y coordinate needs to be adjusted by the difference
        // between the base size and this tile's size.
        if (tilemapLayer)
        {
            var point = tilemapLayer.tileToWorldXY(this.x, this.y, undefined, camera);

            return point.y;
        }

        return this.y * this.baseWidth - (this.height - this.baseHeight);
    }

Now the conversion works for isometric maps. I’ve ran the other collision examples in the tilemap folder and it seems to be working for other map types
Screenshot 2022-04-19 at 4.47.06 PM

4

Hi there!

I’m a bit of a novice at Phaser (and TypeScript/JavaScript) using Phaser as a learning tool. Can you explain how and where you altered getTop so that it would work correctly?

5

Hi,
Sorry took me a while to get to this. You can see this pr for what changes I made Fixes getTop for creating MatterTileBody for isometric tiles by adamazmil · Pull Request #6081 · photonstorm/phaser · GitHub