Door object position is different in Phaser than in Tiled

Bugs
1

Hi! I’m making a dungeon game and I have a problem with object positions.

  • I’m creating a door object in Tiled using a 32x32 PNG image (my map grid is 16x16 per tile).
  • When I add the door object in Tiled, it looks perfectly aligned on the map (see photo 1).
  • But when I load the same object in Phaser, the position doesn’t match anymore (see photo 2).

Here’s how I’m creating the door in JS (Phaser 3):

// Objects: doors
this.doors = this.physics.add.staticGroup();
const doorObjects = map.getObjectLayer('doors').objects;

doorObjects.forEach((obj) => {
  const door = this.doors.create(obj.x, obj.y, 'door-close');
  door.setData('doorID', obj.properties.find((p) => p.name === 'doorID')?.value);
});

How can I make the door appear in Phaser exactly where I see it in Tiled?

Thanks for any help!

TILED
TILED2187×1184 196 KB

PHASER
PHASER947×729 261 KB

2

It looks like Phaser centres the sprite on the x, y coordinate you set, while in Tiled by default, Tile Objects in ortho maps have bottom left alignment. You can either add half the object’s width and subtract half its height from its location in your code, or you can change the Object Alignment in your tilesets in Tiled to Center (in which case, you’ll need to reposition your objects in Tiled). The latter will probably be easier to debug, since the location shown in Tiled will match the location set in Phaser.

1 Like
3

Thanks so much Eishiya! I have changed the the Object Alignment property to Center and that solved this issue!! :smiley: You’re a star!

1 Like