Sledge Posted November 27, 2016 Share Posted November 27, 2016 For 2.6.2. ScaleManager.SHOW_ALL restricts the width of the Phaser element to the browser window but will merrily let the height trail off the bottom. I notice that the example for 2.6.2 makes use of scale.setScreenSize() but that this throws an error so I guess it's out of date? My code: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>Phaser Test</title> <script src="js/phaser.min.js"></script> </head> <body> <div id="phaser_container"></div> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(1280, 720, Phaser.AUTO, 'phaser_container'); var fpsText; var stateA = { preload: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.time.advancedTiming = true; },// end preload create: function(){ fpsText = game.add.text(0,5,'', {font:"32px Arial", fill:"#dddddd", align:"right"}); },// end create update: function(){ fpsText.text = game.time.fps; fpsText.x = game.world.width - fpsText.width - 5; }// end update } // end stateA game.state.add('stateA', stateA); game.state.start('stateA'); }; </script> </body> </html> Link to comment Share on other sites More sharing options...
rzuf Posted December 1, 2016 Share Posted December 1, 2016 I have the same issue. Although it only happens, when I inject the game into the <div> element. When the parent argument is left blank in the game's contructor, the game scales perfectly, but is not centered by the <div>. Any ideas? Link to comment Share on other sites More sharing options...
rzuf Posted December 3, 2016 Share Posted December 3, 2016 So, there's this thing in the getParentBounds() method: var clientRect = parentNode.getBoundingClientRect(); For some reason, the <div> element that I get the dimensions for by calling getBoundingClientRect() doesn't care at all about height of the browser window. Therefore, as a duct-tape solution, I changed this: bounds.setTo(clientRect.left - parentRect.left, clientRect.top - parentRect.top, clientRect.width, clientRect.height); to this: bounds.setTo(clientRect.left - parentRect.left, clientRect.top - parentRect.top, clientRect.width, visualBounds.height); and the game is now properly scaled! Wooo! No idea what's the real issue is here tho. Link to comment Share on other sites More sharing options...
Sledge Posted December 3, 2016 Author Share Posted December 3, 2016 Nice work! On 12/1/2016 at 4:42 PM, rzuf said: Any ideas? Yep, thanks for the tip there. I had a look into it and you can defo get it centered. Here's an example: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>Phaser Test</title> <script src="js/phaser.min.js"></script> <style> html {padding:0px;width:100%;text-align:center;} body {padding:0px;width:100%;margin:0px;background:grey;text-align:center;} canvas {margin-left:auto;margin-right:auto;} </style> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(1280, 720, Phaser.AUTO); var fpsText; var stateA = { preload: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.time.advancedTiming = true; },// end preload create: function(){ fpsText = game.add.text(0,5,'', {font:"32px Arial", fill:"#dddddd", align:"right"}); },// end create update: function(){ fpsText.text = game.time.fps; fpsText.x = game.world.width - fpsText.width - 5; }// end update } // end stateA game.state.add('stateA', stateA); game.state.start('stateA'); }; </script> </body> </html> Excellent catch with bounds.setTo() -- thanks for sharing. Link to comment Share on other sites More sharing options...
samme Posted December 4, 2016 Share Posted December 4, 2016 You don’t need all that. All you need is game.scale.parentIsWindow = true; or an explicit height for the game container: #game-container { height: 100vh; } For centering you can use pageAlignHorizontally and pageAlignVertically. plicatibu 1 Link to comment Share on other sites More sharing options...
rzuf Posted December 4, 2016 Share Posted December 4, 2016 Wow, thank you @samme! Any reason why this isn't a default setting? Link to comment Share on other sites More sharing options...
Sledge Posted December 4, 2016 Author Share Posted December 4, 2016 52 minutes ago, samme said: You don’t need all that. *All* that?! Including a css stylesheet -- the same stylesheet you presumably use to normalise the browser context for every project -- is one line. Attempting to get the same result programmatically takes several lines and still fails to address the body margin not being zero by default, leaving the canvas bleeding off either the side or bottom of the window (depending on whether it is tall or wide). Just set it up once in normalise.css and be done with it. Anyway what I really need is the phaser.io example not to be broken in situ. Link to comment Share on other sites More sharing options...
samme Posted December 4, 2016 Share Posted December 4, 2016 @rzuf I think Phaser expects you to either style the container to apply a height or tell it to treat the window as the container. This way it doesn’t try to guess what you want. The 2.7 docs explain this better than the current ones. @Sledge sorry I was curt, I meant you don’t need to do any extra scripting to find the correct container height. The CSS is fine. plicatibu 1 Link to comment Share on other sites More sharing options...
Recommended Posts