Unity Avatar Mask and Animation Layers

In this tutorial we will learn how to use Avatar Mask and Animation Layers to combine multiple animations.

Introduction

Imagine we imported an animated 3D model from Asset Store, in our sample, we will use the incredible robot from the free package Sci Fi Warrior PBR HP by Dungeon Mason. In this package, there are 10 animation clips:

post image


animation clips available on Sci Fi Warrior PBR HP


All those clips are animations for full body. So, when you play them:

Idle_GunMiddle

post image


the robot stands idle with the gun in the middle of his body


WalkForward_Shoot

post image


the robot walk forward and shoot


You can see all the animations available on the Sci Fi Warrior PBR HP package in this video https://www.youtube.com/watch?v=fNzBdYhm3Gk

These are great animations, although if we want to make the robot stands idle, but instead of keeping the gun in the middle of his body, he aims the gun or shoot?

Or if we want that robot walk forward but holding the gun in the middle of his body?

Of course, we can ask to the artist to create all those animation combinations, but there is a smarter approach for this case…

Avatar Masks and Animation Layers goes to the rescue

To start, lets see what Unity Manual says about Avatar Masks and Animation Layers:

Avatar Masks

Masking allows you to discard some of the animation data within a clip, allowing the clip to animate only parts of the object or character rather than the entire thing. For example, if you had a character with a throwing animation. If you wanted to be able to use the throwing animation in conjunction with various other body movements such as running, crouching and jumping, you could create a mask for the throwing animation limiting it to just the right arm, upper body and head. This portion of the animation can then be played in a layer over the top of the base running or jumping animations.

Animation Layers

Unity uses Animation Layers for managing complex state machines for different body parts. An example of this is if you have a lower-body layer for walking-jumping, and an upper-body layer for throwing objects / shooting.

By reading those two sections is quite clear that we need to use avatar masks and animation layers together to combine our animations of different body parts. So, in the next sections, I will demonstrate how to combine three animations (Idle_GunMiddle, WalkForward_Shoot, and Shoot_single) to make the robot shoot while stands idle and walk forward with a gun in middle body. After that, I will propose you a challenge for the other animations available.

Starter project

post image

All the source code and assets for this tutorial are available on this GitHub repository: https://github.com/giacomelli/unity-avatar-mask-and-animation-layers. To start this tutorial you need to fork, clone or download the repository.

git clone https://github.com/giacomelli/unity-avatar-mask-and-animation-layers.git

Open the folder avatar-mask-starter on Unity.

This starter project has an initial setup and assets to allow us to focus in the learning about Avatar Masks and Animations Layers.

Open the scene _Tutorial/Scenes/TutorialScene.

If you see a popup called TMP importer, hit the Import TPM Essentials button to import the TextMesh Pro’s assets.

Hit the Play button. You should see a screen like this:

post image


Starter project running: just HUD


Creating the Animation Controller

Create a new Animation Controller (menu Assets/Create/Animation Controller) and open it:

post image


Animator window showing the animation controller created


All animation layers, nodes and transitions for this tutorial will be created inside this animation controller.

In the hierarchy, select the SciFiWarriorHP and in the Animator component set the Controller property to our Animation Controller.

Making the robot walk forward

To get something running right now, we will make the robot walk forward when the button WALK / FORWARD became checked.

In the Animator opening with our Animation Controller drag the animation clip Idle_GunMiddle from folder SciFiWarrior/Animations. Do the same with the clip WalkForward_Shoot.

Create a transition (right click on the node and Make transition) from Any state to WalkForward_Shoot and create another transition from WalkForward_Shoot to Idle_GunMiddle.

Now we need to tell to the animation controller when it should activate the two transitions, for this we will create a bool animation parameter called WalkForward.

post image


WalkForward parameter created


We want to activate the transition from Any state to WalkForward_Shoot when WalkForward is true, so select this transition (click on the arrow connecting the state Any State to WalkForward_Shoot) and in the Conditions list on inspector add the WalkForward equals true:

post image


WalkForward condition defined


Click the reset to auto fit the exit and transition time:

post image


reseting the transition settings


Repeat the same steps as above for the transition from WalkForward_Shoot to Idle_GunMiddle, but use false as the value for WalkForward.

post image


animation base layer


Hit the Play button to test the animation states. When you click on WALK / FORWARD the robot starts to walk, when you click it again the robot stops to walk.

Creating the upper body avatar mask

The animation for walk forward works pretty well, the robot walks forward while it’s aiming the gun. This is the whole movement animated inside the WalkForward_Shoot clip.

Now we want that robot walk forward without aiming the gun, instead of this, we want it keeps the gun in the middle as it does when Idle_GunMiddle is active. To get this done, first, we need to create an avatar mask to the upper body.

Create a new Avatar Mask (Assets/Create/Avatar Mask) called UpperBody. In the inspector, uncheck all lower body parties, as the image below:

post image


only upper body


Creating a upper body animation layer

With the UpperBody Avatar Mask created, we will need to create a new animation layer that will use the mask. Go to the animator window and create a new layer using the + button:

post image


the new layer created with the mask


Change the Weight property to 1 and set the Mask to the UpperBody Avatar Mask. Keep the Blending as override.

Drag the animation clip Idle_GunMiddle from folder SciFiWarrior/Animations to the UpperBody layer.

post image


upper body animation layer


Testing the animations

Hit the Play button to test the animation states. When you click on WALK / FORWARD the robot starts to walk, but now it’s not aiming the gun, instead it keeps the gun in the middle.

Why does this happen?

So, this is done by the UpperBody Animation Layer that we added to our animation controller, as it’s mask was defined with our UpperBody Avatar Mask that only consider upper body parts of the humanoid, Unity overrides the base layer animation with the upper body part of the Idle_GunMiddle.

Making the robot shoot

We will make the robot shoot when the button SHOOT / SINGLE became checked, this will help us to better understand how the Avatar Mask and Animation Layer works to override the animations from the base layer with the animations from UpperBody layer.

In the Animator Window with our Animation Controller opened, select the UpperBody layer and drag the animation clip Shoot_single from folder SciFiWarrior/Animations.

Create a transition (right click on node and Make transition) from Any state to Shoot_single and create another transition from Shoot_single to Idle_GunMiddle.

Now we need to tell to the animation controller when it should activate the two transitions, for this we will create a bool animation parameter called ShootSingle.

post image


ShootSingle parameter created


We want to activate the transition from Any state to Shoot_single when ShootSingle is true, so select this transition (click on the arrow connecting the state Any State to Shoot_single) and in the Conditions list on inspector add the ShootSingle equals true.

Click the reset to auto fit the exit and transition time.

Repeat the same steps as above for the transition from ShootSingle to Idle_GunMiddle, but use false as the value for ShootSingle.

Hit the Play button to test the animation states. When you click on SHOOT / SINGLE the robot shoot.

Now you can combine the two buttons WALK / FORWARD and SHOOT / SINGLE and see how the animations combine.

Challenge

Do something is better to learn than just reading and following someone instructions because this I will challenge you to try to implement other actions:

post image


the remaining actions to the challenge


To implement these actions you need to do almost the same thing we did in this tutorial so far, just using another animation clips, transitions and parameters.

The challenger items are the legs because you will need to create new Avatar Masks with the Transform option of the avatar configuration to get the right animation. New Animation Layers will be needed as well.

If you have any doubt how to implement any part of this challenge, feel free to ask on this post comments or send me a message.

Solution

The whole source code and assets for this tutorial are available on: https://github.com/giacomelli/unity-avatar-mask-and-animation-layers

This repository has two main folders:

  • avatar-mask-starter: the one you used to make this tutorial.
  • avatar-mask-complete: the whole solution with all actions implemented. Use this one, in case you get stuck in any item on the challenge.

The video below shows the complete solution running:

Conclusion

In this tutorial, we learn how to use Avatar Masks and Animation Layers to animate a robot with different masks and layers. These techniques allowing us to use already existent animations and combine them.




Icons made by Freepik, Vignesh Oviyan and Eucalyp from www.flaticon.com is licensed by Creative Commons BY 3.0

Loading comments...
Tutorials

Articles

Labs