FPS drops about 10 frames after using DisplayList and DisplayGroup
In my setup the app.stage owns a DipslayList object and each player has its own DisplayGroup. I will add new sprites onto the player and new ones will be covered by its existing sprites. I have compared with and without using pixi-display plugin. Sometimes it drops about 10 frames. Sometimes it's OK. Is there a recommended use of this plugin?
It depends on number of elements that has displayGroup, and whether you sort them. If you have 10k elements i suggest you to learn how pixi updateTransform() works and think how can you optimize it for your case.
pixi-display is the best "runtime" solution, and of course you can make better only if you know "static" optimizations for certain game that dont calculate everything on every frame.
- Walk through all elements and determine which elements belong to which groups. That's a linear time algorithm, it has the same price that you are paying pixi for walks like "updateTransform" or "renderWebGL" (without cost of rendering itself).
- cheap, but 10k elements on slow computers will screw it. Optimize only if you know how to get rid of pixi updateTransform() too.
- Z-index sorting for groups: suppose we have a container with 1002 elements, two of them have different behaviour - one if in front and one is in back. If you just assign a "z-index" to all of them, you'll have to sort them all every frame. But with pixi-display you can assign them three different groups: one for back, one for front, and one for everything else, and thus the sort will work only on 3 elements
- that is cheap, most of developers dont think about that approach, that's our gem :)
- Z-order sorting inside a group: when you have 1000 elements on different distance from screen, put that distance into zOrder field and enable sorting in the group.
- that sort is slow, its the same sort as in phaserjs. First candidate for optimizations.
Currently I have custom "display" solution for 10k elements that uses CPU only when it needs to re-sort something. I will publish it later.
btw, there's new version: https://github.com/pixijs/pixi-display/tree/layers , it has different API , its easier to understand and it allows to use filters/masks: https://pixijs.github.io/examples/#/layers/lighting.js
I re-open it because that's the best explanation i gave so far :)