TiledMap loaded with incorrect tiles

[SoulBeaver]

Hello,

 

 

 

I (re)created a sample map that I wish to load in Phaser:

 

 

The map consists of three layers:  Background, Objects, Creatures. They are comprised of four tilesets, of which Tiles is not used:

 

 

And this is my code to load and display the Map in Phaser:

 

    export class Preloader extends Phaser.State {        preloadBar: Phaser.Sprite;        preload() {            this.preloadBar = this.add.sprite(200, 250, "preloadBar");            this.load.setPreloadSprite(this.preloadBar);            this.loadAssets();        }        loadAssets() {            this.load.tilemap("maze", "assets/tilemaps/maps/Maze.json", null, Phaser.Tilemap.TILED_JSON);            this.load.image("creatures_tileset", "assets/tilemaps/tiles/Creatures.png");            this.load.image("items_tileset", "assets/tilemaps/tiles/Items.png");            this.load.image("world_tileset", "assets/tilemaps/tiles/World.png");            this.load.image("fx_tileset", "assets/tilemaps/tiles/FX.png");            this.load.image("tiles_tileset", "assets/tilemaps/tiles/Tiles.png");            this.load.image("classes_tileset", "assets/tilemaps/tiles/Classes.png");        }    // <Snip the transition to Game logic>    }    export class InGame extends Phaser.State {        map: Phaser.Tilemap;        backgroundLayer: Phaser.TilemapLayer;        itemLayer: Phaser.TilemapLayer;        creatureLayer: Phaser.TilemapLayer;        create() {            this.game.stage.backgroundColor = "#ffffff";            this.map = this.game.add.tilemap("maze");            this.map.addTilesetImage("World", "world_tileset");            this.map.addTilesetImage("Creatures", "creatures_tileset");            this.map.addTilesetImage("Items", "items_tileset");            this.map.addTilesetImage("Tiles", "tiles_tileset");            this.backgroundLayer = this.map.createLayer("Background");            this.itemLayer = this.map.createLayer("Objects");            this.creatureLayer = this.map.createLayer("Creatures");            this.backgroundLayer.resizeWorld();        }    }

And the output image is

 

 

You can see that items and monsters are placed correctly, but all background tiles are horribly misrendered. Sometimes, even stranger, the tilemap loads correctly even though I have changed nothing in the code or .json file.

 

Am I doing something wrong? If so, what?

 

Additional Info:

 

This is digging a little deeper, but here is a snippet of the background layer:

 

"data":[1854, 1850, 3378, 1848, 1849, 1859, 1849, 1849, 1849, 1849, 1849, 1855, 1852, 1673, 1673, 1673, 1673,...

 

I also see that the firstgid attribute for the world tileset is 997. 1854 - 997 = 852, the  tile. Instead, we see , which is 838 (or 829, there are two quasi-identical versions). We're off by 23 or 14. Why? I don't know yet.

[tsphillips]

If firstgid for world_tileset is 997, wouldn't that imply that values in the data element for Background layer map 997 to the first (upper-left) tile in the World.png file?

 

Can you manually adjust firstgid in the world_tileset (in Maze.json) and get the right tiles to display?  (It looks like there is a regular, constant shift in each tile index for that tile set.)  If so, perhaps the tile set editor is, for some reason, writing out an incorrect offset (i.e., firstgid).

 

Tom

[SoulBeaver]

Hello tsphillips,

 

 

it turned out to be something of that nature. I'm not sure why, but every row added 1 to an offset that then rendered my tiles incorrectly. For some reason, Tiled doesn't handle Tilemaps with gaps very well. I had a spritesheet similar to the one below:

 

I say "similar" because this tilemap works fine in Tiled. Since my tileset is proprietary and I cannot distribute it due to the license, I cannot release the full, faulty tileset. 

 

Solution: Cut out the whitespace. I split the humongous tileset into five smaller tilesets with no gaps and now it works fine.

[xerver]

This was an issue with Phaser's Tiled implementation, not Tiled itself. The bug in Phaser has been fixed and should work fine now.

 

May want to consider not marking the post that blames Tiled as the answer