3
\$\begingroup\$

I am using Phaser to build a zoomable / pannable 2D map with the intended functionality being that the home camera position is always in the middle of the World coordinates. I have a problem where my Stage (Phaser.Stage) size is slightly smaller than my explicitly-set World coordinates, and it appears that my groups (Phaser.Group) within my world (Phaser.World) are the same size as the Stage (less than my world size).

From http://docs.phaser.io/Phaser.World.html:

By default a world is created the same size as your Stage.

I am aware that Stage comes from PIXI and is used for rendering:

A Stage represents the root of the display tree. Everything connected to the stage is rendered.

From http://docs.phaser.io/Phaser.Stage.html

The Stage controls root level display objects upon which everything is displayed. It also handles browser visibility handling and the pausing due to loss of focus.

I have learned from the html5gamedevs.com forums that Camera (Phaser.Camera) does not have zoom capabilities (or multiple cameras) built-in at the time of writing this question (Phaser v2.1.1 | Pixi.js v1.6.1). Based on my experimentation so far, I believe that the camera translation (x, y) works by translating the world coordinates. However, I'm still running into some escaping issues regarding a camera offset with my zoom system.

I have not yet found any examples online (including the official Phaser examples) of working directly with the Stage (Phaser.Stage), or how the stage dimensions play into the World, Camera, and Groups.

What is the relationship between the Stage and the World in Phaser?

\$\endgroup\$
  • 3
    \$\begingroup\$ Please don't self-vandalize your questions. If you'd like your account disassociated with this question, please use the "contact us" link at the bottom of the page to speak with SE community management. \$\endgroup\$ – Josh Apr 9 '16 at 21:14
1
\$\begingroup\$

The dimensions of the Stage (and the parent Group containing the Display Objects) is equal to the absolute value of the combined dimensions and positions of every Display Object in the Group, on the Stage, and in the World.

Example: if you have a World that is 100 (width) x 100 (height) but bounded to -50, -50, 50, 50 such that 0,0 is in the center of the World, and you have 2 display objects that both have the same dimensions of 10 (width) x 10 (height), then the width and height of the Stage will vary based on their placement within the world.

If the first display Object is at xy location (-50, -50), and the second display object is at xy location (40, 40), then the dimensions of the Stage and the parent Group will be 100 x 100.

However, if they are placed at (-10, 0) and (0,0) respectively, than the dimensions of the Stage and the parent Group will be 20 (width) x 10 (height).

As of Phaser 2.2.2, the camera implementation appears to move the World coordinates only; zooming / panning must be poly-filled using Group scaling and adjusting the pivot property of the parent Group.

EDIT: Zooming is now working in later versions of Phaser.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.