# How to center a tilemap in Phaser?

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');
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?

• by saying that the positioning does not work, I mean that the TileMapLayer is displayed at 0,0... Which means that when I set the anchor to .5, I can only see the quarter bottom right of it. Feb 12, 2016 at 15:34

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

layer.fixedToCamera = false;

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

• I am not completely sure what you mean... All I have done is loading a tilemap from Tiled and now I need to center it... Do you know how to do that? Feb 12, 2016 at 15:36

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;

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

• Would you mind explaining a bit? Chunk of codes with no explanation do not make good answers. Feb 11, 2016 at 16:42
• thank you but it doesn't work... same result. I checked in debug mode and the variables from this.game.world.centerX and Y are the same as the ones from this.world.centerX and Y. Feb 11, 2016 at 16:47
• if you add a sprite image and not tilemap does it center? like so: this.game.background = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'background'); this.background.anchor.setTo(.5); Feb 11, 2016 at 21:53
• yes it does perfectly. Feb 12, 2016 at 15:31