Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
October 17, 2017
arrowPress Releases

If you enjoy reading this site, you might also want to check out these UBM Tech sites:


New School Blues Dev. Diary #7: Flash Puppets

by Yoyo Bolo on 01/24/13 02:03:00 pm

The following blog post, unless otherwise noted, was written by a member of Gamasutras community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.


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.

Here’s a few stills of Boy New Kid in action

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 anexample.

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.

The many pieces that make up a Flash puppet

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.

Having lines along the edges of your pieces can cause problems

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

Related Jobs

RedLynx — HELSINKI, Finland

Mobile Live Producer (South Park : Phone Destroyer)
Bartlet Jones Supernatural Detective Agency Inc.
Bartlet Jones Supernatural Detective Agency Inc. — San Diego, California, United States

UI Designer
Deck Nine Games
Deck Nine Games — Westminster, Colorado, United States

Mobile Programmer
2A Consulting
2A Consulting — Seattle, Washington, United States

Graphics Developer

Loading Comments

loader image