FlopshotQQ Posted October 24, 2017 Share Posted October 24, 2017 Hey. I need help, I've been banging my head against this for hours. I've been scaling my game to fit screens on all devices, while maintaining the asset ratios. The game size increases so the controls work where ever you touch. I've run into an issue with Android/Chrome and itch.io. I'm not sure if it's specific to the browser, or the site, or mobile. It might be a full screen mobile issue all together, but I'm testing it on itch and an android with chrome. The first time the game loads it scales and works perfectly. Then, if I refresh the page or visit it later this happens: The game gets put into the view port ratio set in Itch, and doesn't adjust like it should in fullscreen. This being 640x960. 2:3 ratio, the screen has a higher Y axis. This causes the white bar at the bottom which is unresponsive to the touch controls. I've removed the padding in CSS: <style> html { margin:0; padding:0; } body { margin: 0; padding: 0; } #canvasholder { width: 99vw; height: 99vh; margin: 0 auto; } </style> and my canvas code looks something like this: // ~A Canvas and Game Setup aspect_ratio = window.innerWidth / window.innerHeight; testWidth = 960 * aspect_ratio; //if the aspect ratio stretches the Y axis if (testWidth <= 640) { var canvasWidth = 640; var canvasHeight = 640/aspect_ratio; } // else if it stretches the X axis else { var canvasWidth = 960 * aspect_ratio; var canvasHeight = 960; } //test versions //var canvasWidth = 640; //var canvasHeight = 960; var game = new Phaser.Game(canvasWidth, canvasHeight, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function create() { // ~2.1 Game Scaling game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.refresh(); Maybe I've over complicated the original solution? This worked the way I intended on Desktop tests. You can test it yourself here:https://flopshotqq.itch.io/screen-scale-test Thanks so much, any help is appreciated. Link to comment Share on other sites More sharing options...
FlopshotQQ Posted October 26, 2017 Author Share Posted October 26, 2017 I managed to find a work around myself. Figured I would post it here if anyone else ran into similar problems. I don't know what the problem is, but after scouring the internet and days of testing I have a guess. This seems to be a time based issue. It checks the window.innerWidth provided by the embedded container, in this case the one I set for itch.io, and scales to it before window.innerWidth is adjusted by the phone going fullscreen. This doesn't explain why it works the first time you load the game though, and why it only fails after refreshing the itch.io page the game is embedded in. Either way I solved the problem by creating a function that restarts the game after a timer goes off. I removed any scaling calculations and game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; from the original game declaration, and used '100%' so it loads (and fails) faster. The timer runs this function: { aspect_ratio = window.innerWidth / window.innerHeight; testWidth = 960 * aspect_ratio; if (testWidth <= 645) { var canvasWidth = 640; var canvasHeight = 640/aspect_ratio; } else { var canvasWidth = 960 * aspect_ratio; var canvasHeight = 960; } game.scale.setGameSize(canvasWidth, canvasHeight); game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.refresh(); game.state.restart(); } This works, despite not knowing 100% why. It's not perfect because you can see the game restart and the assets adjust. Though I'm just going to cover that up with a splash. This solution has been tested on PC, iPhone, and Andriod on many devices. The game scales as intended. Test it yourself here: https://flopshotqq.itch.io/screen-scale-test Hopefully this helps someone Happy coding! vedia and Machine-dev 2 Link to comment Share on other sites More sharing options...
Recommended Posts