New School Blues Dev. Diary #7: Flash Puppets

Developer Diary #7: Flash Puppets

Last week I took you through my process for designing the “New School Blues” characters.  This week I’ll talk about how I created the artwork that will actually appear in the game.  Since NSB is a graphic adventure game I will need to create a lot of artwork very quickly.  I need to draw all of the backgrounds and fill them with props and set dressing, the items that the player will pick up, all of the characters from both the front and the side, the user interface elements, and create animations for all of the characters.

Traditional frame-by-frame animation is a very time intensive process, but there are other techniques that can be used to create animation much more quickly.  One such technique is called “cut-out animation”, which makes use of a puppet that can be reposed for every frame of the animation, rather than creating an all new drawing for each frame.   Here’s an example.

By an incredible stroke of good fortune (and definitely not because it has been firmly embedded as the industry standard for creating web graphics and animation for nearly a decade) we chose to build our game using Adobe Flash, which just so happens to be tailored toward creating cut-out style animation.

You start by splitting the character into several pieces that can be moved independantly to create virtually whatever pose you might need.  This approach is not without its own problems however.  At each joint, as the limb bends the outline tends to break and cause jagged points to jut out.  There are ways to combat this, like making all of the lines a single width, but that is less than ideal and creates a very flat looking drawing.  You can also tediously tweak and fiddle with the lines around each and every joint until they are all just right.  Or you can just get rid of the lines completely, and use all of the time you just saved to do the actual animating part.

That first clip was from Terry Gilliam of Monty Python fame.  For a closer look at that process click here to see a great video that showcases how this style of animation is done.