How to scale game to all popular mobile devices

[Michał Lipa]

I started working on game, which I would like to publish on Android and ios market. How I can set resolution or scale game to most popular devices?

I found on google that the most popular resolution is (480, 320)

var game = new Phaser.Game(480, 320, Phaser.CANVAS);

I test my game (sample asstes) on Asus Zenphone GO (resolution: 720 x 1280 pixels) and this is how it looks (white space on top and sides).

How developers scale their games to fit all phones?

 

 

[squilibob]

There's no reliable way to ensure your phaser project will scale properly with any one method so you'll have to try one of the below and see what works best for you. You may even use a combination of the following options.

Method 1:

Use the meta tags in your html

      you can use:  <meta name="viewport" content="user-scalable=no"> with other options to scale the entire page. You may need the meta tag <meta name="apple-mobile-web-app-capable" content="yes"> for new iOS versions as well if you do this.

Method 2:

Set the phaser game dimensions based on DOM width and height

You could set a minimum resolution like you have already done and then if the device is bigger, use that resolution instead

const Presets = {
  'width': window.innerWidth < 480 ? 480 : window.innerWidth,
  'height': window.innerHeight-32 < 320 ? 320 : window.innerHeight
}
var game = new Phaser.Game(Presets.width, Presets.height, Phaser.CANVAS);

Method 3:

Set the phaser game dimensions based on client OS

var Presets = {
  'width': 480,
  'height': 320
}
if (game.device.iOS == true) Presets = {'width': 320, 'height': 600}

Method 4:

Use the phaser scale manager to set the size of the game

  preload: function () {
    game.scale.scaleMode = Phaser.ScaleManager.RESIZE ;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.canvas.style.width = '100%';
    game.canvas.style.height = '100%';
    game.scale.refresh();
},

 

[luisb]

doesnt work....

[DoraemonEXA]

If your game is landscape orientation, may be you can try this code, generally i call it "fixed height" scale mode, and the target width & target height is the design resolution of your game (I use typescript)

class SimpleGame {

    game: Phaser.Game;
    static readonly targetWidth = 2560;
    static readonly targetHeight = 1280;

    constructor() {
        this.game = new Phaser.Game(SimpleGame.targetWidth, SimpleGame.targetHeight, Phaser.AUTO, 'content', {
            preload: this.preload
        });
    }

    preload() {
        this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
        this.game.scale.setResizeCallback(function (scale: Phaser.ScaleManager, parentBounds: Phaser.Rectangle) {
            let h = scale.game.canvas.parentElement.offsetHeight;
            let scaleY = h / scale.game.height;
            scale.setUserScale(scaleY, scaleY, 0, 0);
            scale.setGameSize(SimpleGame.targetWidth, SimpleGame.targetHeight);
        }, null);
    }

}