I’m a sucker for a good particle effect. They seem like magic to me and are one of the most fun parts of making a game. I recently stumbled upon a really efficient method for making a particle system that can render thousands of particles on screen while maintaining 30 frames per second more more.
I’ll give you complete source for the clock after the jump.
So the above clock shows a tricked out version of what you can achieve with this method.
There are a few drawbacks, but for most flash games they don’t matter. For one, your particles will be dots. 1-pixel dots. its easy to accomodate for this by blurring the bitmap a bit. Then they look like nice soft glowing dots.
Another is, since you are drawing the particles to a bitmapdata, your performance will be hurt if the bitmapdata is too large. But most flash games are relatively small, so this system is great for games.
In pseudo-code, here is the basic breakdown of how the system works.
- Create Two Bitmaps: One to draw the particle system, and one to be used to determine the initial placement of particles.
- Use BitmapData.draw() on the DisplayObject you want to explode into particles.
- Loop through the resulting bitmapdata using getPixelAt32() or getPixelAt() if you image is not transparent, and initialize a new Particle at the x and y coordinates of any white pixels in the source.
- Add each particle to an array.
- Now on every update, draw the particles to the particle canvas bitmapData.
- Use a perlinNoise Bitmap to add a bit of wavy randomness to the path of the particles.
- Use a displacement map filter to make it soft and blurry.
- Whenever a particle goes out of range, remove it from the array.
Pretty simple right?
This demo also uses my “AS3 Starfield ‘Flying Through Space’ only 4k” code for some special sauce.
Next… Code example of main class.
Pingback: ZhiOne: Read More! » Blog Archive » 5 New Flash AS3 Tutorials - everything about IT…
Tried this on my Desire 2.2 – went reeeeaaaly slowly – might want to check that all the pixels are being cleaned up before the next second ticks.
thanks for the comment. first off, I’m pretty excited to hear it plays on you mobile device. But you shouldn’t expect performance on your mobile that is equivalent to even a low-end laptop.
If you dig thru the code you’ll see that there are a number of processor-intensive operations involved. Probably the biggest hog is the displacement filter that give the particles a nice blur.
So to state the obvious: To make flash run well on mobile, you have to target mobile when you design it.
This little example pushes flash, so is not mobile appropriate.
If you want to use this code on mobile, I’d recommend making the stage smaller, and removing the blur.
As for clearing all the pixels by the end of the second, that could be troublesome,because you would have to assure that all the particles are moving fast enough to clear the edge of the canvas before another second ticks. But that kind of tuning, even setting a hard limit for the maximum number of particles, will really pay off when targeting low-powered devices.
Oh – two other optimizations that would help a lot on mobile:
Get rid of the starfield, and stop rotating the background.
I’m just wondering. Would it be able to detect particles collisions with each others using BitmapData?
As coded, I don’t think so, since the particles all get drawn to the same bitmap. So you couldn’t use a BITMAP to detect their collision in this case. But it would not be that difficult to determine if they collide from the particle positions. You could use circle-circle collision detection as I describe here.
http://plasticsturgeon.com/2011/03/actionscript-collision-detection-u-circle-circle-collision-detection/
Mind you – it will slow down your particles a lot. Because you add a significant amount of calculation. Also, it will not create sand-like collision detection, because it only solves for one iteration per tick. And it is easy to imagine a situation in which a particle collides with one, and when you move them to separate they are not colliding with a third or fourth particle. But if you want to make the particle avoid objects, or areas, that is certainly do-able.
Just wanted to thank you for taking the time to post this tutorial and sample. Thank you!