How to Animate When You Don’t Know How to Animate

January 15, 2016

In my high school days I was very much interested in drawing and took a bunch of art classes. I’ve kept on drawing since that time, most notably with the web comics over on my other site, www.CubesComic.com. My background lies in drawing still poses, however, as opposed to animating them. This was a problem when it came time to do the animations for my first Sleuthhounds computer game. So how does someone with no training in animation, er, animate? Well, that’s the topic for today.

After trying to animate by “simply” drawing a series of still pictures and not being impressed with the result, I sat down for a bit of a think. I recalled the technique that Walt Disney himself had his animators use on such films as Cinderella and Sleeping Beauty. In those cases he filmed reference versions using live actors and then had his animators animate to that. It seemed like if it was a good enough idea for Mister Disney it was more than a good enough idea for me.

Except for a couple of very simple animations, all of the animations in my first two Sleuthhounds computer games started off by me filming myself doing the necessary actions. I have an old but still serviceable camcorder. Mounted on a tripod, I leave it running while I perform all the actions needed of the animations for the games.

With the actions filmed, I then import the video into my computer. It’s at this point that the real work begins. The first step is to go through the video for the animation I wish to draw and pull out certain key frames. Doing this is a bit of a balancing act. Enough frames need to be pulled out so that the final animation will be smooth, but I don’t want to pull out too many frames, because each frame I pull out is another frame I have to draw and so a longer development time for the game.

My camera films at a fairly standard 30 frames per second (or 29.97 to be precise). However, I’ve found that for the animations I’ve made, I usually only need to use every 16th to 20th frame, which amounts to about only 1 to 2 frames per second. Despite this low frame rate, it’s still high enough to seem smooth in my games. Your experience may vary.

[The raw extracted video frame.]
The raw extracted video frame.

Once I’ve extracted frames that look like they’ll give a good animation I move on to the very technical step of tracing. I bring a raw frame into my paint program and very quickly trace over the major features in the frame. This is to get the general body shape as well as the movement of the clothes. I think this is where, for a non-animator, this method is really useful. I find it difficult in my mind to imagine how clothing moves and flows with a body. By using video as a source, I get the movement of clothes for free.

Layering: Over in my blog series on creating your first computer game I mentioned using good old Microsoft Paint for doing graphics. I myself still use Paint for some things while creating my games, but not for animation. Instead, I use some custom software that I wrote that has several features useful for creating animations specifically for adventure games. In general, though, when looking to do animation I suggest finding software that gives you different “layers” to work on.

You can think about this like having a photograph as one layer, and then placing a piece of tracing paper over it as a second separate layer. When you draw on the tracing paper you don’t actually change the photograph beneath and later you can just move the photograph out of the way to be left with the final drawn picture on the tracing paper.

So, yeah, if you’re looking to do animation, find some software that allows you to see through and to draw on different layers.

[Tracing over the raw frame.]
Tracing over the raw frame.

With the rough guidelines, in place, I then swap out the video reference layer with a layer showing the previously completed frame. This allows me to see the details and proportions of my Sleuthhounds characters. This is important because my characters are cartoon characters and so are a bit more stylized and have slightly different body proportions from a real person.

With the previous frame as my new reference, I now sketch in a more detailed version of the character for the animation frame. Here I want to get the final pose that I’ll use while making reference to the previous frame to ensure that this frame is going to “fit” properly. At this point, I’ll also remove the rough guidelines that I sketched in previously.

[Sketching the detailed pose using the previous frame for reference.]
Sketching the detailed pose using the previous frame for reference.

Once I have a rough version of the frame I then go over the sketch lines carefully. I take this opportunity to smooth out the lines and to adjust the fine details—things like fingers and facial features. This gives me a nice line drawing of the animation frame, especially once I turn the previous frame’s layer off so I can just focus on the current frame.

[The finished line drawing.]
The finished line drawing.

From here, all that remains is to color the frame. Each character has his or her own color palette and I make sure that palette is loaded in my painting software so I can easily draw with the colors appropriate to the character. I typically start by filling in the large blocks of primary color and then add in the “shadow” colors afterwards. The result is one frame ready to be included in the final animation.

[The final, colored frame.]
The final, colored frame.

And that’s really it. I basically just repeat all of the above steps over and over for each frame of an animation until the animation is completed. I suspect trained animators don’t have to rely on this tracing technique, but I’m not trained and doing animations this way gives me a result that I’m happy with.

[The full animation.]
The full animation.

So, if you’re working on a computer game that needs 2D sprite animations and you’re not sure how to go about creating them…well, maybe this method of producing them will be useful to you. Or, you know, you could invest in a professional animation course. Whichever.