Pixel Art Animation. Reinvented

Pixel Art Animation. Reinvented - Astortion Devlog

With video games, sometimes our characters need to look different depending on the situation. For instance, consider Alice: the three white pixels on her right arm represent AST-1, a device she uses to distort gravity. However, at the beginning of the game, she won't have acquired it yet, so naturally her appearance 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 issue seems 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 is 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; 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 going to be u, green is going to be v, and the color sampled from this other texture will be what will actually be displayed on the screen.

This is the same concept as using 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 gloves 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've probably noticed that this texture looks like something for a 3D character. There's the face, but there's also the size in 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 going to 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 catalogue of things that nobody will notice anyway. Thanks so much to all my patrons, thank you for watching, and see you next time!

Keywords

Character Appearance
Rigging
Mesh and Bones
Shaders
UV Coordinates
Color Lookup Tables
Animation
Texture Map
Pixel Art
Unity
Runtime Modification
In-Game Editor

FAQ

1. Why do characters need to look different in video games? Characters' appearances need to change to reflect various situations, such as acquiring new equipment or transitioning to different areas.

2. What is the traditional solution for changing a character's appearance? The traditional solution is to create multiple sets of sprites for each variation of the character's appearance, which can be cumbersome and inefficient.

3. How does rigging differ from traditional animation in addressing character appearance? In rigging, a character is represented by a mesh and bones that control its movement. Changes only need to be made to the mesh, allowing modifications to be applied across all animations.

4. What is the core concept applied to pixel art in this article? The core concept is to use a shader that reinterprets pixel values as UV coordinates to map textures, allowing for dynamic changes in appearance without altering the base animation.

5. What are the benefits of this new method for pixel art animation? This method allows for easy modifications to the character's appearance across all animations, supports runtime changes, and facilitates the addition of features like in-game skin editors.

6. How does the map texture aid in the animation process? The map texture contains distinguishable colors that correspond to different parts of the character, making it easier to track and animate specific features accurately.