Jump to content

Scaling behaviour when injecting game into div


PicoFoundry
 Share

Recommended Posts

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.onload

window.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.js

this.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:

post-15157-0-46853700-1435686355_thumb.p

 

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.

post-15157-0-54219600-1435686640_thumb.p
post-15157-0-11065900-1435686880_thumb.p

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.

post-15157-0-46853700-1435686355_thumb.p

post-15157-0-54219600-1435686640_thumb.p

post-15157-0-11065900-1435686880_thumb.p

Link to comment
Share on other sites

I discovered a hack that removes the scroll bar.

 

In phaser.js

 

change

this.windowConstraints = {         right: 'layout',        bottom: ''     };

to

this.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

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 scrollbars

http://candy-demo.enclavegames.com/

 

I don't see what I am doing differently.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...