Jump to content

TiledMap loaded with incorrect tiles


Recommended Posts





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 4raKF56.png tile. Instead, we see vvpcOH9.png, which is 838 (or 829, there are two quasi-identical versions). We're off by 23 or 14. Why? I don't know yet.

Link to comment
Share on other sites

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).



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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