Pixel Art Animation. Reinvented – Astortion Devlog #26

With video games, sometimes we need our character  to look different depending on the situation. For instance, these three white pixels on Alice’s right arm represent AST-1 a device she uses to distort gravity. But at the beginning of the game, she won’t have acquired it yet.   So naturally, her sprites should reflect that.

The simple solution is to create a modified set of sprites for when the device is off. However, this quickly becomes cumbersome, considering that we need to apply the same changes to every frame of every animation. And if we want to change the character’s appearance again, we have to repeat the entire process.

But this problem seems to be exclusive to traditional animation. Things are a bit different when it comes to rigging. Here, a character is represented by two separate parts:  a mesh that defines the character’s appearance,   and a set of bones used to animate it.

Each bone influences a different part of the mesh, allowing us to move the character freely. In this setting, we only need to edit this one mesh. And our changes will be visible no matter the animation. There’s a clear separation between the looks and the movement of our character.

Today I’d like to show you how to achieve something similar with pixel art. And no, I’m not talking about rendering a 3D model and pixelating it. Let’s start by taking a closer look at this texture. Typically, each pixel in an image is represented by four values: red, green, blue, and alpha

There’s nothing special about them – some 8-bit numbers ranging from 0 to 255. But the way shaders interpret these values turns them into color. That being said, nothing stops us from writing a shader that will interpret these values differently.

I can say, for instance, that the red value represents an x coordinate, while green represents y. And together, they constitute the position of some object. So imagine just a single pixel on some texture.  Instead of using its values to produce color,   we’ll use them as the UV coordinates for another texture.

The red value is gonna be U, green is gonna be V, and the color sampled from this other texture will be what we’ll actually display on the screen. This is the same concept used in Color Lookup Tables, for example. Now I can move the pixel on the left in any way I want.

And all I need to change its color is to modify this one lookup texture on the right. If we apply this idea to the walking animation from before, we end up with something like this. The colors on the left are really dark so let me increase their brightness a bit.

This way, you can see that every pixel has a slightly different value. Anyway, the resulting animation looks just like the normal one, only now I can make all sorts of adjustments by simply editing this one texture. I can easily add AST-1 on Alice’s arm. Or a menacing shadow on her face.

Or even give her an entirely different outfit. And all these changes will propagate to any animation that’s being played. But what I’m excited about the most is that you  can modify this texture at runtime. Imagine, for example, that running through mud would make our clothes dirtier. And then water could clean us up.

I could even go as far as implementing an in-game editor that allows players to create their own skins. Speaking of which, you have probably  noticed that this texture looks like something   for a 3d character. There’s the face, but  there’s also the sides and the back of the head.  

Because of this, I can change parts that  are only visible from specific angles.   For instance, If I place a hairpin right here,  it will not be visible on the other side.   As if the character was  actually three-dimensional.   Now that you know the concept – let’s see how to create these animations.

Remember how I increased the brightness of the source? This is what it looks like by default. As you may guess, it’s challenging to animate it properly when the colors are nearly indistinguishable. That’s why I’m using this intermediate lookup  texture that I’m gonna refer to as a map.  

It has the same shape as our final texture,  but every pixel here has a distinctive color.   I start the process with a basic animation and  overlay the colors from the map on top of it.   The striped pattern helps me keep track of specific features.

For example, this violet stripe in the middle of the leg should always be where the knee is. Once I’m finished, I import both the animation and the map to Unity. Here, a special Asset Importer produces the final sprites.   It reads every pixel in the source animation,  finds its color on the map,

And uses its UV coordinates to create the final image. As you can imagine, this whole process requires roughly the same amount of work as creating a separate set of animations. Except this time, we only need to do this once and then we can change the character’s  appearance however we want.

All in all, I think it’s a great addition to our catalog  of “things that nobody will notice anyway.”   Thanks so much to all my patrons. Thank  you for watching. And see you next time.