Jump to content

Using PIXI as a 'view'


Recommended Posts


We are working on a small game, and we are trying to do so while maintaining a clean architecture, and clean code. We are also keeping up a high test coverage.
We don't want to completely rely on PIXI, we want it as a module to use it as a renderer, and we are trying to make it interchangeable any time.
So we maintain our own state tree with positions, velocities etc, because storing these are really the responsibilities of the business logic.

If PIXI had just a render method, like canvas has, it would be easy to just render everything in every frame based on our own state-tree.
But this is not the case, because PIXI forces us to store all the data (rotation, alpha, positions, anchors etc...) inside PIXI stages/sprites/containers, which totally messes up the principles of just using it as a 'view', and not a controller with responsibilities.
The question is: how can we cleanly separate PIXI, and really only use it as a renderer.
I hope you can help us, because there are no other libraries with this much cool features.

Thank you for your time, I'm waiting for your answers.

Link to comment
Share on other sites

Yes, you can use PIXI as only renderer, there is just not enough docs for it, I had to learn it by studying all the pixi code. I agree that PIXI scene graph is not the best solution for all projects. 

You can make your own state-tree by adding new renderer plugins. Its not that difficult if you know how PIXI works internally. I succeeded and now we have a fork that allows 3d manipulations and many other things: https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards

So, required minimum:

1. copy SpriteRenderer and make it accept your data from your states and not sprites

2. Add some transform manipulation there. You can copy Transform class and change the way it computes things

3. Override or make new render method for WebGLRenderer and CanvasRenderer, you dont want it to assign temporary parents or doing all that not necessary stuff.

4. Learn how pixi-gl-core works, its even more basic API that is used by pixi renderers.


1. Basic pixi plugin. Very simple, but that way you can understand the architecture: https://github.com/pixijs/pixi-plugin-example

2. Advanced plugin, allows to store all sprites without populating the tree, in float32buffer: https://github.com/pixijs/pixi-tilemap

3. Example of function from my new plugin that allows to traverse the subtree of pixi and render it: https://github.com/gameofbombs/pixi-display/blob/master/src/DisplayList.js#L143

4. One of the most difficult things in pixi - particleContainer: https://github.com/pixijs/pixi.js/tree/dev/src/particles , does not care about transformations, uses children sprites only as a storage for data.

Link to comment
Share on other sites

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