Toma
March 23, 2025, 12:12am
1
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
March 23, 2025, 4:11pm
2
Where is the 80px shift in the screenshot?
You can add
this.add.text(0, 0, '0, 0').setDepth(1)
to see the origin.
samme
March 23, 2025, 4:29pm
4
Are you using camera follow or any other camera movement?
Toma
March 23, 2025, 4:34pm
5
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
March 23, 2025, 4:37pm
6
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
March 23, 2025, 4:50pm
7
Here 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.
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());
}
}
samme
March 23, 2025, 5:55pm
9
The Tilemap Layer position looks correct.
Toma
March 23, 2025, 6:14pm
10
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!