Camera for Pixi.js

Recommended Posts

I am pretty new to the Pixi.js so I'm seeking advice from community on what is the best approach to have easy and efficient camera.

Basically what I want is to have two main containers in the scene:

The first one to represent the game world. Since world can be quite big, the camera is required here to show only small portion of the world.

The second container to display all GUI elements, such as player healthbar, menus, scores etc. Since this container will always be the size of the viewport, no camera is required here.

I looked at how camera is implemented in Phaser.io (which uses Pixi.js as a graphical engine) and it seems that all they do is just move "root" container in the direction opposite to camera movement (and scale it to represent camera zoom in/out). While this approach works, it has two issues:

It seems quite inefficient to move root container, since this will cause recalculation of transfom of all the objects in the scene tree.

I would also like to be able to "flip" the Y-axis of default Pixi's coordinate system (i.e. I want Y-axis to be pointing up like in conventional Cartesian coordinate system, not down). Unfortunately, I don't see an easy way to achieve this with this camera approach.

I think the better way would be to modify projection matrix before rendering "world" container, i.e.:

set projection matrix according to current camera position / zoom

render world container

set projection matrix for rendering GUI container

render GUI

Does this look like a sensible approach? How can I achieve something like this with Pixi?

Also it is not necessary to move position of the camera, there's "container.pivot" which behaves like "camera position". Basically, you set position to the center of the screen and pivot to the world coordinates that are corresponding to it.