scale on android

[Yanifska]

Hi there,

I have been struggling all day with the scaling of my game

it seems to be working on iOs now but not on Android.

I swear it was for a little while but then it stopped.

Any way it's driving me crazy,

 

The game is played in landscape mode ans is horizontal scroller.

The problem is, on android, when I start the game in portrait then rotate to landscape the size won't fit.

If I start the game in landscape mode everything is fine.

I added the code to resize the game in the leaveIncorrectOrientation function but it's not working, for the moment, it was a while ago, I don't hae any idea of what has changed.

Some how it is working on iOs.

 

The idea was to get the inner height, scale it up or down to 640 and scale the width accordingly to get a game of a fixed height of 640 and variable width:

       var gameWidth =  Math.max(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);       var gameHeight = Math.min(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);       var ratio = gameHeight / 640;       gameWidth /= ratio;       gameHeight /= ratio;

EDIT:

 

the problem happends only on chrome android now and only when starting in porttrait before rotating to landscape.

 

inner width and height  1024*479

game size when ok : 1368.18....*640

game size when problem occurs: 963.2* 640

 

what is going on with the width ? with the previous code the width should be 1371, I don't know what happens and make it 963 pixel wide....

 

Please help me solve this !!

 

 

index.html

<script type="text/javascript">(function () {var gameWidth =  Math.max(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio) ;    var gameHeight = Math.min(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio) ;    var ratio = gameHeight / 640;    gameWidth /= ratio;    gameHeight /= ratio;var game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, 'game');game.state.add("Boot",boot);game.state.add("Preload",preload);game.state.add("GameTitle",gameTitle);game.state.add("TheGame",theGame);game.state.start("Boot");})();</script>

boot.js

var orientated;boot = function (game) {};boot.prototype = {    init: function () {        this.input.maxPointers = 1;        this.stage.disableVisibilityChange = true;        if (this.game.device.desktop)        {           this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL ;           this.scale.setGameSize(960, 640);            this.scale.setMinMax(480, 260, 720, 480);            this.scale.pageAlignHorizontally = true;            this.scale.pageAlignVertically = true;        }        else        {            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.enterIncorrectOrientation, this);            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);        }    },    preload: function () {        //  Here we load the assets required for our preloader (in this case a background and a loading bar)        this.load.image("loading","assets/graphics/loading.png");    },    create: function () {                 this.state.start('Preload');           },     enterIncorrectOrientation: function ()      {  orientated = false;        document.getElementById('orientation').style.display = 'block';        this.game.paused = true;    },    leaveIncorrectOrientation: function ()     {          orientated = true;        document.getElementById('orientation').style.display = 'none';        this.game.paused = false;        var gameWidth =  Math.max(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);        var gameHeight = Math.min(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio);        var ratio = gameHeight / 640;        gameWidth /= ratio;        gameHeight /= ratio;        this.scale.setGameSize(gameWidth, gameHeight);    }};

[Yanifska]

so digging more into this

 

if I copy the resize code in the game file update function then the game will scale as expected (almost)

 

it seems that somehow chrome disregard this code completely, be it in the index.html or boot.js

I can't see why....the expected width is clearly 1397 and yet chrome will take 963.2

var gameWidth =  Math.max(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio);    var gameHeight = Math.min(window.innerWidth* window.devicePixelRatio, window.innerHeight* window.devicePixelRatio);    var ratio = gameHeight / 640;    gameWidth /= ratio;    gameHeight /= ratio;    this.game.scale.setGameSize(gameWidth, gameHeight);

[Yanifska]

I have tested a blank template test project and it seems to be working

So I'll try to start from here to fix this.

[Yanifska]

I am making test with a blank template and a simple sprite as preloader,

and everything is fine when loading in landscape mode ( default playing mode)

when I load the game in portrait and then rotate the device to landscape then some stuff happens

the size seems correct but somehow the sprite / preloader bar won't be placed in the center

I suppose it is because of the size of the bar

I am having trouble understanding why, and how to avoid it

Why would I  get the right screen size but a wrong position of the sprite ?

 

Here is a link to the test project

 

http://www.yanivcahoua.com/test/full/