Camera for Pixi.js

[Alik]

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!

[ivan.popelyshev]

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".

[Alik]

Thanks Ivan, that looks interesting. I'll have to dig into it a bit.

[hayesmaker]

@ivan.popelyshevIs the gameofbombs/pixi fork still supported? What's the easiest way to use some of these modules such as Camera2D with a more recent version of pixi?

[ivan.popelyshev]

yeah, its time to make new iteration of that thing! some things are available in https://github.com/pixijs/pixi-display/tree/layers 

tell me what features do you need now, and ill start iteration with them. i'll need testers!

[hayesmaker]

really just need a Camera2D with a few nice features like zoom, minimap! Happy to test!

[ivan.popelyshev]

Ok, I wrote it down. I'll implement camera2d and proxies as a plugin without needing all that 3d stuff