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

//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?

  • \$\begingroup\$ 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. \$\endgroup\$ Feb 12, 2016 at 15:34

4 Answers 4


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

  • \$\begingroup\$ 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? \$\endgroup\$ 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);
  • \$\begingroup\$ Would you mind explaining a bit? Chunk of codes with no explanation do not make good answers. \$\endgroup\$
    – Vaillancourt
    Feb 11, 2016 at 16:42
  • \$\begingroup\$ 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. \$\endgroup\$ Feb 11, 2016 at 16:47
  • \$\begingroup\$ 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); \$\endgroup\$
    – mikeecrash
    Feb 11, 2016 at 21:53
  • \$\begingroup\$ yes it does perfectly. \$\endgroup\$ Feb 12, 2016 at 15:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .