I call a "primitive" an object rendered with drawCircle(), drawRect(), …
Considering that:
What is the fastest way to draw multiple instances of the same primitives at different locations:
For the sake of clarity, if I have bullets simply rendered with drawCircle(), and knowing that I receive the complete state of the game each frame (that is the constraint (1)), what is the fastest way to render them all ?
(1): I do not know that at instant t bullet 1 is at position p1 and at instant t+1 bullet 1 is at position p2. But I do know that at instant t there is a bullet at position p1 and at instant t+1 there is a bullet at position p2.
I would go with option 3: Another Solution.
It is generally better to use Bitmap Sprites when possible, since they are more optimized for the GPU. (More info here https://github.com/pixijs/pixi.js/issues/1390)
You can easily render your primitive graphics into a reusable texture.
// Render a circle to a texture
var texture = new PIXI.RenderTexture(renderer, 16, 16);
var graphics = new PIXI.Graphics();
graphics.beginFill(0x44FFFF);
graphics.drawCircle(8, 8, 8);
graphics.endFill();
texture.render(graphics);
Then create a sprite from the texture
var s = new PIXI.Sprite(texture);
Here's an example that creates multiple sprites from a single texture.
http://jsfiddle.net/gzh14bcn/
Notice how this code doesn't even require an update function to redraw each frame. You just render the stage once at the end.
So if you have multiple bullets, you can just create a Sprite for each bullet and update it's position as it moves. Once it's off screen, remove reference to it and the GC will clean it up.
If you want to optimize even further, you should consider using an Object Pool for your bullets. https://en.wikipedia.org/wiki/Object_pool_pattern
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With