Jump to content

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

  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!

Link to comment
Share on other sites

Already done in https://github.com/gameofbombs/pixi.js . Part of this fork that responsible for z-index is in https://github.com/pixijs/pixi-display 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".

Link to comment
Share on other sites

  • 7 months later...

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.

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.


  • Recently Browsing   0 members

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