Help understanding World vs Stage, what is rendered, and why they don't match my Game dimensions

[Dylan Cristy]

Hi, new to Phaser.  I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions.

I am using Phaser 2.6.2.  I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true.  In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER).

As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom.

However, I noticed that there seems to be an "edge" in my game where rendering stops.  I added a debug rectangle set to the bounds of my button group, and I didn't see it.  I then set the y value to be bounds.y -100, to push it "up", and this is what I see:

You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons).  And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color).  But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off?

I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()):

world x: -156
world y: 0.5
world height: 75
world width: 920
stage x: -156
stage y: 0
stage height: 920
stage width: 920

 

Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot.  The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering.

I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game?

So my questions are:

What is causing the rendering to cut off where it is?  Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered?

Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one?

Why are the buttons still visible even though they appear below the line where  rendering is getting cut off?

If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be?

Bonus question:

The answer here:

Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage?  How exactly do you do that?  I had added them by adding a group to the Game, then adding the Button objects to the group.  Does that mean they live in the World?  Or the Stage?

[samme]

In the beginning there is a void, then Phaser makes a Stage, then on the Stage Phaser makes a World. Anything you add to the World or Stage will get rendered.

Start by keeping it simple:

• Use NO_SCALE first, SHOW_ALL later
• Use the game.add.* methods. They add to World by default.
• Don't change any Stage properties except backgroundColor
• Use only World#setBounds to resize.

I think I have seen that issue with the debug display getting cut off, but that may be a problem with the debug component itself.

[Dylan Cristy]

Gotcha.  The hierarchy is Game > Stage > World.

Interesting that you think the rendering problem is debug specific.  It would certainly fit with what I have seen, which is that I have only noticed the problem with debug text and geometry.