Jump to content

SHOW_ALL only seems to care about width


Sledge
 Share

Recommended Posts

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

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

Nice work!

On 12/1/2016 at 4:42 PM, rzuf said:

Any ideas? :wacko:

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

52 minutes ago, samme said:

You don’t need all that.

*All* that?! :D 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

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

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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