How to center a Tilemap and everything inside?

[Cyclone112]

http://phaser.io/examples/v2/tilemaps/tile-properties

Looking at this example here you will see that the loaded tilemap layer doesn't actually fill the whole canvas leaving behind the black background.

I want exactly this but I'd like the layer and everything inside to be centered horizontally instead of aligned to the top left of the canvas.

Anyone able to help?

[drhayes]

Move your camera, not the tilemap. You'll have to figure out where the center of the map is vs. how big the camera is, but I'd focus on solving that rather than moving the tilemap yourself.

[Cyclone112]

So I don't have a camera that moves, everything will be in view at all times. I plan on having a full screen game where the center is a gameboard and then I can wrap the left/right sides of the gameboard with info like a scoreboard or a timer etc.

So let's say someone is playing on a 1920x1080 screen. I could then calculate my gameboard to be 1080x1080 centered in the screen leaving 420 pixels on either side.

The issue is that when I add the tilemap layer it is always added to (0,0) so instead of it being centered with 420px on either side I have 840px on the right.

[drhayes]

I'd still try changing the camera, even if it's not following your sprites around. Tilemaps have logic internally that makes them fixedToCamera. You might also be able to change the cameraOffset of your tilemap, maybe? Instead of setting position? That *might* mess up your pointer events, but maybe try that first.

[Cyclone112]

The only thing I could get to somewhat work was using world.setBounds() and supplying a negative number to x but I'm guessing that is not the proper way to do it...

Pretty much all examples out there I see are creating a game with specific dimensions like so:

new Phaser.Game(800, 600, Phaser.AUTO,

and then the tile-map they put in scales to 800/600 so it just fits the whole area.

I want to have a game like this Tetris screenshot where the Tetris board is my tile-map in the center of the screen and then I can have the area on either side to put whatever I want.

 

[Cyclone112]

Okay, I figured it out.

new Phaser.Game(((window.innerWidth * window.devicePixelRatio) / (window.innerHeight * window.devicePixelRatio)) * 240, 240, Phaser.AUTO)

this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

backgroundLayer.fixedToCamera = false;
backgroundLayer.scrollFactorX = 0;
backgroundLayer.scrollFactorY = 0;
this.collisionLayer.fixedToCamera = false;
this.collisionLayer.scrollFactorX = 0;
this.collisionLayer.scrollFactorY = 0;

this.mapOffsetX = (this.camera.width - this.map.widthInPixels) / 2;
backgroundLayer.position.set(this.mapOffsetX, 0);
this.collisionLayer.position.set(this.mapOffsetX, 0);

I'm using Typescript so I'm just including the important snippets from various files.

Create the height of the game to be the size of your tilemap. In my case I'm using 240 currently and then calculate the width based on the height as you can see above.

Scale the game using SHOW_ALL so it will take full vertical space and not stretch.

Then for each layer you create you must set the fixedToCamera and scrollFactor to be 0. Without these it won't work. I don't know why and would love an explanation as to why.

Then finally calculate the X offset needed to center everything horizontally and apply it to the tilemap layers. Everything else you place in your game will need to be offset as well.