2D will never die

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.

Putting a sprite together at that size, even though it has fewer pixels, is actually a chore 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 dramatic distance because pixels are either on or off, and its the only means you have to convey movement. Obviously. ..Right?

Gutsman mocks your attempts at subtlety

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.

subpixel

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:

subpixel

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:

subpixel

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 here’s some examples that show you how to apply it:

Metal Slug definitely fits the bill for small sprites, but it conveys movement very 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. Outlines get lighter when a body part pushes into them, colors darken as body parts recede. If you were to reduce any of these to just black and white lineart, the majority of the motion would instantly disappear.

subpixel animation

With a few subpixel animation concepts, you can add some depth to even the most difficult of subjects without additional frames or colors. Note I switched out one color to give some antialiasing to the reds, but 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.

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 greater 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.


Save this page as a PDF Share this post to Facebook Share this page on your Twitter Post this article to your Tumblr
»
» Give your sprites depth with sub-pixel animation

Are you a bad enough dude to comment?

Anti-Spam Quiz:

  1. Zach Yates says:

    Thanks! I learned some awesome techniques here!

  2. Burglekutt says:

    Sweet

  3. Esteran says:

    Thank you very much! That helped me.

  4. Panda says:

    I am going to make pixel art right now!

  5. Link11264 says:

    Awesomeness

  6. Rami says:

    amazing, thanks for all the tutorials

  7. Patrik says:

    nice job man