Animating a 2D face on 3D characters
How to set up and animate the facial features of your 3D characters by using offsets to overlay 2D textures
The mission
Have you ever wondered how certain games manage to incorporate 2D expressions and faces onto 3D characters seamlessly? How do they ensure that a spherical shape representing the character's eyes doesn't protrude through the other side of the head mesh?
Well, sometimes the technique involves using 2D texture offsets to create the illusion of drawn frames overlaying 3D geometry. Notable games that employ this method include Animal Crossing and The Legend of Zelda franchise.
Today's mission is to demonstrate, in a comprehensible manner, how to set up and animate a character's facial features by using texture offsets to overlay 2D textures.
Resources
- Maya 2018.1+ LT
- Unity 2018.2+
- Photoshop CC 2014+ or you drawing program of preference
Preparing the model
This approach to facial animation should be taken into consideration from the initial stages and throughout the entire character creation process.
This will serve as the base mesh for our case study. As you can observe, it draws significant inspiration from Animal Crossing, although it's an original creation rather than a direct replica.
With the character mesh prepared, the next step involves gathering references from various games and media to select the extreme poses that the character will be capable of performing through facial animation. For this example, I'll choose one of my favorite 3D animated films: Wreck-It Ralph.
Let's use Vanellope as an illustration, as her proportions align more closely with the example's requirements than Ralph's.
With our references in hand, the next step is to strategize how we'll break down the entire puzzle to make it functional. We need to separate the following components:
- Eyes
- Eyelids
- Eyebrows
- Mouth/Rest of the face
This breakdown results in four distinct pieces, in addition to the base mesh. This segmentation will allow us to efficiently animate each component to achieve our desired facial expressions.
Important Note: Once you've duplicated and separated the meshes from the original, you might notice that the cuts have caused the normals to break.
To address this, you can utilize Maya's "Transfer Attributes" function to copy the normals from the base mesh to the separated components. This step ensures that the lighting and shading appear consistent across all components.
See? Much better! None of the cuts are visible :)
Texturing the model
Now, let's delve into the process of texturing the eyes. The foundation of this entire system revolves around offsetting the UVs of the mesh or the material. Once we've successfully positioned the eyes, we can move forward to working on the eyelids and implementing blinking animations.
Indeed, it's crucial to allocate additional space on the sides of the eye to ensure that each eye accommodates just one iris, even when pushing the UVs to their limits.
When creating the eye texture, I utilize the existing ”Base Iris” as a foundation for painting the eye's appearance. However, the key objective is to retain the eyelids and the red part as opaque while rendering the center as transparent. This arrangement allows the eyeballs to shift beneath this new layer seamlessly. After completing the remaining frames, we can proceed to arrange them in a texture atlas for optimization.
This is the result of the 4 frame animation.
Now, it's time to arrange these frames in a structured manner to enable more variations and accommodate future expressions. Utilizing a 4x4 grid, we can create configurations like 4 animations of 4 frames each or 2 animations of 8 frames, depending on your preference.
With the aid of Photoshop guides, we can neatly organize the frames using 1/4 of the total texture width for each section. This systematic arrangement streamlines the process and makes it easier to access and manage the different expressions.
The red sections will be painted white to allow for skin tone changes within Unity, and the inner parts of the eyes will be removed to create transparency. This results in a texture that looks like this when exported:
Now it's time to import our character into Unity and test our system. Ensure that all the materials are correctly assigned to their respective meshes. Also, make sure that the material for the eyelids is set to "Fade" so that it allows the underlying colors to show through.
Animating the model
The next step involves various workflows to animate the eyes, eyelids, and facial parts that we previously set up.
The most optimal approach would be to create a script in Unity that receives the offset values for different facial parts. These values can be controlled by a bone setup in Maya, allowing the Animator in Maya to visualize their actions. This is a more advanced topic, and I hope to cover it in a future blog post.
Alternatively, you can set up an Animator in Unity that controls each part separately to adjust the offset of the materials. This is the approach we are using in this example, as it's a simpler workflow and can be compatible with Mixamo animations. However, please note that this method might not be the most optimized.
It's crucial to consider the type of curves we're designing for a sprite sheet-style texture, particularly in the case of eyelids. Using a linear curve for the transition from one frame to the next could result in an unnatural appearance. Instead, we want the transition to be abrupt and distinct between frames. To achieve this, we'll use a "constant" type of curve, ensuring that the change in frames occurs instantly.
Here, you can observe the contrast between employing a "constant" curve versus a "linear" one.
Conclusion
Numerous workflows exist to attain the identical outcome. In this scenario, we might become engrossed in deciding between utilizing blendshapes (morph targets) or bones for a facial rig. However, there are continually additional alternatives at your disposal. Nintendo's games adeptly employ techniques that have seemingly fallen into obscurity, but were prevalent in the past.
I trust you've gained fresh insights today and found the information beneficial.
Until next time! :)
