Support all mobile screensizes fullsize

[user11001]

Hi,

 

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

    - EXACT FIT

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

[user11001]

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    },

[fhefh]

that is great, mark it

thanks~