Basics of Animation

Animation is a huge topic, and I’m not going to pretend to cover everything. This tutorial is only going to cover a few of the most basic ideas that will be important going forward in pixel art—if you’re interested in animation (and even if you’re not), you should search around for more detailed articles (or books) about animation.

Watch any old school cartoon (Mickey MouseLooney Tunes) and you’ll see the following techniques used all over the place. Animating for pixel art is different from traditional animation because you won’t be animating entire scenes at a time—most of the time you’ll be working with individual sprites: characters and objects. But the useful tools and principles are the same.  The following techniques are used to give an object weight.

As weight guides motion, simulating weight is how good animation becomes believable.

Squash and Stretch

Let’s start by taking a look at a bouncing ball that doesn’t squash or stretch:

a

Kinda boring, isn’t it? The animation is functional—but nothing more than that. The ball (in this case it’s really just a circle) is only moving up and down along a path; it hardly seems to be bouncing at all. This kind of animation is flat—no attention is paid to the object’s weight. The actual object doesn’t change at all within the animation; it only moves.

In the next example, I’ve let the ball change within the animation in a way that simulates weight:

b

A lot better, huh? The ball actually looks like it’s bouncing (or jumping!) this time around. It has depth. And it has character—the eye has an easier and more natural time following the animation.

The shape of the object changes as it moves (though the overall mass or volume stays mostly consistent). While the object moves vertically, it stretches to match the movement. And when it stops or slows down, it squashes to emphasize the slowdown.

This is the basic application of squash and stretch.

Here are the frames of the above animation all laid out:

c

You can really see the arc of the ball—the most dramatic part of the animation is the way the object deforms when it bounces off the ground. The individual frames look strange; but the end result is a fluid motion. Don’t be afraid to exaggerate your objects proportions within an animation: as long as everything lines up in the end result, the individual frames can get very distorted. And often it leads to good-looking results!

I love squash and stretch—the more the better. Check out this monster animation that I made for a platformer project:

The stretch when the enemy moves up looks really tense because the way the “body” gets thinner at the same time that it gets longer. And when the tension is at a peak—the enemy snaps shut. The force of the snap seems strong because of the single frame of distorted squash when it hits the ground.

Think about how you can apply squash and stretch to your own animation. If you find that it is lacking in power and needs that extra oomph, most likely you can find something to distort. Remember that you can get away with exaggerating in animation—and often the more the better.

Anticipation and Followthrough

When I used to play tennis, I was taught that hitting the ball wasn’t the most important part of the swing. The important part was anticipation and followthrough—and hitting the ball just happened between them. If you anticipated the ball and drew back the racket, and then followed through with your swing, the ball would go exactly where you want it to. Don’t think about the actual moment of connection; think about the arc of the swing.

In other words—the focus of your animation should be on what comes before and after the moment itself. The eye will naturally understand the motion and make the important connections, and it will also look more powerful.

Action is defined by what precedes and follows the action.

Check out this cannon, from the same project as the monster above:

It’s pretty squashy and stretchy in places, but the reason I’m using this cannon is to demonstrate another principle that should be at the core of any animation: anticipation and followthrough.

The cannon pulls back in preparation of firing. And then—in a single frame, it is in stretched into the air and settling back into its starting position. The extended animation is in the beginning and end of the action itself—we don’t necessarily need to see the exact moment that the cannon fires: the entire sequence will give the impression with much stronger impact.

Like I said before—there is a lot to animation that I don’t plan to cover in this tutorial series, but these are some principles that are absolutely vital to understand if you want to go forward in animating pixel art. Now that you have a basic understanding of these ideas, we can start putting them to use.

See ya next time, when we’ll start putting these ideas into practice and make a simple animation for a character sprite.

Next: Walk Cycles, Part 1

18 comments

  1. elLOCOTE says:

    but…what image editor should we use?

    • Despain says:

      That’s up to you—my tutorials are about the theory and techniques, not about the software. There are loads of programs that can do this stuff.

      I personally use Photoshop, but lots of my friends use GraphicsGale or ProMotion.

      • Jason says:

        Great tutorials!! Do you use a tablet for pixel art or mouse? I’m trying to decide if I should buy one or not for doing this type of stuff. Would it be easier?

        -jason

        • admin says:

          For pixel art I use a mouse, but if you’re serious about making art on your computer it is definitely worth getting a tablet. I use a tablet when I make tilesets.

  2. Rich says:

    GraphicsGale is great for pixel art and animation. I highly recommend it. I’ve used it on a few projects and it’s a lot more tailored for projects like that moreso than Photoshop while feature filled takes time and a few plugins to emulate the same features as a program like GG.

    That said, GG is pretty much just good for pixel art and animation.

  3. Tang says:

    I have a background in animation and I’m working on my first game (platformer). After a bit of trial and error I’m noticing that (for the player character at least) it’s difficult to use squash and stretch and smear/distorted drawings because of the need to keep a (mostly) consistent collision box and anticipation/followthrough (apart from the bare minimum) because it translates as being unresponsive controlwise. I was wondering if you’ve noticed the same problems and have found ways to overcome them.

    I haven’t started on enemies yet, but I imagine there is more freedom in the animation (such as in your monster animation above) because they are not bound to player input.

    • Despain says:

      in my experience, a lot of game creators will create an invisible square underneath the actual sprite to represent the player’s collision box so that they are free to animate the sprite without any worries of altering the gameplay experience.

      good luck man

  4. .M.M. says:

    Great tutorials, I can’t wait for the character animation!

  5. R.W says:

    GREAT TUTORIAL! Where is the next tutorial? :)

  6. Anonymouse says:

    http://codesocialist.com/#/?s=b9

    I took the animation frames and animated them for no reason.

    the result was pretty interesting…and mesmerizing

  7. Javier says:

    Great tutorial!

    Do you happen to know any software on the Mac platform that can be suitable for this? Thanks!

  8. PsylentKnight says:

    You should really continue this animation series. Thanks for all the tutorials, I just discovered them today.

  9. MrGamerChad says:

    Quick question, what is the cannon and the monster from? I know you said you are making a game in the tutorial, and I would like to see it. Is there a page for the game I could see?

    • Despain says:

      Hasn’t been released yet. Maybe sonner than you think. ;)

      • MrGamerChad says:

        I hope there is a alpha or beta version for testers to point out bugs and other small quirks. That would be awesome. Also, (even though the tutorial isn’t RPGMaker), do you know how to make an intro where the screen starts out black, you go through a couple of text boxes, than the intro fades in before the last boxes of text appears. I’ve been trying, but they turn out horrible, and when I go out, and back to the area with the event, the event plays again (even with “Erase Event”). Any tips?

Leave a Reply

Your email address will not be published. Required fields are marked *