Aim for smoothness!
Following a vote on Twitter to celebrate the 2500 followers, animation smoothness was the subject chosen. It’s a BROAD subject, so I will try to cover it without going to deep in every aspect. It will be centred around pixel art, no shit Sherlock, but a lot of animation principles are valid in any technique or medium.
We will talk about the following subjects:
- Animation speed and frame rate
- Easing motion in an out
- Secondary motion
- Sub pixel animation
It’s not an exhaustive menu by any stretch of the imagination, but we have to start somewhere! If you look at some animation tutorials, there are more basic principles, but I’ll center this article around my own practice. Feel free to dig DEEP if animation is a subject you’re interested in! Good news is, you can start animating with free tools, right now!
Animation Speed and frame rate
Some basics: the speed of your animation will play a HUGE part in it’s perceived smoothness. It’s entwined with the second object of this part: framerate. To put it simply, the more drawing you show in a second, the more fluid the animation looks. You know all the rage about 30 fps vs 60 fps (fps meaning frames per second, how many images are drawn on your screen in a one second interval) . More images is always better. And just to dispel a common urban legend: the human eye can perceive a VERY HIGH frame rate, it’s not locked at any arbitrary speed because guess what, the human eye, a meat camera, perceive light as a flux. It has no shutter, like cameras does.
“So, the more the better! Let’s make 120 fps pixel art animation!“
STOP WAIT! Stay here and listen a little longer. Pixel art is peculiar, because we use a grid to draw. It’s true of any stuff you put on the screen, but in pixel art you draw on that grid, at a very specific size, and it’s usually small. Any pixel counts!
How do you make a pixel travel 10 pixels horizontally? You can make it move one pixel at a time, that’s the smoothest you can do. It means inside this 10 pixels space, you only have 10 possibles frames. Here is the result of said pixel moving at various fps: 33, 20, 10 and 6 fps.
“But wait, if I want my pixel to move slowly, it’s not smooth at all!”
No it’s not. That’s a limitation of pixel art, we have to deal with this. If you want to move this pixel in one second, you will have 10 fps. Fortunately, pixel art isn’t about moving a single pixel, and there are lots of ways to trick people into thinking the movement is smoother than it is 😉 For reference, cartoons frame rate can vary from 12 fps to as low as 8 fps. Cinema used to be 24 fps.
Good news: you don’t have to really decide of a fixed framerate, if you make sprites for video games (as I suspect an awful lot of you are, or want to) every sprite can have a different speed.
Now let’s talk about me, because I’m the subject I’m the most familiar with. I usually work with Aseprite (please stop using Photoshop for pixel art animation, I used to, it’s like using a tomahawk missile to dig a pool in your backyard. It works, but it’s not made for that and it’s too expensive, so do yourself a favor). My standard speed is 50 ms per frame, it’s 20 fps if you suck at maths (no judgment, me too). A One second animation will require 20 individual drawings, fortunately animations for video games are usually very short and can loop.
Aseprite’s interface, you can set any value you like. I usually work at 50 milliseconds.
I’ve upped my standards since I started the project, so the running animation is only 8 frames long, and clocks at around 12 fps in game ( which makes me think I’ll probably redo it at some point, that’s the animation you will spend the entire game looking at. But I digress).
Here is an old animation, originated from the very first version of Lost Fortress, years back. The protagonist was a male, and my first run cycle for him was only 6 frames long, clocking at 12fps. I noticed back then it was to mechanical, and added 2 frames to make it 8 frames, here at 14fps. Makes a difference, doesn’t it?
The ladder climbing animation is 16 frames long, so in game, it’s around 20 fps. It’s precisely 16 frames long because it’s stuck to the pixel grid (unlike the other animations) and it’s displayed frame is based on the position of the sprite on a 16*16 pixels grid. My game is built around 16*16 pixels blocks, so you get the idea: the sprite is always perfectly aligned with the ladders.
The ladder grab is also 20 fps. The shooting too, and with the recovery it’s 20 images long. The axe attack is 25 images long. So you can see, my animations look smooth because they simply are made with a lot of frames, displayed fast. The downside of this method is time. The higher the fps, the longer it takes to produce. Take this into account before starting a project: how many sprites? How many animations per sprite? How long does it take for you to make a sprite? It ads up fast.
That’s il really, high fps = more time spent = smooth animation.
Easing motion in an out
That’s one basic principle of animation. Move your hand in front of your face. Does it travel at a fixed speed and change direction instantly? No it doesn’t. Movement in nature are not linear, not instant. Do you know what move very regularly? Robots. That’s precisely what you do when you imitate a robot moving: you emulate motion without accelerations and deceleration, lifeless motion. Unless you animate a robot (and even in that case to some extent) movement always have acceleration phases, and deceleration. Movement overshoot. Movement have anticipation. So it’s not just about moving a pixel on screen, it’s about how to trick people into seeing life in this pixel.
If you followed my stuff recently, you have noticed the strange rulers on my WIPs.
In case you missed it.
They are here to illustrate the spacing between keyframes. The distance the object will cover in a single frame. If you space your frames evenly, you have a mechanical motion. If you start to increase the space as the frames goes, you create acceleration. If you make frames closer and closer as the movement goes to an end, you break. It’s a very powerful tool to time the animation right BEFORE drawing the individual steps. I hate wasting good time working, that’s time I could have spent NOT working, so I try to waste as little time as possible. When the motion feels right, drawing frames is natural and flows well.
By easing movement differently, you can convey a lot of meaning into the animation. Heavy objects tend to accelerate more slowly than light ones. They also need more time to break, and generally overshoot more. But this subject is vast and can be the object of an article on it’s own, for now the important thing is to get the basics: uneven spacing of object positions between frames makes more natural motion. Also, don’t hesitate to double a frame, hammer the point! The object just stopped, or you want to convey a very slow start, having 2 or 3 times the same frame can do just that, at no cost at all!
Here I doubled the frame at the apex of the rebounds.
It’s not an imperative to make smooth animations, but I bet my animations would be far less interesting without it. Secondary motion is the motion of an other object, derived from the main object you animate. Be it hair, a cape, a scarf, it sells the main motion by displaying a direct consequence of this motion on other objects affected by it. It’s something I love, as you can tell by the hairstyle of Kara.
When designing your characters, if you can include something that will follow the character movement, or be sensitive to external factors like wind, go for it. Pixel art being fairly small, depending on your resolution, you probably should think about it early on.
To make convincing secondary motion, there is no magic recipe. Observation is key, watch a ton of animation or better, real footage. Or make stuff move yourself! I sometimes agitate a piece of string to get the logic behind animating the braid of Kara. Exaggeration is another key, depending on your style, you don’t want to abide by physics laws. You just want your animation to look convincing and dynamic.
I can show you how I usually do it: for the braid, I imagine a point near the head, and animate it according to Kara’s movement. Then I add a second point, somewhere in the middle of the braid, and do the same based on the previous point, practically ignoring the head movement. I then draw the skeleton of the braid, and the last thing I do once the braid is finished is animating the wiggling tip. That way, every part of the braid reacts to the movement of the part closer to Kara.
The movement is obviously over exaggerated, the tip shouldn’t rise, but it looks great :p See how the movement is quite different with the head alone and when you add the braid? One thing I ignored here is the collisions between the braid and the body, because I didn’t bother adding one. But keep that in mind, if you look at the axe attack, you can see the braid sliding around Kara’s leg before falling back into position. it gives a great sense of physicality to the object.
See how the braid is affected by friction when sliding on the leg.
Tu sum it up, making parts of the character move and follow based on the character primary movement is awesome to sell the feeling of motion. Try it at home! It’s safe!
Sub Pixel Animation
The final subject I want to talk about is sub pixel animation. It’s an advice I’ve given to a lot of people at pixelation.org (go visit it, it’s an awesome place to share your pixel art!), you don’t have to move the outside shape of an object to make it feels like it moves! If you look at my animations, you can see that the shading line sometimes moves when the shape is still.
I’ll take an example, my Idle animation. It’s not great, I’ll probably have to redo it, but it demonstrates the point.
At the exception of one single pixel in the hair, the shape of the character is perfectly still. And yet stuff happens! Let’s take another example out of the attack animation. To sell downward motion and inertia, I animated the shade of the legs:
If you want better examples of sub pixel animation, look no further than the Metal Slug sprites. They are HUGE and contain a LOT of sub pixel moving inside the shapes of sprites.
I think that’s all for this time! There is so much more to tell about pixel art, and animation, and SO MUCH MORE that I personally ignore. Making this article was great, I’ve learned a few things and just feels more comfortable with my own technique. Let me know if you liked it, if you found anything useful for you, if you have things to teach me, or if you think it’s bad, I’m open to all criticism as long as people are constructive about it 😉 But most of all, if it helps you making better art, SHOW ME! I want to see your art improve, that’s the whole point of this article.
Keep at it fellow pixel artists! And don’t worry about your sprites if they suck, everyone sucks at first and practice will make you BETTER.
5 Replies to “Pixel Art: Animation smoothness”
Wow, thank you very much for your share ! it’s very interesting, I’ve learned a lot !
It’s meant to help people, so glad if it helped you! 🙂
Great tutorial, a lot of insights!
It’s just GREAT, thanks for sharing your experience to us, i’m already practiced some of your advice in my animations.
One question i got is about ease animation frames count. Those frame bard under your examples show the balance between frames, but for example i want to create an ease animation of the ball like you did. I’m starting with these:
1st frame: static
2: 1px right
3: 1px right
4: 2px right
5: 4px right
several frames with 5px to the right and then the same thing reverse, to the left.
So my question is – do this have some numbers or maybe formulae to count perfect distances?
Thanks a lot
Thanks! Glad to know it helps 🙂
Not sure to understand what you need, is it a formula to know how much pixels you need to move the object from frame to frame?