What is the most efficient way to draw thousands of sprites on stage?

[caymanbruce]

I need to put thousands of shapes onto the stage and currently I am using PIXI.Texture. I draw a PIXI.Graphics object and then convert it into a PIXI.Texture using `RenderTexture.create().` Then I get a sprite from the texture.

But when I draw 3000+ objects on my canvas I find the FPS drops from 60 to 30. If I draw 6000+ objects it slows down everything and my laptop's fan is roaring.

I have found some article on https://stackoverflow.com/questions/23468218/draw-10-000-objects-on-canvas-javascript saying that in pure canvas javascript we can just put different layers/canvas on the screen to draw like 1000 object in one layer. But what is the correct way to do this in PIXI?

[Fatalist]

ParticleContainer.

http://www.goodboydigital.com/pixijs/bunnymark_v3/

[caymanbruce]

8 minutes ago, Fatalist said:

ParticleContainer.

http://www.goodboydigital.com/pixijs/bunnymark_v3/

Thanks for quick response. I can only see a blank screen of the link and a stats.js dom. Is it WebGL? In ParticleContainer, can I remove or add an object very easily? Is it OK if the sizes of objects vary from one another?

[Fatalist]

So your browser does not support WebGL. See canvas version here: http://www.goodboydigital.com/pixijs/canvas/bunnymark/

"In ParticleContainer, can I remove or add an object very easily? Is it OK the objects are different sizes? "

yes.

 

[caymanbruce]

5 minutes ago, Fatalist said:

So your browser does not support WebGL. See canvas version here: http://www.goodboydigital.com/pixijs/canvas/bunnymark/

"In ParticleContainer, can I remove or add an object very easily? Is it OK the objects are different sizes? "

yes.

 

Cool. Very nice demonstration. I think I have a lot to learn...