stnight99

How to align to center the tilemap

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() {}};

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.