Give your sprites depth with sub-pixel animation

If you’ve ever worked with a classic RPG style like Chrono Trigger or other sprites smaller than 100×100, you know how pixels seem to get bigger, less flexible and more uncooperative as the sprite size gets smaller.

Creating a sprite at that size, even though it has fewer pixels, can be surprisingly hard since you have fewer ways to get it looking right. Planning out the face so that the eyes are in a natural position — and then making it so that 1 pixel is a believable size for those eyes — takes extra work. But once you’ve finally settled on a good illustration with each pixel exactly where it has to be… it comes time to animate. And suddenly your last batch of problems look like a first grade math quiz.

The issue now isn’t just how to move a microscopic character with believably exaggerated animation. It’s how to do so within the confining grid of these giant pixels. Anyone who’s experimented with animating the NES Megaman knows what I’m talking about. The number of natural, “correct”-looking poses you can put him in is severely limited. And on top of that, moving his arm 1 pixel out in an animation looks like he’s jutting the arm forward a significant distance. But you can’t move a sprite any less than that huge distance because pixels are either on or off, and its the only means you have to convey movement. Obviously. ..Right?

Ahahahaa, this is the most subtle movement I’m capable of!

I mean, if only there were a way to make those small-sized sprites move smoother than a black and white Tamagotchi. Some way to mimic, say, the real life movement you’d capture with a video camera. Even those low-resolution cameras can render believable movement. Ah, but wait a minute. What if a video camera were recording some distant person as small as a sprite. Wouldn’t it translate the person into pixels and move them believably? And what’s the difference between that real life “sprite” from the camera and the on-off-ness of the pixels from NES Megaman or Tamagotchi?

The colors. To move a small sprite a small distance, don’t move the sprite — move its colors.

Take a look at that pic. That person is less than 50 pixels tall, but you can clearly interpret that he took a deep breath. How? Look at what’s actually changing: 1) a shifting of the light and shadow colors, and 2) how the colors of his edges blend in to the background (obviously he doesn’t have outlines drawn around him, but bear with me). “Well,” you say, “that’s nice, but when you have a few hundred colors to spare, I’m sure you can add all the subtlety you need for you animations.” Okay then, let’s cut this down to 16 colors:

Getting more cartoony, but the same ideas are having the same effects: the light pixels on his ribs/stomach area shift to dark, and the edges’ colors shift into the background’s. (Granted, the high framerate is a factor in how nice this is looking, but that’s a separate issue for animation style, not for the what I’m focusing on in this case.) And now let’s see if we can distill this to the barebones basics:

Six faded colors, and it’s still obvious that this 50 pixel tall character is performing a specific subtle movement, even though the silhouette is barely moving. Okay, there’s got to be something to this.

Basically, “sub-pixel animation” means animating your anti-aliasing. A valuable technique either for transitioning shades of colors inside a sprite from light to shadow or in slightly moving an outline without moving the silhouette. These digital video animations are what you’re trying to imitate, and yes that makes the concept a little mechanical, but the ‘art’ comes in deciding how far to take it, and especially with deciding how to incorporate the technique with your limited colors.

That’s the idea, and now here’s some examples that show you how the pros move small sprites:

Metal Slug conveys movement really well because of two factors: very large color count, which provides a high detail level, and very high framerate, which provides detailed animations.

Look at these sprites and see just how little the actual silhouettes move. Its the colors of the existing pixels that are changing the most. (To be technically accurate, sub-pixel animation is happening on those spots where the outlines get lighter as a body part pushes into them, and darken as body part recedes. So it looks like the sprite is moving in space, but it’s really only moving into its own outline.) If you were to reduce any of these to just black and white lineart, the majority of the motion would instantly disappear.

With a few subpixel animation concepts, you can add some depth to even the most difficult of subjects. I added a dark red to give the original red some antialiasing, and I reduced the animation so that the silhouette barely moves at all. How’s *that* for subtle movement, Gutsman?

There is so much detail crammed into these tiny areas that looking at them up-close makes it hard to focus on what’s what. That detail comes from the huge number of color shades crammed into the sprite, which in turn gives the most opportunities to move, say, an arm up a small distance from shadow into lighter area into more lighter area into lightest area, without moving the actual position of the arm. And what’s more, the small size of the sprite now becomes an advantage because this trick would have less impact with larger sprites.

Castlevania is another series bursting with examples. Note here how the inside of Soma’s cloak has no outline. Instead it uses dark antialiasing to blend more and more into his black shirt and dark pants. In this case, imagine pixel art not as the art itself, but as a filter that’s translating the art.

So there’s how you do it, but at the same time you see the caveat: more subtle movement requires more color to supply you with enough differently colored pixels to animate with. A higher framerate doesn’t hurt either, but it’s secondary.

Next time you animators are finding yourself trapped with rough, jerky movement, think about the insides of the outlines. This can work for detailed areas like fingers or faces on fighter sprites or heavy breathing animations for sidescrollers, and so on. It’s just another example of how you pixel artists can think outside the block.