Jump to content

Support all mobile screensizes fullsize


Recommended Posts



We came up with an idea on how to support a wide range of screensizes while still using the full screen of the mobile game. This game always runs in the landscape orientation and the camera does not move: you will always be able to see the whole level.



See the image attached below to check out what we would like to achieve. We want the smallest resolution (4:3, lightbrown area) to always be viewable. In our levels, we'll make sure all interactable objects will be placed in this area. For the wider screens (blue / green / grayish areas), we will add some more background tiles and just a bit of level decoration on the sides.


There are multiple [http://docs.phaser.io/Phaser.ScaleManager.html](scalemodes) available in the phaser framework. I'm using the latest version


    - NO_SCALE

    - RESIZE

    - SHOW_ALL


None of them seem suitable for what we want to achieve (I tried them all out)

Has anyone here tried to do anything similar? I know we would have to calculate out where the X starting position of the camera should be, but I do not know where to start on this.


Thanks for any advice!


Link to comment
Share on other sites

I figured it out.

Basically I have to detect the current ratio on the screen. In case it's somewhere in between the ratios I want to support, I will crop the game, so that the left and right sides are cut off.

On other exotic ratios I just show the entire level. (they will see an extra margin somewhere)

My code now looks like this

    scaleGame: function() {        var windowRatio = window.innerWidth / window.innerHeight;        var widestSupportedRatio = (16 / 9);        var smallestSupportedRatio = (4 / 3);        if ((windowRatio < widestSupportedRatio) && (windowRatio >= smallestSupportedRatio)) {            this.cropGame();        } else {            //the ratio of some phones and tablets is ridiculous.            //Just show all and let them see a black bar somewhere            //@todo: Color the background of the canvas in the background color of the game            this.showAll();        }    },    /**     * Fill the entire height of the window (this is a landscape only game)     * The width will be too long... So we horizontally center it.     * Both the left and right side will not be visible     */    cropGame: function() {        var width = (game.width / game.height) * window.innerHeight;        game.scale.minHeight = window.innerHeight;        game.scale.maxHeight = window.innerHeight;        game.scale.minWidth = width;        game.scale.maxWidth = width;        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        game.scale.refresh(); //game.scale.setScreenSize(true);        //correct game bounds        //(could not get camera positioning to work with offset + scale)        var offset = (window.innerWidth - width) / 2;        game.world.setBounds(-offset, 0, width, window.innerHeight);        game.offsetWidth = offset; //I use this to offset some sprites later on        //todo: checkWorldBounds() is now buggy.    },    showAll: function() {        //scale the game to screen: origineel        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;        game.scale.refresh();        game.offsetWidth = 0; //I use this to offset some sprites later on    },
Link to comment
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.

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...