This way of doing facial animation should be considered when starting and through the process of creating the character.

Once we have the mesh of our character mesh ready, we can start getting some references from other games and other pieces of media to choose the extreme poses they'll be able to perform with facial animation. I'm going to choose one of my favourite 3d animated movies as an example: Wreck it Ralph. Let's use Vanellope since the proportions for the example is closer to hers more than Ralph.

So now we have some references, let's plan in how many parts we need to divide the whole puzzle to make it work... We need to separate:

• Eyes
• Eyelids
• Eyebrows
• Mouth/Rest of the face

That leaves us with 4 different pieces + the basemesh.

VERY IMPORTANT: after duplicating and separating the meshes from the original one, you can see the cuts where the normals broke.
​
We can use Maya's Transter Attributes to copy the normals from the base mesh.

Let's start texturing the eyes. The principle which all of this system is based on is an offset the UVs of the mesh or the material. Once we have the eyes in place let's proceed with the eyelids and make them blink!

As you can see, we need to leave some extra space on the sides of the eye so we only get one iris for each eye, even if we push the UVs to the limits.
​
When painting the eye, I use the Base Iris we already have to draw the eye itself, but the point will be to leave only the eyelids and the red part as opaque, and leave as transparent the center so the eyeballs can offset under this new layer on top. Let's draw the rest of the frames and then we'll organize them in a texture atlas!

This is the result of the 4 frame animation.

Let's now organize them so we can have more variations with other expressions in the future! We can use a 4x4 grid, giving us 4 animations of 4 frames each, 2 animations of 8 frames, or however you like to organize it! Thanks to Photoshop guides we can organize them in a regular way, with 1/4 of the total width of the texture.

The red parts are going to be painted white so we can change the skin tone inside Unity, and the insides of the eyes are going to be removed so they're transparent, looking like this when exporting the texture:

The checker pattern is the transparency bit.
​
Let's import our character into Unity now and try how our system works. Assign all the materials to the correct mesh. Make sure the Eyelids' Material is set on "Fade" so it lets the underneath colours go through.

The next part is where different workflows can be used to make the eyes, eyelids and facial parts animate we setup before.

The optimal way to do this would be to setup a script in Unity that receives the offset of different facial parts with a setup of bones that control those offset from Maya, so the Animator in Maya can see what they're doing. It's a more complex topic and I hope I can make a blog post in the future about that.
​
We can also setup an animator that controls each part separately to modify the offset of the materials (this is the one we're using in this example since it's a very simple workflow, and can be compatible with Mixamo animations), but it's not really optimized.

We have to be mindful of the type of curves we're creating for a sprite sheet kind of texture (eyelids in this case), since if it was linear it would look super strange panning from one frame to the next. We need it to snap from frame to frame, hence we'll be using a "constant" type of curve.

Here you can see the difference between using "constant" and using "linear"

There are many workflows to achieve the same result, and in this case we might get carried away about what should we use, either blend shapes (morph targets) or bones for a facial rig, but there are always more options available to you, and the games from Nintendo make a really good use of "now forgotten" techniques that were more common in the past.
​
Hope you learned something new today, and that it was useful. See you around! :)

How we did it

When we made our avatars we made the UVs in a particular. Each UV isle is one color, so that way in Substance Painter.

You've got your avatar ready, right? If you are in doubt, you should follow this few guidelines to make sure you won't have any problems:
​

• Make sure the UVs only use one region. Basically, don't get the UV Isles out of the big square, Like in the picture.

• Every UV isle should be unwraped. In some instances this is not 100% necessary, but more often than not they should all be.

• Take as much space as you can.

• Always leave some space between isles.

​

• You can put 2 isles overlapping, but its use is for only for very specific use like repeating patterns or letters.

If you think your UV maps are done, then let's go to the next step: PAINT!

Our avatars are quite simple in terms of painting, usually using a combination of flat colors, maybe some gradients, patterns to mix things up and letters in some cases. So, how can we make those?

We will use Substance Painter for almost all of that.
​
First, you need to import you character. Use whichever program you know (Blender, Maya, 3D Max...) to export an FBX file.

Then in Substance, create a new proyect. Use the template which fits with your proyect and use the select button to find your fbx file.

Now you should see your character on the left side and the UV map on the right side of the screen.

On the top right corner of the UV map view you can select "Base color" so that way you can only see the colors without any material added.
​
Now we will go on painting.

It will create 2 squares, one representing the color and the black one is the mask.

Click on the color and right under the Layers tab, scroll through the propeties until you find Base Color. You can select any color you want. Using the dropper tool you can even select colors that are on another place outside the program.

If you have the color you want to use, you will see nothing has changed. Now its time to use the mask we created before.
​
Click on the mask black square, and go to the left of your screen. You will see a couple of icons. Select the Polygon Fill one. Right above it, select UV Chunk Fill.
​
Now you can begin to paint.

Select whichever UV isle you want and it will get the color you said.

If you are repainting one of our avatars you can actually add the base texture if you want to preserve one zone like the original.

On the top left, new → import resources. Click on the Add Resources and find the texture you want to add.
​
Make sure to mark it as a texture.

And import it to your current session.

Now that it's imported it should appear on the texture section on the shelf (Located on the bottom).
​
You can drag and drop the texture into the base color on any base layer and with the help of a black mask, you can select which zones to use.

Once you have your final results it's time to export.

Go to New → Export Textures
​
Click on the name of the material and deselect or select the maps you have used or want. For our avatar we only used Base Color, so we won't use the other ones.

On global settings you can change the directory output, the file type and the padding.
​
This last one is important. Padding is the amount of pixels over a UV isle in which the program will draw over the limit. If that doesn't make any sense here's a comparasion between a texture with no padding at all (right) and 10 pixels of padding (left).

By default it's set to infinite, which is alright, but I usually set it to "Dilation + Default background color" and I set the pixels to a minimum of 8. That's why it was important to space out UV Isles.
​
Once all the parameters are correct, hit the export button and done!

We need to set the avatar in T-pose for an easier workflow.

It's time to adjust the hand and match the vertex with the mesh of the avatar.

Finally, if we are not convinced with the final result, we also can move the vertex/edges/faces of the object before export. Just make sure that the avatar hands are exactly where you want to, with the scale as you want,...
​
Once we followed this steps, now we have to export into a fbx and upload it to mixamo.

Make again mirror of the avatar

To make this faster than usually, I use Blender 2.9.

Navigating he Viewport
​

First of all, import the fbx of the avatar, just before you want to upload.

We want to select one side (right or left) and delete the other one.

Make sure that the middle vertex are in the position 0 in X

Make again mirror of the avatar

When you have been uploaded your avatar to mixamo (using the Auto-rig), choose the animation of typing to get sure that each finger works fine. Also, we have some settings at the right, we will use one whose Tittle says "Character Arm-Space".

Of course, the scale of the hands, topology, etc can not match perfectly with all the avatars, but we can modify at least, the mesh of the hands or avatar before combine together and make again the UV's.
​
However, normaly change the mesh of an avatar rigged could be tiresome. But following different tips and rigging with mixamo gives you a lot of time that you can spend in other things.