megmut Posted April 1, 2016 Share Posted April 1, 2016 I might be missing something obvious here, but I can't get the Phaser.ScaleManager.SHOW_ALL to function how I want to. So my solution to scaling to different devices follow something similar to this: http://v-play.net/doc/vplay-different-screen-sizes/ Now I've made my game canvas size 1920x1280 - I'm aware this is HD, it's for Ipad at the moment. This is an aspect ratio of 3:2, which going by the aspect ratio rules, should be enough to fit inside any container. This works fine inside my browser when testing.. As you can see above, the game is shrunk down small enough to keep the aspect ratio of 3:2 within a 950x778 resolution. This works fine. It doesn't however, work fine on any tested mobile device. i.e: Now what's happening here, is the game is scaling, however it's scaling to make the width 100% of the inner device, but thus forcing the height out of the 3:2 ratio which the letterbox effect was supposed to fix. Am I doing something stupid, or is there a known fix for this? Also, I have tested on 3 browser emulations, and 4 actual devices.. all have the same issue. For reference, here's the code I'm using to get this effect.: // in index // class Game extends Phaser.Game { constructor() { super(1920, 1280, Phaser.Canvas, 'content', null, true); .... } } // in boot // export default class Boot extends Phaser.State { init() { this.game.scale.trackParentInterval = 1; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } } Link to comment Share on other sites More sharing options...
ivanix Posted April 2, 2016 Share Posted April 2, 2016 I ran into a similar issue a few days back with trying to keep aspect using SHOW_ALL, only to find one of my css statements was incorrectly modifying the div wrapper for the canvas element. You should be able to confirm if you have some external css or dom issue through Chrome's inspector. Link to comment Share on other sites More sharing options...
megmut Posted April 2, 2016 Author Share Posted April 2, 2016 @ivanix Thanks for the tip on checking the css. I've done so, and nothing is wrong, though it did put me on the right path. I'm closer to finding the issue. So I *THINK* what's happening, is the canvas loads at 1920*1280 (3:2) then phaser SHOW_ALL gets called. Phaser then looks at the innerWidth (568) and to keep the case aspect ratio, 568/1.5 (3:2), the height comes out at 379, which is where my issue lays, as the innerHeight is 320. After digging through the code, I have a sneaky suspicion that Phaser isn't actually looking at what maximum height that fits into the the inner dimensions. Here's the SHOW_ALL function: https://github.com/photonstorm/phaser/blob/v2.4.4/src/core/ScaleManager.js#L1659 I'm thinking, maybe I have to try to solve this with USER_SCALE, Though any tips would be greatly appreciated! Link to comment Share on other sites More sharing options...
ivanix Posted April 3, 2016 Share Posted April 3, 2016 Here's a sample that should work for you: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Phaser Test Show All</title> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" /> <script src="http://cdn.jsdelivr.net/phaser/2.4.4/phaser.min.js"></script> </head> <body onload="" > <div id="canvasholder"></div> <style> html, body { margin: 0 auto; padding: 0; background: #0000ff; } canvas { border: 1px solid #00ff00; } #canvasholder { width: 99vw; height: 99vh; margin: 0 auto; } </style> <script> var game; function create() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; } game = new Phaser.Game(1920, 1280, Phaser.AUTO, 'canvasholder', {create: create }); </script> </body> </html> You are right in that Phaser does not go by the innerWidth and innerHeight of the window directly, instead it follows the dimensions of canvas's parent container. If the element you specified in Phaser.Game doesnt exist, phaser places the canvas inside the body element and follows it's dimensions. In the example above, if the style rules are removed for #canvasholder, you will see the issues you are describing where the canvas height will overflow. Another possible issue with mobile devices will be the viewport setting. without the settings in the example, some browser will try to zoom out to fit the content and this may cause havoc afterwards. Hope this helps! : ) Link to comment Share on other sites More sharing options...
saqsun Posted August 7, 2017 Share Posted August 7, 2017 @ivanix Thanks a lot! You save my day Link to comment Share on other sites More sharing options...
Recommended Posts