Jump to content

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


Recommended Posts

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:

Screen Shot 2016-12-10 at 12.49.11.png

When I load that into Phaser, it looks shifted:

Screen Shot 2016-12-10 at 12.49.25.png

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');


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!

Link to comment
Share on other sites

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:

Screen Shot 2016-12-11 at 00.30.11.png

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!


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...