Jump to content

How to align to center the tilemap


stnight99
 Share

Recommended Posts

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?

vMa2HH8.png

 

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() {}};
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...
  • 7 months later...

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...