Tiles on map generated with Tiled shifted / Phaser.Tilemap undefined

[synesthesia]

Hi all,

I am making my first steps with Phaser and found something odd when building a tilemap with Tiled. The map so far consists of a single layer with tiles built from two different images containing 16x16 and 32x32 pixel tiles:

When I load that into Phaser, it looks shifted:

My first guess is that Phaser does not support maps with differently sized tiles on a single layer, could that be the cause? Are there any workarounds?

The code is straightforward:

// In a Phaser game template generated by the Yo phaser generator, I do:

// In preloader.js:

  loadResources() {
      // load your resources here
      this.game.load.image('Mythos_A4_2', 'assets/mythos/Mythos_A4_2.png'); // walls
      this.game.load.image('Mythos_A5_1', 'assets/mythos/Mythos_A5_1.png'); // ground

      this.game.load.tilemap('map', 'assets/maps/test.json', null, Phaser.Tilemap.TILED_JSON);
  }

// In game.js:

  create() {
    this.game.stage.backgroundColor = '#787878';

    this.map = this.game.add.tilemap('map');
    this.map.addTilesetImage('Mythos_A4_2', 'Mythos_A4_2');
    this.map.addTilesetImage('Mythos_A5_1', 'Mythos_A5_1');

    this.floorLayer = this.map.createLayer('floor');

    this.floorLayer.resizeWorld();
  }

On a different note, when I use the custom/phaser-no-physics.min.js build, Phaser.Tilemap is undefined. When I use phaser.min.js, everything works nicely. How come? I don't see how Tilemaps would necessarily require physics.

Thanks for any pointers in advance!
synesthesia

[synesthesia]

I am getting a bit closer, but I have no solution yet.

The map tile size is 16x16. When I place a 32x32 tile, Tiled highlights the bottom left map tile where it would be placed on the map, like so:

Now when I look into the layer data of the generated JSON, I can see that indeed only this specific map tile has an index:

{
  "layers": [
    {
      "data":[0,0,... (first row continues)
              123,0,... (second row continues)
              ...

Since these tiles are rendered one map tile height off, it is obvious that Phaser simply renders the tile at this position, but does not take into account that the tile size is larger than the map tile size.

I see two possible options:

1. Change Tiled to put the index "123" into the "top left" tile. I have not found any option to do so.
2. Patch TilemapLayer.renderRegion (where the magic seems to happen, see https://github.com/photonstorm/phaser/blob/v2.6.2/src/tilemap/TilemapLayer.js#L919) to correct the vertical translation when rendering the tile.

My questions to you are:

• Does that sound sensible?
• Is there any way in Tiled to switch the behavior?
• Is there any best practice for "patching" Phaser locally? I don't mean to mess with the code and submit a PR, I just want to patch the renderRegion method directly in the game. Unfortunately it's a rather large method so I see no other option than copy-pasting it entirely.

Thanks in advance!
synesthesia