Game1, Day 20 – Optimizing an animation’s frame count!

So my workflow right now involves drawing and animating the art in Flash, then saving the frames out as .PNG files and reducing and trimming them in Photoshop. I’m using Flash because I’m predicting that the next devices that come out (iPad 2, iPhone 5, etc.) will increase their screen resolution just like the last generation did with the retina screens, so Flash’s vector art scales up to any size nicely compared to bitmaps.

As an artist though, I like drawing and animating in Photoshop more… I’m used to the layout and I like the tools in it. Drawing with vectors in Flash, I use the Brush tool because I can free-hand my art which is faster than drawing it point by point and messing with bezier curves… but the trade-off is that the lines come out less accurate. I may draw a squiggle shape, like the profile outline of a face, but it won’t come out exactly like I draw… there’ll be little smoothed curves and such as the math guesses “close” to what I want.

That’s a big part of the reason the art is super sketchy, it’s hard to GET clean perfect line-art in Flash quickly, so I’m adapting to that.

The other catch is that while Flash has a lot of great tweening options (you set two keyframes and it figures out what to do with the shape’s position, scale, rotation, etc. in-between those frames), it also pumps out a TON of frames. It’s pretty easy to spot a game where the art was animated in Flash because there’s lots of extremely smooth animations.

Visually, that’s not a bad thing… 60 frames for a running animation looks way smoother and nicer than a 6 frame run animation. But when you’re making a game where you have limited space and memory, that 60 frames adds up FAST and next thing you know your game is huge or running slow on low-end systems.

This is my ninja’s Idle animation. I export the original Flash animation, which is 12 frames (starting from standing, to breathing full out, and back to standing), and then I go through and look at them and see “okay, which frames are necessary for the animation? I need the first frame for sure, that’s what other animations are based off. And I need the middle frame, where he’s in the down-most frame of his breathing… but now which of the frames between the two can I get rid of and still have the effect stay the same? Well Frame 2 is VERY similar to Frame 1, since the momentum of his breathing is at it’s slowest at that point… so I can probably zap Frame 2. Maybe even Frame 3. Frame 4 is halfway between Frame 1 and Frame 8 (Frame 8 being the full out-of-breath frame), so I’m going to leave that in. And I want him to look like he’s slowing down as he gets to the end of his breathing out, so I’m going to leave in Frame 7. Now when he rises back up, I can probably re-use Frame 7 instead of using Frame 9.” etc. etc.

The end result, as you can see in the video above, is that the 4 frame version keeps the same feeling the 12 frame version has, and at a glance you really don’t notice the difference… except if each frame is 35k, I’ve just saved 280k. And that’s just an idle animation… an animation of a character attacking or celebrating something could be 100+ frames. And it could probably be reduced to 20.

I’m off to the Global Game Jam 2011 in a couple minutes! Just wanted to give a shout-out to anyone coming here from Hacker News! You guys blew up my server for a bit, but talk about a quality problem haha Hope ya like the blog!

Email: This e-mail address is being protected from spambots. You need JavaScript enabled to view it | Web: Bulletproof Outlaws