Scaling - center axis after USER_SCALE?

[JustPaul]

Hi

 

I've been experimenting with USER_SCALE and have almost got exactly what I need from it.  I want to take the initial game size, and fit it to the screen by stretching the axis with the biggest difference from the screen dimension  (X in this instance) and have the other axis stretch to maintain aspect ratio.  This does that...

init() {            this.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;            var scaleX = parent.innerWidth / this.game.width;            var scaleY = parent.innerHeight / this.game.height;            var scaleAxis = scaleX > scaleY ? scaleX : scaleY;            this.game.scale.setUserScale(scaleAxis, scaleAxis, 0, 0);            this.game.scale.pageAlignVertically = true;            this.game.scale.pageAlignHorizontally = true;        }

Which has the desired effect of the other axis (Y) being bigger than the screen.  My issue is that I can't see how to center it so that equal amounts are lost from the top and the bottom, instead of it all being from the bottom.  I'd be very grateful for any nods towards the blindingly obvious.

[JustPaul]

The answer was, in case any people from teh future are reading this, to move the camera. The trouble I had with this was that the camera defaults to the size of the world and you can't move it. To move it you need to reduce the camera width/height to suit before moving.

        var scale_diff_x = (this.game.width * this.game.scale.scaleFactorInversed.x) - window.innerWidth;        var scale_diff_y = (this.game.height * this.game.scale.scaleFactorInversed.y) - window.innerHeight;        this.game.camera.width -= scale_diff_x;        this.game.camera.height -= scale_diff_y;        this.game.camera.x += (scale_diff_x * 0.5) * this.game.scale.scaleFactor.x;        this.game.camera.y += (scale_diff_y * 0.5) * this.game.scale.scaleFactor.y; 

[Henryk]

I have a similar problem.

I cannot center my game vertically.

 

I tried all sort of ways. When I manipulate the canvas via Firebug, I can just set the margon-top. However, when I try to set the attribute via javascript, it does not get applied.

[Henryk]

I found a way for me to make it work.

Take a look here:

http://www.html5gamedevs.com/topic/12904-why-is-canvas-width-is-the-same-after-setuserscale/#entry74192