Flint, Particles, and Animation Rendering

Sorry all for my abysmal rate of posts recently. To say the least, I’ve been busy with “A Stitch in Time” rolling into full development. However, that’s not to say that I don’t have material to post on – just lack of time to write about it.

However, I’ll take a sec here to cover one new area I’ve been getting heavily into: particle animation. For bigger, more complex animations like fire, smoke, and falling water, there is nothing quicker, easier, and better looking than a simple particle system. So, I’ve become a huge advocate of the Flint particle system. For those unfamiliar, Flint is an open-source particle engine built in AS3. It is super object-oriented, and may look a little intimidating at first if you’re not entirely comfortable with importing and instancing classes. However, you get the hang of it as you use it.

Flint makes some great animations. I set up a waterfall with a series of 6 particle emitters flowing down over an illustrated rock face, and it really looked beautiful. However, they also amounted to about 1200 particles – which proved to be a massive CPU hog. Ugh. Beautiful animation, but completely useless to my game world given that they’d cut the environment’s frame rate in half. So, I got thinking… how could I get the same animation without a performance hit?

The answer came from one of my own past blog posts about writing images out of flash. The post covers a script I had written to use the Adobe corelib’s PNG encoder to capture a display object as bitmap data and send to to PHP to be written. I was curious… would that work for “filming” a PNG sequence of a particle animation? 15 minutes later, I found the answer is – yes, it would.

The tool I built was simple: just snap a BitmapData image of a MovieClip on stage for X sequential frames, storing each frame in an array. Once X frames have been captured, encode each item in the array as a PNG and send it off to PHP to be written as a file. Now, that’s a pretty heavy burden on a network connection when you’re sending a sequence of 30+ PNG images off using URLLoaders. However, I tried the process running PHP locally on my Mac using MAMP, and it worked perfectly – with 1 second of 30FPS image capturing and less than a second of file writing, I had a folder full of pre-rendered particle animation frames. I did some post-production to make them loop, dropped the frames into a MovieClip, and stuck them into the game world. The waterfall looks fantastic, and there was no loss of performance.

The only downside to this solution is –obviously– filesize. Flint gave me a beautifully random animation for 16Kb. Pre-rendering gave me a beautiful 15-frame loop for 250Kb. This is certianly a compromise, and one that I would be very mindful of for larger animations intended for the web. However, in my circumstance I’m more focused on performance than filesize, so this worked for me. Hopefully, this may give other folks some ideas on routes to explore while optimizing animations.


1 comment so far

  1. Chris Armstrong on

    Sounds like Stitch is gonna be a pretty gorgeous game, cant wait to see this stuff in action

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: