Blood. Blood everywhere. How best to do it?

[nouse4aname]

I've got a pretty normal top-down arena shooter, and every time you kill something it leaves behind a semi-transparent pool of blood.  I don't ever want to clean that blood up.  I want it to accumulate for the entire game.  Just pools of blood everywhere. And I want to do this without killing frame rate.  So far I've had these ideas:

1) Sprites!  A butt-load of sprites.  I can get (on my system) a couple thousand sprites before the FPS really starts to noticeably drop.
Pros:  Super easy to do.  Literally like two lines.
Cons: Doesn't scale for longer games.  Layering sprites on top of each other will reduce/remove the semi-transparent effect.

2) Tilemap tiles.  Add a blank layer to my tilemap and then when something dies, replace it with a bloodied tile from the imagemap, and iteratively update the neighbor tiles so it looks consistent.
Pros: Should scale pretty well.  Won't have the transparency problem of sprites.
Cons: Technically more challenging, not sure it'll look as good having everything contained to 32x32 tiles.

3) Manually composite a bitmap using javascript.
Pros: It's one big-ass image that I can add colored regions to on the fly.
Cons: I'm not sure it's technically possible to dynamically update an image in use by a sprite in Phaser.  Having a world-sized image isn't going to make memory very happy (though this can maybe be mitigated with reduced resolution and stretching)

 

So, what are your thoughts?  Do you think any of the above are the correct solution?  Do you have another idea?  If I end up writing something new to solve this problem, I'll open-source it and make it available for y'all to use as well.

[nouse4aname]

I randomly stumbled across https://phaser.io/examples/v2/bitmapdata/draw-sprite last night, and so I think that #3 is my winner.  I did a test with a bitmap the entire game world size with 10,000 sprites drawn on (not that it would matter) and it never dropped below 60fps.  

[mattstyles]

I can get up to about 80k pixi sprites (using the pixi bunnymark, although Phaser uses an older version of pixi) before even a slight drop, 100k+ is still nearing 60fps and my GPU is fairly rubbish. Would you really have that many sprites going on? In the bunnymark they all move too, yours are presumably static so little work to be done.

I'd say just keeping drawing them is best, but, there is another solution too if you want to keep the sprite count down: do you really need all those blood splatters to stay forever? maybe have them clean themselves up after a while, perhaps lowering opacity over time until they disappear? or combining several close blood splatters into a larger single splatter sprite over time? 

[nouse4aname]

YMMV, but I was dropping frames at 4k sprites and ~100 P2 physics objects.  (I'd use Arcade but it's rubbish for collisions.)  One giant-ass texture with sprites drawn onto it, though, works great.  It's only one object, there's no update loop, and this way my blood splatters can stay forever, and overlap to automatically form larger pools dynamically.

[mattstyles]

Cool, sounds like a good solution to me! Glad its working!

[samme]

1 hour ago, nouse4aname said:

One giant-ass texture with sprites drawn onto it, though, works great.

RenderTexture is said to be good for this too.

[Xesenix]

7 hours ago, nouse4aname said:

YMMV, but I was dropping frames at 4k sprites and ~100 P2 physics objects.  (I'd use Arcade but it's rubbish for collisions.)  One giant-ass texture with sprites drawn onto it, though, works great.  It's only one object, there's no update loop, and this way my blood splatters can stay forever, and overlap to automatically form larger pools dynamically.

You can turn of physique on objects that don't need to be moved anymore.