Sub-pixel animation
Sub-pixel animation makes something seem to move by less than a pixel, by shifting colours along its edges instead of moving the whole shape.
What it is
On a small sprite, the smallest whole movement is one pixel, and one pixel can be a lot. A 16 pixel character that moves its chest up by one pixel to breathe looks like it is hiccupping.
Sub-pixel animation gets round this. Instead of moving the shape, you change the colour of the pixels along its edge. If an edge pixel goes from background colour to a mid tone, and then to the full shape colour, the edge appears to creep outward by a third of a pixel, then two thirds. The eye reads a smooth, small movement.
Why artists do it
- Gentle idles. Breathing, floating and bobbing look calm instead of jerky.
- Small sprites. At 16 or 32 pixels there is no room for large movements, so fractions matter.
- Smoothness without more pixels. It adds apparent resolution to motion without redrawing at a larger size.
Common mistakes
- Too many in-between colours. If you add new colours just for edges, the palette grows and the sprite looks blurry. Use colours already in your ramps.
- Using it for big moves. A run cycle or a sword swing reads better with clear whole-pixel poses.
- Inconsistent edges. If one side of a shape uses sub-pixel steps and the other jumps, the shape seems to stretch.
- Flicker. Changing a pixel back and forth between frames without a clear direction looks like noise rather than motion.
How to do it by hand
- Draw the start and end poses, one pixel apart.
- Between them, add one or two frames where only edge pixels change.
- For each edge pixel that will be covered by the move, step it through an intermediate colour from the ramp.
- Play the loop at game speed and at 1× zoom. Adjust timing before adding more frames.
- Keep every other pixel of the sprite still, so the change reads as movement of the edge.
How Pixor fits in
Pixor’s Sub-pixel motion Style node shows a part that moves by less than a pixel a frame in its edge pixels, the way an artist would. Beyond that, Pixor keeps a rendered animation steady enough that sub-pixel touches are worth adding. The pivot is locked to one pixel in every frame and side, so the body does not jitter. Light bands are held until a surface clearly turns, dithering is held on the surface, and a clean-up pass removes stray pixels and lines that appear for one frame only. Pixor also measures flicker across a clip.
From there, export to Aseprite, where each action and side has its own tag, and add sub-pixel touches on a separate layer. When you re-render, the hand-painted layers stay on their frames.
Related
- Mixels: why moves should stay on the pixel grid
- Pre-rendered sprites
- Animation, Aseprite and the export manual
Questions
Is sub-pixel animation the same as anti-aliasing?
It uses the same idea, in-between colours on edges, but changes them over time so the edge seems to slide by a fraction of a pixel.
When should I use it?
For small, slow motion: breathing, bobbing, a blinking eye, a swaying flag. Large movements are better drawn as whole-pixel moves.