Creating Animation Flow- Game Dev Series 88

S.J. Jason Liu
6 min readJul 23, 2021

Objective: assign different animation to movements.

In this article we will add animations to Player. Animation would bring the Player comes to live.
However, create a new animation is not easy. Luckily, we can use Mixamo to import lots of awesome animations to characters. And also, we will create the animation switching condition in animator component to create a smooth action in game.

Database of animation- Mixamo

Mixamo is a animation database service that provides by Adobe. To use the animations from Mixamo, you need to create an account of Adobe. You can also logging by using your social media account.

In this article, the first animation we will create would be “idle”. Search “idle” and pick one that you want to use in your game, then click download.

Select “FBX for Unity” in Format and you can choose to keep the skin or not. Then you can use the file in your game.

Idle animation setting

There are 2 ways to import the animation to your game. You can drag the file from file explorer to specific folder in Unity Project window, or copy the file in file explorer to the location where you create your game project.

Once you import the animation, it will show in editor.
Select the animation file and change the Animation Type from Generic to Humanoid, and click Apply.

That would allow the animation to work in our game.
Next, open the animation by clicking drop down icon, there is a animation clip with icon in it. That is what we are going to use to Player.
However, you will notice that we are now allowed to adjust it when select it.

To fix this, duplicate the animation as a new one. Then put it to any folder you want. Since it is a new animation clip, you can adjust this now.

Once we have the animation, we can assign it to Player. Create a Animator Controller and add it to Model gameobject under Player.

Double click to open Animator window. Then drag the duplicated animation clip into Animator.

It will set as default animation state automatically. Play game and you should see the idle animation.

Make it run!

Next let’s add running animation to Player.
Search and select a running animation from Mixamo. Before download the animation, make sure there is a “In Place” option and make it checked to lock the animation at the position.

After downloaded it, import it to Unity and do the same adjustments as we did to import idle animation.

Then drag it into animator window. Right click on Idle to make a transition to Running. And also create another transition from Running to Idle.

We need to make a parameter as condition to these transition. Add a float parameter and name it “Speed”. Then assign this float to both of the transition.
When we start running from idle state, the speed of Player would be more than 0. That is what we are going to use as a condition.
Make the transition from Idle to Running when Speed is greater than 0.1.

On the opposite, it will back to Idle when the speed is less than 0.1.

Don’t forget to uncheck Has Exit Time!

Next we will need to send the Speed value from Player script. We will start running when we input the movement key.
Create a variable of Animator and get reference in Start(). Then, under the if statement of input detection, send the value of “Speed” to animator.

Because the value of horiMoving would be from -1 to 1, it would not be readable in Animator, hence we need to use Mathf.Abs to get the absolute value of it, which would only be 0 & 1.

Now you can play the game and check the running animation of Player.

Don’t worry about the model turning issue, we will fix it later.

Jump while running

The next is jumping animation. As usual, select one from Mixamo and import it to Unity. After drag it into Animator, we need to create another parameter to control the transition.
Create a bool and name it “Jumping”.

And create the 2-way transition on both Idle and Running to Jumping.

The setting of conditions would be simple. When we are idling or running, if jumping condition equal to true, we jump.

After we jumped, if speed is greater than 0.1, that means we are running, back to Running animation. Or, back to Idle.

Once it done, let’s set the value in script.
Because we will switch the bool right after Player jumped, there might be some compiling error when 2 state of bool are too close. We should not use “SetBool” directly in code to control the animation switching. Instead, create a bool variable and use it as the value of “SetBool” in animator.

Then we can control the animation when we jump.

And the jumping animation is ready!

Fix the rotation issue

To fix the model rotation issue, add a new Vector3 under input detecting lines. And set this Vector3 to localEulerAngles to define the rotation.

Then set the y-axis value of this Vector3 to the specific numbers depends on z-axis movement value from our input.

This line of code define the facing.y. If movement.z is greater than 0, then the facing.y would be 0. Otherwise, the value would be 180.
Next we assign this Vector3 value back to local rotation.

Last step is to make sure these lines of code would only happened when Player is moving. Use an if statement to do this part.

All done! Player looks awesome with smooth animations.

--

--

S.J. Jason Liu

A passionate gamer whose goal is to work in video game development.