Character Animations with Timeline in Unity 2020

Let’s get to the fun animations, characters!

Now that we have the basic knowledge of how Timeline works in general, we are ready to tackle something more interesting.

I’ll be using prefabs for a character with various animations provided by GameDevHQ, but you can use any humanoid character prefab supplied with animations for this.

The first thing we need to check is that our prefab has the correct import settings.
We need to set each prefab to the Humanoid Animation Type.

Next, we need to drag our character prefab into the Hierarchy window and position as desired.

I’ve repositioned my camera to face the front of the character rather than rotating the character prefab.

Sometimes the rotation can lead to issues when determining “forward” in code, which may be irrelevant but why not try to avoid an issue that could happen.

I want to position my character prefab in the correct section of the Hierarchy as soon as possible, so I’ve created a couple empty game objects and named them Directors & Character before childing ybot to them.

Now, it’s time to create a Director for Timeline.

It would be a mistake to create this Director object directly on my ybot prefab.
If I ever disable the ybot prefab in the Director Timeline itself, the Director Timeline will also shut down and cause issues.

So, I’ve used the parent game object of ybot, “Character”, to hold my Playable Director component.

Just to be crystal clear what my game objects do in the hierarchy, I’ve renamed the Character game object to CharacterDirector.

Again, we are avoiding potential future issues in code or elsewhere.

What if another team-member or myself were to rename ybot as “character”?
We’d have two game objects with identical names that could easily cause issues.

So, I fiddled with the skybox, lighting, and change the ground color just to make the scene a bit more interesting, but all we really need to do in this step is drag our ybot game object to our CharacterDirector’s Timeline (CharacterTimeline) and set it as an animation track.

In the GameDevHQ files provided to me, the animation for each of these character prefabs is saved as “mixamo.com”.
This may vary for your files, but look for that “running triangle” icon.

I select the animation, CNTRL+D to duplicate, rename the file created, and place it in my Animations > Character-ybot > folder.

Rinse and repeat for all of the other animations.

I’ve spruced up the background a bit, just to add some colors and make depth perception easier.

If we drag our newly copied idle_anim into our CharacterTimeline we can see the desired effect on play.

Now, if we click on the idle_anim in timeline, we can see some setting in our inspector appear.
I want this idle animation to loop, so I set Post-Extrapolate to Loop and Loop to On in the Inspector window.

Now we can drag in another animation, punching in this case.
Note that the change from idle to punching is very sharp.

We’ll need to fine-tune this a bit.

We can drag our punch animation “into” our idle animation and create a blend of the two animations by easing into the punch animation.

This looks much more fluid as a transition.

We can add a second punch, and ease-in a bit from the first punch to create a very rudimentary two-punch combo.

We’ll add some more animations to our sequence including a turn and walk backwards animation.

Now, if we hit play, we can see an issue.

While our animations play correctly in order, the expectation that the character model will walk backwards based on its new rotation after turning does not occur.

How do we fix this?

We need to click our walk-back animation that follows the right turn animation and tell it to “match offset to previous clip”.

That’s better.

Using Track Override

As shown above, if we click on the three vertical dots button for more options of our current animation track, we can select “Add Override Track”.

An override track will essentially do as stated and any animations on this new track will take precedence over the original track.

To illustrate a common issue we’ll run into, I’ve place the punching animation of the override track in the middle of the original animation track’s walk-backwards animation.

As you can see, this is a very jarring transition.

Unfortunately, there is no “match offset of original track” option here when we right-click on the punching animation of our override track.

Seems like that would be a no-brainer, but it isn’t there.

If we look at the Inspector window for our punching animation on the override track, we can see that Offsets Match Fields is enabled.

This is probably only for matching offsets in animations clips on the same override track though if I had to guess.

If we click on the override track itself in Timeline and view our Inspector window, we can see Track Offsets are set to Inherited and all offset fields are checked.

I wonder if there is a glitch here, or if this too is only meant to be applied to clips on the override track itself.

Anyways, we’ll need to find a work-around.

If we look at our ybot game object’s transform, we can see that obviously the position and rotation are changing during the walk-backwards animation.

If we check these values at the precise instant our override track is set to take over, we can copy them and then input them on the punching animation clip of the override track.

I have to say, I thought I’d be able to just paste these values in but Unity does not have that option here.
So, I did that by taking a screenshot of the values as seen in the clip above and manually typing it in.

If we play back our Timeline, we can see that now the transition from walking back to punching is looking much better.

Going from punching back to walking back however is still jarring.

The issue here is that in the one second of punch animation the walk-back animation moves the model quite a bit.

We can use ease-in and out to try and overcome this.

Hold control and drag the edge of the punching animation clip on the override track until you get something similar to this.

It can take some playing around with to find the right amount of easing for your use-case.

Still, there has to be a better way right?

Avatar Masks

“If your animation uses a Humanoid Avatar, you can select or deselect portions of the simplified humanoid body diagram to indicate where to mask the animation”.

“This task demonstrates how to use an Animation Override track and an Avatar Mask to replace the upper-body animation of an Animation track.

Use this technique to animate a humanoid to, for example, run and carry an object.”

With an Avatar Mask, we can override just the parts of the animation from the original track that we want.
In our case, the upper body and arms and perhaps the head.

This will allow the original walk-backwards animation’s leg movements to continue without being overridden while our punching animation overrides the rest.

We can create an Avatar Mask by right-click > Create > Avatar Mask on the location we want to save it in our Project window.

Once we select our Avatar Mask and click “Humanoid”, we can deselect the lower body of our Avatar.
This tells our mask we only want animations of the upper body to be active.

Select the override track (not a clip on the track, the track itself) and drag the new avatar mask into the appropriate field.

We now should see a little avatar mask icon directly on our override track in the Timeline window.

I’ve dragged a new punching animation without easing unto the timeline and played it directly after the eased-in and eased-out punching animation override.

As you can see, easing is still very useful!
Also, our legs are now animated perfectly.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

R -Programming Objects and Data Structures

How to find an Intersection between two matrices easily using NumPy

Why Most of Us Will Work Like IT Engineers

The dd() function in each PHP project

Combine — Single-valued publisher

GrandQuest, venture into the unknown

10 Best Themes for Visual Studio Code 2020

Smart Dustbin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
GameDev Dustin

GameDev Dustin

More from Medium

Activation Tracks Using Timeline in Unity 2020

Made With Unity | Guide To Beautiful Games In Unity Part 2: Shortcuts To Level Design

Coding Story Driven VR Games

Create a Control Room Game Scene: Part 1- Game Dev Series 147