Facial Animation

This doc goes over the facial animation requirements so your custom Avatar in Roblox can use facial tracking and emotes.

Tutorial

Facial Animation in Roblox allows players to use a Web Camera to animate the Avatars facial expression. You could also use this as a character for VTubing as well. Roblox Emotes also use these.

Roblox uses a Facial Action Coding System (FACS) to represent the face and animate it correctly, similar to other Face tracking platforms. For this we need to make a number of key poses that the Engine can then translate into useful expressions when needed.

If you have a simple character, or something with limited amount of expression you will only need to focus on a few expressions such as the jaw opening (JawDrop), and eyes closing (LeftEyeClosed + RightEyeClosed). If you are creating a more detailed or expressive character, we can create a number of key poses to allow that to look more natural.

Setting up the Key Poses

Each key pose (all outlined below) requires a keyframe with the face rig positioned accordingly. For more examples of the facial animation, check out the Roblox Documentation.

So Keyframes would be set with the following :

• Frame 0 - Neutral pose

• Frame 1 - Eyes looking down

• Frame 2 - Eyes looking left

• Frame 3 - Eyes looking right

• Frame 4 - Eyes looking up

• Frame 5 - Left eye is closed

• Frame 6 - Right eye is closed

• and so on...

It is recommended to set the keyframes in alphabetical order, but this is not compulsory as we will be specifying which frames use which key poses later with Mapping.

Required Animations for Marketplace

The following 17 key poses are required if you want to add an avatar to the Marketplace. They are also a good minimum to have for expressive characters.

Note that I have combined many of the key poses that have a left and right pose purely to save space. There would be a LeftEyeClosed keyframe, and a RightEyeClosed keyframe for example.

• EyesLookDown

• EyesLookLeft

• EyesLookRight

• EyesLookUp

• LeftEyeClosed / RightEyeClosed

• LeftLipCornerPuller / RightLipCornerPuller

• LeftLipStretcher / RightLipStretcher

• LeftLowerLipDepressor / RightLowerLipDepressor

• LeftUpperLipRaiser / RightUpperLipRaiser

• JawDrop

• LipsTogether - Lips together allows the lips to be closed when the JawDrop animation is used

• Pucker

The following are recommended, but not required for Marketplace Assets. This will allow your avatar to be even more expressive.

• ChinRaiser

• ChinRaiserUpperLip

• FlatPucker

• Funneler

• LowerLipSuck

• LipPresser

• MouthLeft

• MouthRight

• UpperLipSuck

• LeftCheekPuff

• LeftDimpler

• LeftLipCornerDown

• RightCheekPuff

• RightDimpler

• RightLipCornerDown

• JawLeft

• JawRight

• Corrugator

• LeftBrowLowerer

• LeftOuterBrowRaiser

• LeftInnerBrowRaiser

• LeftNoseWrinkler

• RightBrowLowerer

• RightOuterBrowRaiser

• RightInnerBrowRaiser

• RightNoseWrinkler

• LeftCheekRaiser

• LeftEyeUpperLidRaiser

• RightCheekRaiser

• RightEyeUpperLidRaiser

• TongueDown

• TongueOut

• TongueUp

Once you have your animations done, you need to set them up so that Roblox can understand them. This process is called Mapping.

Mapping

• Select the 'Head_Geo' model.

• Go to the 'Object Properties' panel at the bottom right and look under 'Custom Properties'.

• Note that if you do this you have to enable the 'Custom Properties' when you export your assets.

Setting up the RootFaceJoint

The RootFaceJoint allows Roblox to register the Face Rig correctly.

• Select '+ New' under 'Custom Properties'.

• Click on the Gear to the right of the new property to edit it.

• Set the 'Type' to 'String'.

• Set the Property Name to 'RootFaceJoint'

• Leave the 'Default Value' and 'Description fields' empty.

• Select 'OK' to close the Edit popup.

• Type 'DynamicHead' (if using the template as is) into the 'RootFaceJoint' property.

If you do not map the 'RootFaceJoint' correctly, your facial animation will not be imported correctly.

Setting up the Key Poses

• Select '+ New' under 'Custom Properties'.

• Click on the Gear to the right of the new property to edit it.

• Set the 'Type' to 'String'.

• Set the Property Name to 'Frame0'

• Leave the 'Default Value' and 'Description fields' empty.

• Select 'OK' to close the Edit popup.

• Type 'Neutral' into the 'Frame0' property.

• Continue this process to line up your keyframes to their respective poses outlined above. Your keyframes may be different from the ones in this tutorial, so make sure you line up the frame number to the correct key pose type.

  • Frame0 - Neutral

  • Frame1 - EyesLookDown

  • Frame2 - EyesLookLeft

  • Frame3 - EyesLookRight

  • Frame4 - EyesLookUp

  • Frame5 - LeftEyeClosed

  • Frame6 - RightEyeClosed

  • and so on...

Mapping examples...

Troubleshooting

Face Capture / Face Editor do not appear in Roblox Studio

• Make sure to turn on the Face Capture plugin in File/Beta Features (if it is still in Beta).

• Make sure that the bones in the Head follow the exact facerig structure.

  • If you have any extra bones, or name them incorrectly, Roblox may not recognise the face as Animatable.

Animatable Head Face Rig Bones....

In this doc, we looked at setting up the facial animation so that Roblox can utilise it for things like Facial Tracking with a WebCam in game or Studio.