Game Development: Pixel Art Sub-Pixel Animation

Hey guys, sorry for the week delay on this blog post, let’s get started on the last topic I’ll be going over for my pixel art series.

Subpixel animation

Subpixel animation

Sub-Pixel Animation is a technique where you add “in-between pixels” to smooth out a transition. In the above example, the pixels are gradually added and removed, and this is continued until you get the desired timing and effect.

This is the version without sub-pixels

This is the version without sub-pixels

As you can see above, pixel art by itself simply cannot “add” more pixels between each point.

It is pretty much impossible to add a pixel between two pixels

It is pretty much impossible to add a pixel between two pixels

however, if we add in an in-between frame and “smear” the two points.

Notice how the pixel gets wider on the in-between frame

Notice how the pixel gets wider on the in-between frame because of the smear.

And this is pretty much how it would be done. you just have to gradually smear each portion of your animation, removing and adding pixels.

Notice how each color is smeared individually

Notice how each color is smeared individually

Same concept as above

Same concept as above

Slowed down version to see how each part is added and subtracted

Slowed down version to see how each part is added and subtracted

Of course, this entirely depends on your art style too, I find this effect works better for sprites that are larger. It really helps create a nice subtle motion to your animations.

I’d also say that the effect works better on sections where there are less important details. The example above should help demonstrate how you’ll have to use your discretion for which parts should be smeared and which details you want to keep clear depending on sprite size and so on.

And that concludes this series for pixel art, hope you found it useful.

If you found this helpful, why not share it or leave a like, or click the follow button at the bottom right to stay in tune with the next post?

Happy Pixeling!

-Brandon

www.tinywarriorgames.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s