Alik Posted July 10, 2016 Share Posted July 10, 2016 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: 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? Thanks for advice! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 10, 2016 Share Posted July 10, 2016 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". Quote Link to comment Share on other sites More sharing options...
Alik Posted July 10, 2016 Author Share Posted July 10, 2016 Thanks Ivan, that looks interesting. I'll have to dig into it a bit. Quote Link to comment Share on other sites More sharing options...
hayesmaker Posted February 12, 2017 Share Posted February 12, 2017 @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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 12, 2017 Share Posted February 12, 2017 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! Quote Link to comment Share on other sites More sharing options...
hayesmaker Posted February 15, 2017 Share Posted February 15, 2017 really just need a Camera2D with a few nice features like zoom, minimap! Happy to test! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 16, 2017 Share Posted February 16, 2017 Ok, I wrote it down. I'll implement camera2d and proxies as a plugin without needing all that 3d stuff ClusterAtlas, Goon and hayesmaker 3 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.