PicoFoundry Posted June 30, 2015 Share Posted June 30, 2015 I was having some scaling problems with my game, until just a few minutes ago, and I am wondering if someone might be able to help me understand why I saw this behaviour. I wanted the game to scale, keeping the same aspect ratio, such that it always fit within the borders of the browser window. Initially I had created a div in my HTML file called 'gameContainer' which is where I injected my game when creating my game object. So in index.html I had this line in the body to define the container div:<div id="gameContainer"></div>I created the game on Window.onloadwindow.onload = function() { var game = new Phaser.Game(960, 640, Phaser.AUTO, 'gameContainer'); game.state.add('Boot', JumpFrog.Boot); game.state.add('Preloader', JumpFrog.Preloader); game.state.add('MainMenu', JumpFrog.MainMenu); game.state.add('Game', JumpFrog.Game); game.state.start('Boot');};and the scaling was set in Boot.jsthis.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;this.scale.pageAlignHorizontally = true;this.scale.pageAlignVertically = true;However, when I tested the game, I saw this kind of behaviour, where the game is now scaled to fit the screen, and requires a scroll bar: After looking at a few tutorials I decided, on a whim, to remove the gameContainer div in the html file, and just tell it to create the container, and this worked much better. There is still a scrollbar but I can see the entire game, and in addition, when I change the size of the browser, both vertically or horizontally, the game changed size to be within the borders.I am wondering why this is happening. Also, is there any way to ensure that no scrollbars show up? It is much better now, but I would prefer it fit within the browser window and not do this. Link to comment Share on other sites More sharing options...
_o0o_ Posted June 30, 2015 Share Posted June 30, 2015 I don't know if you knew but there are project templates available in the main Phaser repo on GitHub. I haven't used them myself yet, but I think you might find this one very useful. https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Responsive Link to comment Share on other sites More sharing options...
PicoFoundry Posted June 30, 2015 Author Share Posted June 30, 2015 Thank for the reply. I had seen the templates, but won't that one simply fill the entire screen and change the aspect ratio? Link to comment Share on other sites More sharing options...
MrRoboman Posted June 30, 2015 Share Posted June 30, 2015 I discovered a hack that removes the scroll bar. In phaser.js changethis.windowConstraints = { right: 'layout', bottom: '' };tothis.windowConstraints = { right: 'layout', bottom: 'layout' };This makes the getParentBounds function recognize vertical scaling. Then, in getParentBounds: function(target)add bounds.bottom -= 8;getParentBounds: function (target) { ... if (wc.bottom) { var windowBounds = wc.bottom === 'layout' ? layoutBounds : visualBounds; bounds.bottom = Math.min(bounds.bottom, windowBounds.height); bounds.bottom -= 8; //added to remove scroll bar on scaling } ... },It's hacky, and it probably distorts your aspect ratio ever so slightly, but it works for me Happy coding! Link to comment Share on other sites More sharing options...
PicoFoundry Posted June 30, 2015 Author Share Posted June 30, 2015 I might have to try that, but I would rather not make a hacky change if possible. I was looking at this tutorial: http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723 which uses Phaser 2.0.7 and I thought I did pretty much the same thing, except if you look at the working version of it, it is responsive, and there are no scrollbarshttp://candy-demo.enclavegames.com/ I don't see what I am doing differently. Link to comment Share on other sites More sharing options...
MrRoboman Posted June 30, 2015 Share Posted June 30, 2015 Okay, how about this: Keepthis.windowConstraints = { right: 'layout', bottom: 'layout' };But don't usebounds.bottom -= 8;because, yea, that's super hacky. But add<style> body { margin: 0; } </style>within the <head> element of index.html How's that? MishaShapo 1 Link to comment Share on other sites More sharing options...
PicoFoundry Posted June 30, 2015 Author Share Posted June 30, 2015 Thanks, that did work, and I don't feel too bad about it. I was comparing 2.0.7 and 2.3.0 and I see this is a change in Phaser since that time, which might explain the difference in behaviour. Link to comment Share on other sites More sharing options...
MrRoboman Posted June 30, 2015 Share Posted June 30, 2015 Right on! Link to comment Share on other sites More sharing options...
Recommended Posts