[Static and Moving Textures] - Best practice

[IncToast]

Hi,

I wonder what would be the best choice to manage multiple layers  (some are mainly static, some are moving each frame). The layers are in fact the z index. Each layer contains approximatly 1k to 2k textures

Example :

1. [Z index 0] Background (Static)
2. [Z index 1] Elements (Moving)
3. [Z index 3] Foreground (Static)
4. [Z index 4] Elements (Moving)
5. ... more and more

I have two options but can't find exactly which one would be the best. The goal is to be the most efficient for the client rendering action. I'm pretty new to Pixi and i maybe missed a magic component for my need ?

• Solution 1 :  Each z index is on a container and the stage renders all containers each frame
• Solution 2 : Manage multiple canvas and each canvas refers to a specific z index. Only edited stages are rendered each frame
• Solution 3 : Any other solution ? ?

 

Thank you

[ivan.popelyshev]

Solution 2, separating to two-three canvases and updating only moved ones, using css-translate on background helps for very old mobile devices that have problem with layering < 2014 year.

Texture size is not important at all, what is important - how many pixels are you filling (including those several times)?  That's the bottleneck.

Edited October 8, 2020 by ivan.popelyshev

[ivan.popelyshev]

I know its difficult to "draw the rest of the hecking owl", but here is my take on it: https://codesandbox.io/s/wild-microservice-e0f48

systems, entities, and pixi runners that work through systems to fire global events.

[IncToast]

2 hours ago, ivan.popelyshev said:

Solution 2, separating to two-three canvases [...]

Thanks for the answer. If i'm right :               X canvas means X PIXI.App ??

_______________________________________________________________________________

1 hour ago, ivan.popelyshev said:

I know its difficult to "draw the rest of the hecking owl", [...]

Wow, thank you VM for this huge example. I have never heard anything about PIXI.Runners. They look insane. It requires me to modify my global algorythm, but will for sure give me better comprehension of the code.
I have a question about PIXI.runners. It says "A Runner is a highly performant and simple alternative to signals". 

How do they really work in an app. Are they something like WebWorkers ? How are they so "highly performant" ?

Edited October 8, 2020 by IncToast