Phaser Mobile Scaling Suggestions

[Igor Georgiev]

Hey guys I am having some trouble achieving proper scaling and resolution settings on all devices. I will show you what I do at the moment, and please tell me where I am wrong.
I am testing this on several devices and on some, the window.screen.width and height is detected in half.... which is weird.

//index.html
window.onload = function() {

        //create new Phaser instance
        this.w = window.screen.width;
        this.h = window.screen.height;
        if(this.w < this.h)
        {
            this.w = window.screen.height;
            this.h = window.screen.width;
        }
        else if(this.w > this.h)
        {
            this.w = window.screen.width;
            this.h = window.screen.height;
        }
        console.log(this.w + "X" + this.h);
        var game = new Phaser.Game(this.w, this.h, Phaser.CANVAS, 'game', null, false, true, null);
        game.autoResize = true;
        game.forceSingleUpdate = true;
        game.preserveDrawingBuffer = true;
        game.clearBeforeRender = false;
        game.lockRender = false;


        //add states to the game
        game.state.add('Boot', Game.Boot);
        game.state.add('Preloader', Game.Preloader);
        game.state.add('MainMenu', Game.MainMenu);
        game.state.add('GameMachine', Game.SlotMachine);

        //start the boot state
        game.state.start('Boot');

    };

//Boot.js
create: function ()
    {
        this.time.advancedTiming = true;
        this.addScrollPlugin();

        //Pass the current game to the controllers
        SoundController.setGame(this.game);
        AutoPlayController.setGame(this.game);
        GameStateController.setGame(this.game);

        this.game.input.maxPointers = 1;
        this.stage.disableVisibilityChange = true;

        //scale settings
        if(this.game.device.desktop)
        {
            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.pageAlignHorizontally = true;
            this.scale.pageAlignVeritcally = true;

            //Start Pre-loading
            this.state.start('Preloader');
        }
        else
        {
            
            console.log(this.game.world.width + "X" + this.game.world.height);

            this.game.stage.smoothed = false;
            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.pageAlignHorizontally = true;
            this.scale.pageAlignVertically = true;
            this.scale.forceOrientation(true, false);
            this.scale.enterIncorrectOrientation.add(this.handleIncorrect, this);
            this.scale.leaveIncorrectOrientation.add(this.handleCorrect, this);
            this.scale.refresh();
            this.state.start('Preloader');
        }

    },

my phone is Samsung Galaxy S3 Neo with 1280x720 screen, when I set it with window.screen.width and height I get 640x360. This is only on some devices...
... why? I can set hard-coded resolution and it will be fine, but I need to detect it in order to have multi-device support.

Any ideas?

 

[Igor Georgiev]

Just to let you guys know, I am almost ready with the problem, when I succeed I will post the solution here

[VitaZheltyakov]

Use for mobile:

var configuration = {
'canvas_width_max' : 2048,					
'canvas_width' : 1000,						
'canvas_height_max' : 2048,				
'canvas_height' : 650,						
'scale_ratio' : 1,							
'aspect_ratio' : 1,							
};

configuration.canvas_width = window.screen.availWidth * window.devicePixelRatio;
configuration.canvas_height = window.screen.availHeight * window.devicePixelRatio;
configuration.aspect_ratio = configuration.canvas_width / configuration.canvas_height;
if (configuration.aspect_ratio < 1) configuration.scale_ratio = configuration.canvas_height / configuration.canvas_height_max;
else configuration.scale_ratio = configuration.canvas_width / configuration.canvas_width_max;

game = new Phaser.Game(configuration.canvas_width, configuration.canvas_height, options.render, 'gamewindow');

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

 

[Igor Georgiev]

23 hours ago, VitaZheltyakov said:

Use for mobile:

var configuration = {
'canvas_width_max' : 2048,					
'canvas_width' : 1000,						
'canvas_height_max' : 2048,				
'canvas_height' : 650,						
'scale_ratio' : 1,							
'aspect_ratio' : 1,							
};

configuration.canvas_width = window.screen.availWidth * window.devicePixelRatio;
configuration.canvas_height = window.screen.availHeight * window.devicePixelRatio;
configuration.aspect_ratio = configuration.canvas_width / configuration.canvas_height;
if (configuration.aspect_ratio < 1) configuration.scale_ratio = configuration.canvas_height / configuration.canvas_height_max;
else configuration.scale_ratio = configuration.canvas_width / configuration.canvas_width_max;

game = new Phaser.Game(configuration.canvas_width, configuration.canvas_height, options.render, 'gamewindow');

this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.game.scale.refresh();

 

Thanks,will try it.

[Igor Georgiev]

On 6/11/2016 at 3:36 PM, Igor Georgiev said:

Thanks,will try it.

I did the following thing that worked for me:

 

///////index.html 

        //This is to fix a bug where you want landscape, but the device returns the width of portrait mode and vice versa

        this.w = window.screen.width;
        this.h = window.screen.height;

        if(this.w < this.h)
        {
            this.w = window.screen.height;
            this.h = window.screen.width;
        }
        else if(this.w > this.h)
        {
            this.w = window.screen.width;
            this.h = window.screen.height;
        }
        console.log(this.w + "X" + this.h);
        var config = {
            "width": this.w * window.devicePixelRatio,
            "height": this.h  * window.devicePixelRatio,
            "renderer": Phaser.CANVAS,
            "parent": 'game',
            "transparent": false
        };

//create new Phaser instance

        var game = new Phaser.Game(config);
        game.autoResize = true;
        game.forceSingleUpdate = true;
        game.preserveDrawingBuffer = true;
        game.clearBeforeRender = false;
        game.lockRender = false;


////////RatioUtil.js as suggested by another user on this forum

var RatioUtil = new function()
{
    this.getScaledRatio = function()
    {
        return window.devicePixelRatio / 3;
    };

    this.getDPR = function()
    {
        return window.devicePixelRatio;
    }
};

//Then when you have a sprite that needs to be scaled but already has scale, you do the following:

this.testSrite.scale.setTo(0.5 + RatioUtil.getScaledRatio(), 0.5 + RatioUtil.getScaledRatio());

 

[craidencool]

On 6/14/2016 at 8:47 PM, Igor Georgiev said:

I did the following thing that worked for me:

 

///////index.html 

        //This is to fix a bug where you want landscape, but the device returns the width of portrait mode and vice versa

        this.w = window.screen.width;
        this.h = window.screen.height;

        if(this.w < this.h)
        {
            this.w = window.screen.height;
            this.h = window.screen.width;
        }
        else if(this.w > this.h)
        {
            this.w = window.screen.width;
            this.h = window.screen.height;
        }
        console.log(this.w + "X" + this.h);
        var config = {
            "width": this.w * window.devicePixelRatio,
            "height": this.h  * window.devicePixelRatio,
            "renderer": Phaser.CANVAS,
            "parent": 'game',
            "transparent": false
        };

//create new Phaser instance

        var game = new Phaser.Game(config);
        game.autoResize = true;
        game.forceSingleUpdate = true;
        game.preserveDrawingBuffer = true;
        game.clearBeforeRender = false;
        game.lockRender = false;


////////RatioUtil.js as suggested by another user on this forum

var RatioUtil = new function()
{
    this.getScaledRatio = function()
    {
        return window.devicePixelRatio / 3;
    };

    this.getDPR = function()
    {
        return window.devicePixelRatio;
    }
};

//Then when you have a sprite that needs to be scaled but already has scale, you do the following:

this.testSrite.scale.setTo(0.5 + RatioUtil.getScaledRatio(), 0.5 + RatioUtil.getScaledRatio());

 

Sir Igor Gorgiev, will this scale the game using tiled maps to different screens of android devices? 

[Igor Georgiev]

18 hours ago, Newbie_HelpMe said:

Sir Igor Gorgiev, will this scale the game using tiled maps to different screens of android devices? 

Hey there  As long as your tiled map dimensions are relative to the game.world size (I recommend using the height) it should be okay