I’ve always been fascinated by the magical and organic effects that particle systems can help create. In video games, whenever you see smoke, flames, or steam, they’ve probably been made using particles. Systems can range anywhere from couple dozen to hundreds of particles, and span a wide range of effects. Simple changes to size, color, or transparency can cause surprisingly different results. Now, thanks to Flash 9’s performance increases, particle systems can provide a new level of realism within websites or Flash movies.
Let me warn you that I am just starting to experiment with particle systems. The code for this project doesn’t necessarily reflect the most optimized way of handling them. I plan to come back to this subject again soon using bitmaps instead of vectors to demonstrate the differences. Both systems will have pros and cons, I’m sure. For today, the vector-based particles perform pretty well. Mainly it depends on your parameters. The more particles on the screen, the slower the swf will run. Likewise, blurring and transparency can slow things down too. It’s important to keep things simple. Many cool effects can be made without needing a lot complexity.
Let’s dive right in!
//Instantiate a SteamParticleSystem //Note: There are constructor parameters, but the defaults are good for most situations var steam:SteamParticleSystem = new SteamParticleSystem(); //Optional parameters steam.lifetime = 500; //how long a particle will be visible steam.size = 10; //the size of an individual particle steam.color = 0xffffdd; //the color of a particle steam.transparency = 0.5; //particle transparency steam.baseBlur = 20; //the starting blur steam.blurRange = 10; //additional blur added to the base over time steam.jitter = 10; //horizontal velocity (randomly changes between 0 and jitter) steam.baseVelocity = new Point(0, -2); //vertical velocity //Standard Sprite stuff steam.y = this.stage.stageHeight; steam.x = this.stage.stageWidth / 2; this.addChild(steam); //Start up the system! steam.start();
Several parameters allow you to tweak the system and give you different effects. Larger steam particles could mean that a valve on a steam pipe is open wider. Flames with a higher jitter might make them look like they’re burning wildly in the wind. These systems are flexible, and experimentation will help you achieve the look you want. All three of the effects I built actually run from very similar code. The particles are circles with low alpha that have been blurred. The smoke is the most basic effect that only features movement. Steam adds size changing to the mix, and the flames take it a step further to change the color too.
Working on this project was a lot of fun. I spent a good deal of time tweaking things here and there, so it takes some patience, but seeing so many different effects with such basic changes feels very rewarding. I encourage you to download the source code, and build your own cool effects based on my examples.
Pingback: Projects updated for Flex 2! » Zeus Labs » Flash and Actionscript Insights from a San Diego Developer and Designer
Looks like you build a pretty cool thing, I do have some issues tho (hope you don’t mind):
I’ve gone through your code, I noticed you never use removeChild or delete or anything to remove any particles, running your example I could see the memory usage slowly rising over time. So that’s a bit of a memory leak you might want to patch.
Besides this I also wonder why you keep a particles array which holds all the particles, since Particle extends Sprite, so is allready managed and accesible through getChildAt and addChild etc. (but perhaps an array is faster access, that would be nice to know).
Pingback: More Fun with Flash 9 Particle Systems » Zeus Labs
Pingback: Particle System for Papervision3D « Game Development Juice