Animation process

I thought I would use my first blog post for this course to explain my work process of making an animation, and which animation principles I value most while animating.

For reference, I spent three years learning animation in gymnasium, and mainly studied traditional animation on paper. I create, sketch out and color my animations in Photoshop, the only other program I use is Paint Tool SAI, for line work.

My group is creating a game in which you play as a fish and grow bigger by eating other fish in the area. These last two weeks I have worked on creating all animations for the player fish in its first stage of growth. I did the bulk of the work last week, only focusing on the player death animation this week, and I thought I would walk through my process of making that particular animation.

This is the design of our player fish’s first stage of growth, and the first frame of its idle animation. Using this frame as a base, I wanted create a death animation of it falling backwards and floating upside-down.

This was what my first draft looked like, doesn’t look much like a fish right now, does it? The reason why our player looks more like a sack of potatoes than a fish at this point is because it’s much easier to animate something the less details there are. If you have a more complicated design, it’s much smarter to get the basic, more prevalent shapes down first, and then add the details after you’ve got an animation down for the general features of the object. For example, if you were animating a girl running with her dress and hair blowing in the wind, you’d have a much easier time starting off animating just a stick figure running. Then, after fleshing out the body, (pardon the pun) you go back and animate the dress and hair individually.

After drawing a sack of potatoes, I went back over each frame and referenced off my idle sprite to make the sketch look more like our player fish. But at this point I realized my animation didn’t look very good, and made two changes…

What happened there? What magic did I use to make my animation look so much smoother? Well, let’s have a look at what I did with the frames.

The upper row was the old sketch, and in the second row you can see where I’ve added two new frames in the animation.

In general you would call this addition of frames “tweening,” short for in-between, which is simply the process of adding more frames to an animation to make the motion smoother. In the addition of these two frames, I’ve also kept in mind two animation principles… But what are animation principles?

You can get a quick summary of what the 12 principles of animation are here on Wikipedia, but the gist of it is that there are 12 main techniques you can rely on to make an animation more pleasing to the eyes. Not all of the twelve principles are equally useful, and you don’t need to constantly use all of them to be a great animator, but most of them are good tips to keep in mind while animating. I’m a fan of squash and stretch, anticipation, follow through and slow in and slow out myself.

The two principles of animation I’ve made use of here are Anticipation for the first new frame and Slow In for the second.

Anticipation is when you strengthen the feel of a motion by making the object do an anticipatory action prior to it. For an obvious example, when you’re preparing to swing a golf club you tend to bring the club upwards and behind you first before swinging. In this case with my fish, the anticipation is that the fish starts by leaning forward before it flips backward. This contrast in motions makes the movement of your figure much more clear and believable.

Slow In is when you balance out the distribution of your drawings over the action to make the speed of your motion believable. When you’re running, you don’t just immediately stop right where you are when you want to, you have to slow down first so that you don’t trip over from the sudden change in velocity. Likewise, when the big swinging arm hanging from an old grandfathers clock swings back and forth, it slows down first before changing direction. So basically, to make the speed of your motion more believable, you should create more drawings at the beginning and end of the movement, and less while it’s at top speed, he’s a short animation I threw together to demonstrate, since I had a bit of trouble explaining this principle:

The second animation looks much smoother, doesn’t it? Of course, the first animation could also work just fine for a ball that’s endlessly bouncing at high speed between two walls. As I said, you don’t have to rely on the principles all the time!

Now, after fleshing out my animation sketch, doing line work and coloring, I’ve finally got my final death animation:

I hope this blog post was useful for anyone struggling with animation! And if I didn’t explain something properly, feel free to leave a comment asking for clarification.