Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Phaser Mobile Scaling Suggestions


Igor Georgiev
 Share

Recommended Posts

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?

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...