Tilemap appears visually shifted down (by ~80px), but debugging shows correct position

[Toma]

I’m running into a strange issue in Phaser 3 when loading a map created in Tiled.

When the map is rendered, it appears visually shifted downward by around 80 pixels, even though all debug info shows the position is correct.

it happens when creating map map with the following size from photo or even if going 60tiles with tile size 10x10px.

it looks like this.
So the floor is only buggy, the small white walls at the top are positioned correctly. Could this be because my wood-floor png is 400x400px?

  create(){
        this.cursors = this.input.keyboard?.createCursorKeys();
        this.map = this.make.tilemap({ key: "hmm" });

        const xfloorTileset = this.map.addTilesetImage("wood-floor", "wood-floor");
        const wallsTileset = this.map.addTilesetImage("wall", "wall");
        this.graphics = this.add.graphics();
       
          if(!xfloorTileset || !wallsTileset){
            return
          }
        const xfloorLayer = this.map.createLayer("floor", [xfloorTileset], 0,0);
        const wallsLayer = this.map.createLayer("wall", wallsTileset, 0,0);
       
       xfloorLayer?.setCullPadding(64,64);
        xfloorLayer?.renderDebug(this.add.graphics());
    }
       

[samme]

Where is the 80px shift in the screenshot?

You can add

this.add.text(0, 0, '0, 0').setDepth(1)

to see the origin.

[Toma]

There it is

[samme]

Are you using camera follow or any other camera movement?

[Toma]

I am setting a min zoom so that the entire map fits on screen and I am changing the bounds on window resize. Also can drag it

[samme]

I can’t tell exactly what’s the game canvas, but if the problem is the black border above the tilemap layer, then probably the camera scroll is incorrect.

[Toma]

HereI’ve uploaded my JSON map and tiles. Below, you’ll find the default code I use to load the map.
If anyone would like to replicate the issue and help identify the problem, I would be very grateful.

export class MyScene extends Phaser.Scene {
    cursors!: Phaser.Types.Input.Keyboard.CursorKeys;
    map!: Phaser.Tilemaps.Tilemap;
    graphics!: Phaser.GameObjects.Graphics;
    roomAreas: any[] = [];
  
    constructor() {
      super({ key: 'MyScene' });
    }
  
    preload(){
        this.load.image("grass", "tiles/grass.png");
        this.load.image("wood-floor-100px", "tiles/wood-floor-100px.png");
        this.load.tilemapTiledJSON('test', 'tiles/test.json');
    }
    create() {
      this.map = this.make.tilemap({ key: 'test' });
      this.cameras.main.roundPixels = true;
      this.add.text(0, 0, '0, 0').setDepth(1);
      const xfloorTileset = this.map.addTilesetImage("wood-floor-100px", "wood-floor-100px");
     // const floorTile = this.map.addTilesetImage("x-floor", "x-floor");
      const grassTile = this.map.addTilesetImage("grass", "grass");
  
      if (!xfloorTileset ||  !grassTile) return;
  
      const xfloorLayer = this.map.createLayer("floor", [xfloorTileset,  grassTile], 0, 0);
  
      xfloorLayer?.renderDebug(this.add.graphics());
  
    }
  }

[Toma]

Thanks for your time

[samme]

The Tilemap Layer position looks correct.

[Toma]

I just found the issue. In the map I created, I set the tile size to 10px, but the tilesets I added were using different tile sizes like 20x20px or 50x50px. That mismatch caused the visual offset and rendering problems.
Thank you!