Jump to content

Scaling behaviour when injecting game into div


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:



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

I discovered a hack that removes the scroll bar.


In phaser.js



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


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



I don't see what I am doing differently.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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