Jump to content

Scaling - center axis after USER_SCALE?


Recommended Posts



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.

Link to comment
Share on other sites

  • 2 weeks later...

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

  • 2 months later...

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.

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.


  • Recently Browsing   0 members

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