2 questions about optimization with PIXI.JS

[Ocelyn]

Hello,

I have 2 questions regarding the optimization on Pixi.js

On this page https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips

On the Sprite part it says:
Use spritesheets where possible to minimize total textures
Sprites can be batched with up to 16 different textures (dependent on hardware)

I am not sure to understand perfectly the above statement.
So for exemple let says I want to display 40 differents buildings on screen.
In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ?

Also I created a fountain water particle using https://github.com/pixijs/pixi-particles
I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water.
Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2.

Thank you so much for your answers.

Best

Edited October 7, 2018 by Ocelyn
Fix error in text

[ivan.popelyshev]

1. There are two things you have to be aware about - number of texture changes, and amount of pixels drawn on screen.

You have to balance it, and there're no big bonuses from extreme cases lke "1 texture on all stage", only downfalls in case of "1000 texture changes on a stage". 40 drawcallas are nothing for PC, and with multi-texturign it will be down to 40/16 = 4 drawcalls, still nothing compared to the amount of pixels that is filled on screen.

2, No, its not possible, unless you learn how to hack hack hack pixi pixi pixi  . Second ParticleContainer that has the same gl buffers and children as first should work, but no guarantees, its a hack that I imagined a minute ago.

[Ocelyn]

Thank you so much Ivan for your answers, I will try to see if I can implement your idea !