Camera for Pixi.js

Recommended Posts

Hello everyone,

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 (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:

  1. It seems quite inefficient to move root container, since this will cause recalculation of transfom of all the objects in the scene tree.
  2. 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?

Thanks for advice!

Share this post

Link to post
Share on other sites

Already done in . Part of this fork that responsible for z-index is in which is compatible with v4. As for projection, it will be a long time before I have an implementation that can survive @englercj and @GoodBoyDigital screening.

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.

For reversing Y coord, you'll have to rotate all textures too: "texture.rotate = 8".

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.