How to center a tilemap in Phaser?

Question

In Phaser, I am loading a Tilemap from JSON.

I would like my Tilemap to display in a particular position (for simplicity here I say the middle of the screen).

var map = this.game.add.tilemap('level');
map.addTilesetImage('tiles2', 'tiles2');
var layer = map.createLayer('Ground', map.widthInPixels, map.heightInPixels);
layer.anchor.set(0.5);

//this does not work...
layer.position.set(this.world.centerX, this.world.centerY);

//or even
layer.x = this.world.centerX;
layer.y = this.world.centerY;

The anchor.set works as it should however setting the position does not seem to work.

What am I doing wrong?

Answer 1

I found out why it was not working... I needed to do this:

layer.fixedToCamera = false;

Answer 2

If you create rectangles for the tiles, the origin is not from the left upper corner, they start from the middle. if you create a tile in Phaser and set his position to x:0,y:0 with 32*32 size it is only 16*16 large, because you need to set it at x:width/2, y:height/2

Answer 3

I'm using Phaser 3.55, and I'm using a newly introduced isometric tilemap. The trick is to move the camera, rather than the tilemap itself:

this.cameras.main.scrollX = -this.map.widthInPixels / 2;
this.cameras.main.scrollY = -this.map.heightInPixels / 2;

Answer 4

layer.position.set(this.game.world.centerX, this.game.world.centerY);