Using PIXI as a 'view'

[Nakozan]

Hi!

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.

[ivan.popelyshev]

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.

References:

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.

[HernanZh]

I did a similar thing! I wrapped Pixi in a canvas 2d API.  I posted details here: http://www.html5gamedevs.com/topic/23129-pixi-canvas-pixi-in-a-context-2d-api

Ivan, do you think you could take a look and give some tips on how to improve performance?

 

[ivan.popelyshev]

http://www.html5gamedevs.com/topic/23129-pixi-canvas-pixi-in-a-context-2d-api/

Looking at that, I realized that I want to make my own context-2d imitation, because others are not balanced, they want to reproduce canvas2d API completely instead of making actual view.