postepenno Posted June 26, 2014 Share Posted June 26, 2014 There is a bug with game's scaling on Android stock browser after device's rotation.I use this simple code for testing:var App = {};App.BootState = function(game) {};App.BootState.prototype = { preload: function() { this.load.image('background', 'assets/images/background.png'); }, create: function() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.setScreenSize(true); this.add.sprite(0, 0, 'background'); }, render: function() { game.debug.text("isPortrait: " + game.scale.isPortrait, 20, 100 ); game.debug.text("isLandscape: " + game.scale.isLandscape, 20, 120 ); game.debug.text("orientation: " + game.scale.orientation, 20, 140 ); }};Testing device: Samsung Galaxy Note 2, android 4.3. At launch everything looks fine Still fine after first device's rotation But after some more rotations some weird stuff happens. It may show isPortrait = true even if device is in lanscape mode. Or there can be mess with scaling and positioning: I was told that there is the same problem on other device - Samsung Galaxy S3. I guess this is a common problem for all android stock browsers. Is there any way to fix this bug?Scale TestThanks in advance! P.S. On chrome everything works perfect. Link to comment Share on other sites More sharing options...
haden Posted June 26, 2014 Share Posted June 26, 2014 I can confirm I have similar problems on Android 4.0.3 stock browser. I have a custom solution I'm using with my games that fixes a similar problem, I will test it on your code later today and if it works I will post it here. Link to comment Share on other sites More sharing options...
haden Posted June 26, 2014 Share Posted June 26, 2014 var App = {};App.BootState = function(game) {};App.BootState.prototype = { preload: function() { this.load.image('background', 'assets/images/background.png'); }, create: function() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; this.game.scale.enterPortrait.add(this.rescale, this); // ADD THIS this.game.scale.enterLandscape.add(this.rescale, this); // ADD THIS this.game.scale.setScreenSize(true); this.back = this.add.sprite(0, 0, 'background'); }, // ADD THIS METHOD TOO rescale: function() { // the game doesn't resize reight away, so we need to delay here var _game = this.game; setTimeout(function() { _game.scale.refresh(); }, 200); }, render: function() { game.debug.text("isPortrait: " + game.scale.isPortrait, 20, 100); game.debug.text("isLandscape: " + game.scale.isLandscape, 20, 120); game.debug.text("orientation: " + game.scale.orientation, 20, 140); }};I marked the lines I added, this should fix the orientation scaling problems. Let me know if this works for you. postepenno 1 Link to comment Share on other sites More sharing options...
postepenno Posted June 27, 2014 Author Share Posted June 27, 2014 Thanks for the suggestion, it works more stable now!Unfortunately sometimes there is a problem with scaling in portrait mode: So, I commented this line//this.game.scale.enterPortrait.add(this.rescale, this); // ADD THISAnd everything works great even after 20+ rotations.I guess this is a hack for my specific phone and on other device or android version might be a different situation, but at least it works in current specific case. So, if a client asks about scaling issues in stock browser, I know which lines to tweak.Thanks for the help! Link to comment Share on other sites More sharing options...
morosenerd Posted June 27, 2014 Share Posted June 27, 2014 I had the same problem, and just as haden did, I "solved" it by waiting (although I do setInterval instead, wait a couple times while checking if window.innerWidth is changing, and then remove the interval when it's stable). I looked at ScaleManager.js to track the problem, but I'm afraid I don't fully understand it. There seems to be a bit of code that tries to set an interval too, but I completely don't get why this bit is here://in function setScreenSize if (force || window.innerHeight > this._startHeight || this._iterations < 0) { //more code this.setSize(); clearInterval(this._check); this._check = null; }What's the purpose of window.innerHeight > this._startHeight ? Link to comment Share on other sites More sharing options...
Recommended Posts