Polygonal Mind
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets

Blog

Animating a 2D face on 3D Characters

5/27/2021

2 Comments

 
The Mission
Resources
Have you ever wondered how, in some games, they are able to use 2D expressions and faces on 3D characters? How would you even fit a sphere for the character's eyes and make it not poke through the other side of the head mesh? Well, sometimes we can use 2D offset of the textures to create the illusion of draw frames on top of 3D geometry. Some famous games that do this are: Animal Crossing, The Legend of Zelda Franchise...

The mission today is show in an easily understandable way how to setup and animate the facial features of a character by offsetting and overlaying 2D textures. 
  • Maya 2018.1+ LT
  • Unity 2018.2+
  • Photoshop CC 2014+ or you drawing program of preference
Animating a 2D face on 3D Characters
Preparing the model

This way of doing facial animation should be considered when starting and through the process of creating the character.
character base mesh
character base mesh
This will be my character base mesh for this case study. As you can see, it's very heavily inspired on Animal Crossing's, though it's not a direct copy and it was made from scratch.
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.
Wreck it Ralph Vanellope
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.
Character face parts
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.
Cut base mesh
Cut base mesh
Cut base mesh
See? Much better! None of the cuts are visible :)
Clean base mesh
Texturing the model

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!
Eye expression grid animation
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!
Eye expression grid animation
This is the result of the 4 frame animation.
Eye expression grid 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.
Eye expression grid animation
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:
Eye expression grid animation
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.
Eyelids material
Animating the model

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.
3D Character blinking
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.
Constant type curve
Here you can see the difference between using "constant" and using "linear"
Animating Constant
Constant
Animating Linear
Linear
3D Character Animation
3D Character with 2D Face
Conclusion

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! :)
Alejandro Bielsa 3D Artist
Alejandro Bielsa
GENERALISTA 3D
Junior 3D artist working at Polygonal Mind's in-house team. Passionate about videogames, vivid tutorial drinker and cat lover.
twitter
2 Comments
Justin Bernard
3/8/2022 10:01:14 pm

Hey! This was really, really cool! Thank you

Reply
Hum3D link
5/12/2022 07:33:13 am

Thank you for this tutorial. I like your approach to this task. In my opinion it's one of the most effective ways.

Reply



Leave a Reply.

    Categories

    All
    Blender
    CryptoAvatars
    Decentraland
    Decentraland En Español
    Maya
    Metaverse
    Mixamo
    Morphite
    Substance Painter
    The Sandbox
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    Vrchat

    Archives

    March 2022
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2022 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets