Yanifska Posted March 24, 2015 Share Posted March 24, 2015 Hi there,I have been struggling all day with the scaling of my gameit 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*479game size when ok : 1368.18....*640game 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.jsvar 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); }}; Link to comment Share on other sites More sharing options...
Yanifska Posted March 25, 2015 Author Share Posted March 25, 2015 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.jsI can't see why....the expected width is clearly 1397 and yet chrome will take 963.2var 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); Link to comment Share on other sites More sharing options...
Yanifska Posted March 25, 2015 Author Share Posted March 25, 2015 I have tested a blank template test project and it seems to be workingSo I'll try to start from here to fix this. Link to comment Share on other sites More sharing options...
Yanifska Posted March 25, 2015 Author Share Posted March 25, 2015 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 happensthe size seems correct but somehow the sprite / preloader bar won't be placed in the centerI suppose it is because of the size of the barI am having trouble understanding why, and how to avoid itWhy 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/ Link to comment Share on other sites More sharing options...
Recommended Posts