Contrary to what many people may think, animation's not too tough to do well. It takes time, admittedly, but the results are well worth it. There's nothing like animation for pulling the player into your world.
For my article, you will need:
- Graphics Gale (Free Animation App)
- Possibly a decent graphics editor like Paint Shop Pro
The spaces between sections are NOT images that have failed to load, they're just big gaps to space the sections out.
Basic Skills - Frame rate
Different kinds of animation require different frame rates. There are fundamentally two kinds of animation:
1. Slow and smooth;
(e.g. Breathing, walking, animations that are smooth and gentle)
2. Fast or powerful;
(e.g. Attacks, like punching, kicking, etc. Intended to be sharp and dynamic)
One way to think of it is this:
In slow animations (breathing, walking, etc), the thing you're trying to show is the process, i.e. how he is walking or breathing. These animations have no final destination, they just loop.
In faster animations (punches, kicks, etc), the thing you're trying to show is the result, i.e. you with your fist extended, and the bad guy flying into the distance.
Many-frame animations have the advantage of smoothness, and an ability to show subtle changes, so they're perfect for breathing and walk cycles. With these, you have many frames at a high frame rate.
Low-frame animations have the advantage of speed and power. In a punch anim, it looks like the fist has snapped forwards with deadly force. With these, you have few frames, at a lower frame rate.
Bear in mind that you may need elements of both in one animation. So for example, a punch (we'll go through these in more detail later) will probably be fast and jerky for the punching part (so his fist just snaps forwards like we said), but drawing his arm back again will probably be a smoother animation, like the breathing and walking ones.
Basic Skills - KEYING AND TWEENING
Right, this is our first practical skill, and you WILL learn it! It's CRUCIAL.
The animation process is, and always has been, made up of keyframes and tweens.
When you start an animation, you make the most important frames first. So if you're doing that punch animation, you'll want to draw your starting frame, and the frame with his arm fully extended. Like this:
This is a character from a game of mine, he's a tortoise. We can see at once how the punch animation is gonna look. Notice how different the two frames are as well. His body has twisted, and his legs have had to twist too (since they're attached to it).
This is what we do with keyframing. We can make two or more frames that are wildly different, without worrying (at the moment) about how they will connect. Our only concern is that:
Frame 1 looks like he's standing still, and
Frame 2 looks like he's just thrown a massive punch.
Get these keyframes right, and the rest follows easily.
Next the tweening stage. Tweening is short for in-between-ing, where you create the subframes that will connect the keys together. Our punching animation now becomes this:
See how it's worked? At each stage of the tweening process, you can look at the frames on either side and try and think of an average between the two. Having had the keyframes set out means we always know where we're going with this.
Note that you can also re-use and edit tweens that you've already made. Frame 4 is just an edited version of frame 2. This concept of recycling tweens is fundamental to tweening. You literally just copy, alter, copy, alter, copy, alter until it's done. Sometimes you copy bits from the keyframe to the left, and sometimes you copy bits from the keyframe to the right.
I cannot stress enough how important this is. If you make the animation frame-by-frame in the order that it happens, you could easily have slaved over 4 frames before you realise your animation sucks. And if you wanna change the punch, you have to change ALL the tweens to fit it.
Get those keys done first, and get them right. Then tween. Got it?
Basic Skills - Motion Streaks
These are excessively useful in action sequences. Suppose we have a complex-looking power-combo move, where the player slashes with a sword or something. It must look fast, so it needs very few frames. But it's also complex, so surely it would need many frames?
Not so, young padwan! Like so many other things, we do what nature does. We do a motion blur.
In order to create really cool motion blurs (I call them motion streaks, since we don't do a full blur in pixel art. You'll see an example later), you need to understand a bit about how they work.
Any camera, including the human eye, has an exposure time. It waits while the light from outside builds up a thick enough layer on the film/retina, and then records the result as a photo. It's like building up a layer of paint, each time light reaches the film, it layers up, building a stronger picture.
But suppose, for the sake of argument, you have a camera which waits for a full second before closing the shutter. And you're pointing it at a wheel that's doing one full turn per second.
During your camera's exposure time, it's receiving light that has bounced off the wheel. But because the wheel is moving all the time, each 'layer' of light that builds up in the camera shows the wheel in a different position.
The result is a blurry wheel, because your 1-second exposure has shown the wheel in every position that it went through during that 1 second. These different imprints layer up on top of each other, making a motion blur. Make any sense?
We apply a similar procedure here. We show a blur/streak which shows every place that the player has been between this frame and the last.
Let's just show an example:
I'll talk you through it frame by frame:
1. Standing neutral position;
2. He crouches, the hand begins to glow. This glow will trace out the path of the hand later.
3. He jumps, throws head back, and does a lightning fast 'S' attack (arm goes forward, back, forward and up)
4. The motion blur is fading. He's landing and swung the fist down. He's now crouched again. The path of his fist can still be seen.
5,6. Pause to emphasise the impact.
7. He stands and throws the fist back up.
8. Pause to emphasise impact.
9. A tween, taking him back to his starting position.
Admittedly, that's a lot of frames. But the action bits have very few frames. Everything else is either preparation or recovery. You'd have a nice attack animation even if you only used frames 2, 3 and 4.
Animated GIF versions:
Basic Skills - Pause for Effect
We did this above, and it's worth remembering. A pause just after an impact can make all the difference. A good example is a punch. No one wants to see a simple 'fist goes out, fist comes back' affair.
It's better to do 'fist goes out, fist stays there, player slides a few pixels forwards, fist comes back'.
Basic Skills - Shade stuff that's in the background
Basic, but important. If you have two arms or two legs, with one close and one far (like a platformer walk cycle), the farther one should be shaded so it's easy to tell the difference between it and the nearer one.
Look at the doggy:
Many's best friend clearly has his farthest legs darker than his nearest. Learn from the dog. He is wise. You'll see how useful this is when we get to animating that dog...
Basic Skills - Stuff is Connected to Other Stuff
Shockingly, stuff is connected to other stuff, and it doesn't come apart unless it's pulled. So whatever happens to your character, his arms need to stay attached to the same bit as they were before.
This helps with animating, because it's a part of nature. So if your character has twisted around his torso (like in a punch, where the player throws the whole shoulder forwards along with the fist), you know that:
a. His feet have not left the ground, and
b. His hips are still attached where they were before.
So look at the punch example again:
He has twisted around, but his leg is still connected at the same places as before. This can help you imagine how the leg needs to bend, and it helps prevent you doing things that would look stupid (twisting or stretching too far, for example).
Basic Skills - Basic Physics
If an object in your animation moves, it should be governed by basic physics. This just means, move the object in a realistic way. Look at the tortoise throwing this red block:
It goes up fast, slows down, then stops momentarily. Then it starts to drop, getting faster, till it's stopped by his hand.
Compare it with this next one. The block is heavier. Notice how his hand is carried with it when he catches it (because it's heavy):
There should be more info in the next section about physics, as we explore their uses in animating body parts.
Basic Skills - Ragdoll Effects
Another important one, this, and basically an extension of the above. Remember that your animations are made up of objects and limbs. If the player moves, the rest of his body will want to stay where it was.
Look at his arms in these three frames (from a falling animation):
I've moved each frame down so you can see how it works (you wouldn't do this in the actual MMF animation window). The hands are basically trying to stay where they were. Since the body falls, the arms appear to go up. Really, the hands are staying where they were, and the body is pulling the shoulders and arms downwards. Note that the head also appears to lift, for the same reason.
In this animation, it's a controlled fall, so the legs remain rigid (the player is consciously keeping them still, ready to land). If it was an accidental fall, the legs may flail around too.
Bear in mind also that body parts have an inertia. It's like having a box in the seat of your car. As you drive off, the box will want to slide back (to stay where it was). As you stop, it'll want to slide forward (to keep going).
You would see an example of this in a landing animation. The player would touch down, and the body would try to keep falling. His legs would strain, slowing the body, but his arms and head would continue down. Let's look at a basic example:
1. Falling
2. Hits the floor, legs absorb impact and bend, body, head and arms continue to fall.
3. Body, head and arms still falling, but body's rate of falling has dramatically slowed because the legs are absobing the impact.
4. Legs begin to lift the body up to a standing position. Arms and head try and stay in their fallen positions, so they hang a bit.
5. Standing. Arms and head are still catching up.
6. But now the head and arms have too much upwards inertia and have flown up too high.
7. The player finally recovers from his land and resumes his neutral position.
Basic Skills - Rotating
People seem to hate doing this, but fortunately, there are ways to ease the pain. Specifically, two that I find work:
Option 1: Totally redraw the thing you're rotating, just at a different angle. It obviously helps to look back at other frames now and then to make sure your proportions are OK (so the rotated sword or shield doesn't look longer or fatter than in other frames).
Option 2: Rotate the sprite using Graphics Gale's (or whatever other app's) built in rotate feature, which will give you either an antialiased version or a pixelly jaggy version. Then retrace over it to smooth it out.
It's Option 2 that I'm gonna show here. Our tortoise is gonna jump up and do a kind of semi-flip kick in the air. That means he's gonna need to be rotated.
So we start with a frame from his 'Idle' animation. He needs to crouch and jump, flipping back a little. So we'll do the first few frames, which are as follows:
He goes down on his knees, twists just a little and puts his left arm (background) on the floor. As a still image, it looks more like his leg (...) so I may change the anim later. But this is a start. It looks more like his arm when the anim's actually moving.
Anyway, on to the rotatey bit! In making him twist and crouch, we've made a LOT of alterations (legs, arms, even the stripes and shape of the shell). So our rotated frame will be based on frame 1, since it's the cleanest and purest we have.
The head, arms and legs are easy to copy and paste from other frames, so we'll deal mainly with the shell for now. So we copy the first frame, and erase his arms and legs. Filling in the blank spaces gives us this:
He's half the tortoise he used to be. Before doing anything else, we copy this shell. If we need to make any further rotations, they will always be based on this same shell.
NEVER rotate something a second time, even if you've cleaned it up first. With every rotation, you have to change the shape a little so that it fits in the pixel grid (we're about to do that now). It doesn't notice if you do it in just one frame. But if you rotate that same frame AGAIN, clean it up, etc, you find you're making it even more imperfect. The alterations add up with every frame. If you keep doing it, you risk ruining the proportion. By the end of the animation, your character's body will either be too big or too small, and then you'll spend hours trying to shrink his body in a way that doesn't look pants. If you always perform rotations on the same image, any subtle changes will stay on that one frame, and won't notice in the animation.
-Cough-, anyway. Back to work. In Graphics Gale, I'm gonna rotate my little tortoise's shell, as below. You can choose to antialias it by pressing the little icon I've shown in the image. I don't bother, though, because you end up with little invisible artefacts in the background that make filling it difficult. Bad when you come to import the frames into MMF, and you want the background to be transparent. You'll have lots of snowy dots in your animation.
So, we select and rotate the shell. Then draw over it, using the scabby jaggy version as a guide:
It's not exact, but it's only one frame of many, so it doesn't need to be. Now to add the rest of him, by copy and pasting parts from other frames into this one.
For now, we copy and paste them only into the background areas (the whitespace). His arms and legs are fairly easy to draw, so I'm only gonna paste his head in.
Graphics Gale has a cool animation preview feature, which updates as you draw. So here, I'm gonna drag the head around until I can see (from the animated preview) that it looks good there. This feature of Gale allows you to look at the context of the animation, to see in realtime if your frame blends nicely with the others, or if it doesn't. No matter how good your frame is as still pixel art, it could still ruin the animation if it doesn't flow with the previous and next frames.
With a bit of jiggery pokery, we get this:
I've used the motion streak to make it a bit more dynamic, and save me from making loads of tweens.
And then we do similar for the final kick:
Now I'd usually finish it with a final flip to get him back on his feet and ready for the next attack, but I'm tired, and there's plenty more to write about than rotation. I do hope that going through it like this has helped in other areas though.
The animation so far, if you wanna see, is thus:
Right, that's pretty much it on the 'basic skills' front. I know it's been a long and arduous journey, but these are all things that will serve you in good stead with animating. With these skills, you should be able to pull off a wide range of animations.
So without further ado, we'll get onto something you'll definitely find useful:
The Fabled Walk Cycle
Tis the stuff of legend. How do you turn this:
Into this:
Well actually, it's easier than you think. In fact, we've already covered a lot of it. As a reminder:
Ragdoll Motion - See how his head and arms bob? There's a momentary delay. This is because, as we said, his head and arms are separate limbs that have their own inertia. As a result, their movement is a delayed version of the rest.
The walk cycle is the kind of thing that needs to be shown rather than explained, so just look at his plod frame-by-frame:
Just note how he goes up, and down, and up, and down.
You may only need to do half of it
Depending on how you designed your character, you may be able to draw only one leg and then use those same frames in the background to show the other leg. I don't think I did that with this one, but the Four-Legged Walk-cycle has a classic example.
The principle it mainly emphasises in a walk cycle are the following stages:
1. CONTACT
2. RECOIL
(after contacting with the ground)
3. LEGS PASS
(one foot supports the weight and moves backwards,
propelling the body forwards, while the other leg
lifts its foot and transports it forwards to take
over from the other)
4. HIGH POINT
(usually the point where the load-bearing foot is as far back as it can go, and the take-over foot is poised to settle down in front)
Look at Idleworm's tutorial, it's the daddy.
The Four-Legged Walk Cycle
What we want to achieve is this:
Fortunately, it ain't too hard, because you only really need to do half of it. Look at the diagram below. I'll explain a few important points afterwards:
Note how the legs for each side go together, apart, together, apart, etc.
WHEN THEY COME TOGETHER, the FRONT PAW is on the ground.
WHEN THEY MOVE APART, the BACK PAW is on the ground.
The two sides are inverted, so when the foreground legs are apart, the background legs are together, and vice versa.
Remember, the back legs do the pulling, front legs really only support the woofy's weight until his back legs are ready to bound off again.
Note too that we've just done BOTH the walk cycle and the run cycle.
For the run cycle, you just use the top set of frames and don't blend it with the second set. Because in a run, the legs go together. So both fronts and both backs join forces to propell the doggy at warp speeds.
~ Wow this is really good! Walking animation is a bitch with most people.. But this makes it seem so simple...and... i guess it is
Also the 4 leg dog tut is really nice aswell.
Tanx! (runs off to animate sum poor helpless creature)
Dines, you are a genius.... again!
Thank you for the Graphics Gale info. As it is now I always have to redraw complete sprite frames from scratch without layers in MSpaint and it's such a pain in the ass.
Awesome Animation tutorials, me being hopeless with animations. It will help me alot and graphics gale is a top program. you just need to use it to get used to its features
Thanks for this great tutorial. I have learned quite a few things - but first I need to learn to draw cool pixel art... It will all come along, sooner or later... yep...
Advertisement
- Graphics Gale (Free Animation App)
