Monday, July 14, 2008

Animated Gradient Masks (or how to thrash a cpu)








(use keyboard "x" to light and extinguish the firefly's light)

OK, two quick notes on this one before I start:
1) The details will make or break your project. When I studied architecture we learned that it's better to build 20% less building and put that extra time and money into the little details. You can't just shave 20% off your requirements, but the math is still the same. You really need to budget in the time for the little things. I say all of this as an apology for not paying attention to the details myself. Unfortunately, with these little examples I'm tossing up I just don't have time to do more than reach a proof of concept point, so you'll have to forgive me. For instance, I would have preferred to give the bug a little random drifting motion when stopped and to use scaling to allow it drift "up and down" as well. It could also use some buzzing wings. For the time being though we're just going to have to settle for seeing the masking work.
2) Animated Gradient Masks will KILL your CPU. Flash 10 will have access to the GPU, but I'm withholding judgment on whether that will be any easier on the CPU.

OK, on to the post: What I wanted to do with this one was to demonstrate how an animated gradient mask can do a great job of imitating uneven light flickering. A candle would have probably been more appropriate as a source (I don't think fireflies flicker that much) but hey, I wanted to do a firefly. The way this works is by first placing a darkened background on stage. After that, I create three light pools. The first two are very close in size, and shift positions slightly at a very high rate to create the flicker. The third has a wider radius and is more diffuse, giving a general lighting effect. For each of the three light pools I have a full copy of the background, this time brightly lit, added to the stage. Each of these instances has a mask applied to it by simply calling MovieClip.mask. Finally, I add an elliptical shape to each of the mask MovieClips, and apply a blur filter to that shape. I also set the alpha back to around 30%. This gives me my three dim, overlapping pools of "light" (where the bright versions of the background show through the mask). The two flicker pools are animated on enterFrame to create the flicker. The last thing to do is to have all three light pools track the firefly, which is as simple as setting the x and y of the elliptical shapes within each mask to the x and y of the firefly. I'll post some code on that a little later.

I'm going to reiterate that animating the gradient mask really pushes the CPU. Pull up your CPU gauge of choice and switch the light on and off while watching it to see how bad it is. This technique is best for temporary effects, such as flares. I've used it to show candles lightening then brightening a room. Once the general level of light gets high enough to drowned out the flickers I just removed them and saved that CPU. Hopefully the flash rendering engine will continue to improve.

Next up? I'm not sure. I have a lot of little things I'm working on, but something in the back of my head keeps nagging me to go ahead and build a game in Silverlight. We'll see...

1 comment:

Anonymous said...

Great blog!

Looks like I got another addition to my Reader (that is already out of control).

Pretty cool to read a blog from the guy who shot our wedding. :)