How to align to center the tilemap

[stnight99]

I'm currently developing a simple mobile game. The tilemap is smaller than the mobile viewport, and I want to put the tilemap on the center of the stage. Is there any way to achieve this?

 

Below is the code of the scene:

var level_zero;level_zero = {  create: function() {    game.physics.startSystem(Phaser.Physics.ARCADE);    this.map = game.add.tilemap('level0');    this.map.addTilesetImage('floor', 'floor');    this.map.addTilesetImage('decor0', 'decor0');    this.floor = this.map.createLayer('floor');    this.decor = this.map.createLayer('decor');    this.floor.resizeWorld();    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;    game.scale.setShowAll();    game.scale.startFullScreen();    return game.scale.refresh();  },  update: function() {}};

[tsphillips]

If anyone knows an easy way to do this, I would also like to know.  

 

Some hack-ish things that can make it work are:

- Pack the tilemap with enough empty tiles (around the main tilemap content) so that the tilemap is bigger than the viewable area.

- Calculate the size of the viewable area before the Phaser game object is created, and ensure the game width is the same as the pixel width of the tilemap.  (Basically, shrink the canvas to be as wide as the tilemap.)

 

Something I do not recommend (although I have done it), is fiddling with offsets.  Changing the camera offset, for example, will require a cascade of hacks throughout the code.

 

Tom

[stnight99]

I think no one has an idea how to achieve this thing easily maybe a little hack on the source code will do?

[lewster32]

I'm sure this could be accomplished by changing the bounds of the world and repositioning the camera.

[tsphillips]

Are there any ill effects from using negative values for x and y in Phaser.World.setBounds?  If not, does this imply any sprite can be positioned (and rendered correctly) at negative x or y values?  It seems like this should work, but I have not seen any guarantees that this will work on all platforms (desktop and mobile).

 

For example:

// Are there any unexpected side effects from using 0,0 as the center of the world?game.world.setBounds(-1000, -1000, 2000, 2000);

Tom

[lewster32]

I don't think there should be any problems with the above; the world bounds can be arbitrary as long as they're larger than the game viewport.

[Madi]

I'd like to know if a reasonable solution was found! I'm wanting to do the same thing in my game

[gnl]

This may be coming a little too late but anyway the trick is to set the fixedToCamera property of the layer to false i.e. layername.fixedToCamera =false; and then you can adjust the layer's position by layername.position.set(x,y);