Cleaning Up An Animation for In-Game Use: Step By Step


So, as you can see, I had my first foray into animation recently. :D My most recent task was to clean up the reload cycle for Marshmallow Madness' protagonist.

First off I want to make clear that I can't take all of the credit for this cycle. Our Animation Director Garry Brookes was the one who laid out the basic template for the animation.

Basically, the first step of this process was, he created the basic elements for the character's poses in each of the "key" frames. A few examples below:

Key Frames are basically the most important poses within a cycle. They are the "extremes" of the character's movement. All of the other frames, or inbetweens, are transitions from one key to the next. So basically I had to understand the keys first before understanding how the frames in between should look.

The inbetweens in Garry's rough cycle had less visual information in them in general. Since they were based on the surrounding keys, there was no need for Garry to draw them out in great detail. There were 22 total frames for the entire cycle, which Garry arranged as 22 .jpegs.

My job was to "clean them up"--basically, I had to make a finished looking animation from these rough skecthes. I took the .jpegs into Photoshop CS4 and inked over them with the default Hard Round Brush at 5 or 4 px, depending on how thick of a line I needed. My Art Director gave me a model sheet to work from so that every frame matched the character's appearance properly, shown below:

Other than that it was just a matter of using my Wacom Bamboo to ink all of the lines in each cleanup frame. It sounds easy summed up in one sentence, but the whole thing was incredibly challenging since I was pretty much headed into this with zero animation knowledge. After inking all of the frames, I saved them as 22 separate .png files with transparent backgrounds.

Naming the files from Photoshop is important for the next step, where I use Flash CS4. You want them all to have similar names with a number suffix, so Flash can recognize them as a sequence of images. So for instance, I named my files Reload001.png, Reload002.png, and so forth so that Flash would recognize them as being part of a sequence. After opening Flash CS4 and starting a new file, I went to File > Import > Import to Stage. I selected only the first frame called Reload001.png, and Flash asked if I wanted to import the entire sequence to the Stage. After selecting OK, all of the frames I had saved as .pngs were nicely laid out in order on the timeline in Flash. After that it was a simple task of selecting File > Export > Export Movie, to save the whole thing as an animated .gif file.

My animation director helped a lot in understanding how to get started and what to keep in mind while animating. There were a lot of things I didn't have to worry about as a cleanup artist. I didn't have to determine the anatomical position, weight, or body language of the character since Garry had predetermined those things in his rough frames. But now that I've done this I'm looking forward to learning more about 2D animation practices and techniques so I can add it to my repertoire of skills for the video game industry. C:

I hope others learned a bit from this process as well. Feel free to contact me with any questions or requests, I'm happy to help.

No comments:

Post a Comment