Michał Lipa

How to scale game to all popular mobile devices

Recommended Posts

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?

 

 

Screenshot_2016-10-22-10-24-09.png

Share this post


Link to post
Share on other sites

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();
},

 

Share this post


Link to post
Share on other sites

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);
    }

}

 

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.