Tiled tilemap not displaying correctly

Phaser 3
1

I’m struggling with getting Phaser to use my tilemap that I’m generating using Tiled. I have my game dimensions configured for 640 x 480. In Tiled my map dimensions are 80 x 30 tiles with a tile being 16 x 16. In Tiled things look correct but in the game, my sky layer is offset for some reason. However, my ground layer is positioned correctly. I’ve attached a screenshot of what I’m seeing in the game.

Below is my code for initializing the tilemap and its layers.

this.tileMap = this.make.tilemap({ key: `${this.levelKey}-map` })

this.physics.world.setBounds(0, 0, this.tileMap.widthInPixels, this.tileMap.heightInPixels)
this.cameras.main.setBounds(0, 0, this.tileMap.widthInPixels, this.tileMap.heightInPixels)

const skyTiles = this.tileMap.addTilesetImage('level1-sky', `${this.levelKey}-sky`)
this.tileMap.createLayer('sky', skyTiles, 0, 0)

const groundtiles = this.tileMap.addTilesetImage('level1-tileset', `${this.levelKey}-tileset`)

this.groundLayer = this.tileMap.createLayer('ground', groundtiles, 0, 0)
this.groundLayer.setCollisionByProperty({ collides: true })

this.platformLayer = this.tileMap.createLayer('platforms', groundtiles, 0, 0)
this.platformLayer.setCollisionByProperty({ collides: true })

screenshot
screenshot1282×974 32.2 KB

2

It could be your Tiled settings. Do you have any Horizontal or Vertical offsets set in your Tiled layer properties? Is Infinite unchecked in the Map Properties?

3

@kittykatattack Thanks for your reply. Horizontal and Vertical offsets are 0.00 for the layer and the infinite property is unchecked.

4

Try

const skyLayer = this.tileMap.createLayer('sky', skyTiles, 0, 0);

skyLayer.renderDebug(this.add.graphics());
5

@samme below is what i get when I add that.

debug
debug1286×968 29.7 KB

6

Interestingly, I tried offsetting the y position of the layer by -128 (the height of the tile) and it lines up.

7

@aaricpittman Interesting, I’ve found I’ve needed to do that with many of my images too. Not sure why!

8

I added a few more background layers and had to offset them as well. My ground layer lined up perfectly. :man_shrugging: