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.
