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

**URL:** <https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245>\
**Category:** Phaser 3\
**Created:** [March 23, 2025, 12:12am UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245 "2025-03-23T00:12:35Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 12:12am UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/1 "2025-03-23T00:12:35Z")

</div>

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.

 ![Screenshot_1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/fe471d21cf7b556c22e849b88791205b4fbdb712.png)  
it happens when creating map map with the following size from photo or even if going 60tiles with tile size 10x10px.  
 ![{8648391F-C3FA-41FD-8F72-CC24597B923C}](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/89c4dfe05c320246b213f3a4f28daa8048e410f8.jpeg)  
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?

```javascript
  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());
    }
       

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 23, 2025, 4:11pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/2 "2025-03-23T16:11:23Z")

</div>

Where is the 80px shift in the screenshot?

You can add

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

```

to see the origin.

---

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 4:24pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/3 "2025-03-23T16:24:19Z")

</div>

There it is

 ![{1682B804-1782-40E7-B760-3ED78A5E5398}](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9cf26bcb5e117d26aaf04780bcdcbaeb5b08c31f.png)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 23, 2025, 4:29pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/4 "2025-03-23T16:29:05Z")

</div>

Are you using camera follow or any other camera movement?

---

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 4:34pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/5 "2025-03-23T16:34:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 23, 2025, 4:37pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/6 "2025-03-23T16:37:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 4:50pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/7 "2025-03-23T16:50:37Z")

</div>

[Here](https://we.tl/t-QkM6lszPrn)I’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.

```javascript
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());
  
    }
  }

```

---

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 4:50pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/8 "2025-03-23T16:50:53Z")

</div>

Thanks for your time

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 23, 2025, 5:55pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/9 "2025-03-23T17:55:28Z")

</div>

The Tilemap Layer position looks correct.

 ![wood](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/a/a7fa647512284d6a30d839a9eebd352cc11fe774.png)

---

<div class="post-metadata">

**Author:** ![Toma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/toma/32/8848_2.png) [@Toma](https://phaser.discourse.group/u/Toma)\
**Post date:** [March 23, 2025, 6:14pm UTC](https://phaser.discourse.group/t/tilemap-appears-visually-shifted-down-by-80px-but-debugging-shows-correct-position/15245/10 "2025-03-23T18:14:02Z")

</div>

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!

 ![{4E251B2C-B52C-4171-AF8A-2DC23F68BC2C}](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/08c50f0c8af067360b15ab66c4e19944ae6f76a2.jpeg)