Comments (1)

By robin, February 3, 2010 12:14 am

Particle effects are made by taking a lot of small bitmaps and varying their location and attributes over time. The resulting ‘animation’ can look like fire, smoke, or nearly anything else you like.

Normally when coding these you create a small particle class or struct, and it holds things like position, color, direction, acceleration, alpha, scale, etc. These properties change each update which makes them ‘come alive’. You then assemble a bunch of these particles into ‘effects’ or some such thing. To leave a trail, or create blowing smoke, you can drop a series of these effects.

Our approach is similar, but we don’t use a particle class. Instead we use a random number between 0 and 1, and an equation. The random number is used to vary an effect, otherwise they can look very symetrical. So for example the alpha can be (255 * nextRandom()) to have it vary between invisible and visible. To make it also fade in, it can be (255 * nextRandom * t). To make it ease out on fading it can be (255 * nextRandom * Easing.FadeOutQuad(t, 255, 0)). I think you get the idea.

So instead of particles, there is just a calculation waiting to happen. Not having to deal with individual particle instances or state allows you to do things like change the particle count on the fly (by simply changing the loop size), or reverse time by changing ‘t’.

For anyone who does Flash, I’m sure the Easing idea is familiar. Robert Penner’s easing equations are universally popular, as they allow people to easily add tweening, fading and bouncing from code. I’m basing the equations on these, and adding a few non easing ones that are useful for particles (trig functions, weird functions, etc).

Rather than store the random numbers for each particle (which would require a particle class), we store the random seed and regenerate the same sequence of random numbers each update. This may sound slow, but reasonable random number generation can be surprisingly simple and blazingly fast (one billion numbers in 1.8 seconds on a p4!). We are using the FastRandom class by Colin Green which is really fast, and a drop in replacement for System.Random. This allows resetting the random seed without penalty. This is important as we reset the seed every update in order to get the same random number sequence time. It is also easy to extend – we have added saving state, so for example we can start at the 500th random number of a given seed without going through the first 499. Awesome code, I’d recommend using it for anything random in your game.

Note this code is available at http://www.codeplex.com/swf though the particle part hasn’t yet been added (using git locally, so it is a pain).

Here are some quick demo videos, I’d like to say they will clear up this crappy explanation, but I’ve seen them.

Part 1

Part 2

Comments Off

By robin, July 3, 2009 11:40 am

It is a bit counter intuitive to a Flash developer, but in Scaleform (swf for video games) it is more efficient to take all your bitmaps and put them in a single png. You then take specific rectangles in that png and use them for your bitmap image symbols. I had to do this on a recent project, and decided to build a tool using the swf format library I made a while back.

It ended up not being fully automated due to time constraints (I had some trouble recreating the file exactly with the new bitmap info and only needed a few swfs converted that were easy enough by hand). What it does is parse the swf finding all images, consolidate those onto a single png, and then output all the name/rectangle information. To create the rectangles in Flash, you can copy the output to the jsfl below (replace the array contents), and put that in your commands folder — then run it from the ide (be sure ‘no fill’ is set). Place the broken apart bitmap on the same layer, and you can copy and paste into symbols.

var rects =
[
	{X:67,Y:614,Width:316,Height:32},
	{X:780,Y:274,Width:38,Height:38}
];

var dom = flash.getDocumentDOM();
for(var i = 0; i < rects.length; i++)
{
	var r = rects[i];
	dom.addNewRectangle({left:r.X,top:r.Y,right:(r.X + r.Width),bottom:(r.Y + r.Height)},0);
}

One day I may finish this, it would be nice to get into the build system, and even put on a dial. Also some images may be best left unmapped for various reasons, it would be nice to mark those.

Download (it is the SwfBitmapPacker project, requires VS2008 Express and windows)