unity animation tutorial

Easy Unity Animation Tutorial #6 Multiplayer Character Animations

Unity 3D MMO Tutorial Series

Welcome to the Unity Animation Tutorial for Animations. You have made it to tutorial #6. If you have not completed the 5th tutorial, go back and finish it. You can find the tutorial here. If you are looking for the first tutorial, you can find it here.

Since this is a Unity Animation Tutorial, make a new folder in your Assets folder. Name the new folder “Animations.” When you downloaded the “LowPolyMan.fbx,” you would have received three animation files. Drag those files into your “Animations” folder.

The Animator Component

We will assign an “Animator Component” to the player character object so that the character can use animations. We will code a reference to the “Animator Controller” for the “Animator Component” to work. For more information on the “Animator Component,” go here.

The first bit of business to do is add the “Animator Component” to the “Player.” Click on the “Player” in the Hierarchy tab. In the Inspector tab, scroll down until you see “Add Component.” Click on “Add Component” and search for “Animator.” Add the “Animator” to your player object.

Unity MMO Tutorial Animations

Create a new folder in the Assets folder in the “Project” pane. Name the folder “Animation Controllers.” Open the Animation Controllers folder and right-click in the empty space. Click “Create -> Animation Controller.” Name the Animation Controller “Player Character.”

You won’t be able to see the Animator yet. Click on “Window” at the top left of the screen and find “Animation -> Animator.” Doing so will open a new tab. Drag the Animator tab to where ever you like on the screen. Do the same thing for the “Animation.”

Unity MMO Tutorial Animations
Animation Tabs

Click on the “Player Character” in the Animation Controller folder added to Assets. The Animator tab will now populate with some buttons. Be sure you are in “Parameters” and not “Layers.”

Unity MMO Tutorial Animations
Animator Buttons

Right-click in the grid window and select “Create State -> From New Blend Tree.” You should now have a new “Blend Tree” button in the Animator window.

Blend Tree
Blend Tree

The Blend Tree: Animations

Let’s rename the Blend Tree in the Inspector tab. Click on the “Blend Tree” box to show it in the Inspector and name it “Player Locomotion.” If you would like to learn more about Blend Tree, go here.

Now double-click on the Player Locomotion button in the Animator window. A Blend Tree button will appear. Click the Blend Tree button once and switch to the inspector tab to view it. Not much to see, but we will fix that soon enough.

Now for the exciting part! With the Blend Tree Parameter in the Inspector tab, click the plus icon under “List is Empty.” Click on “Add Motion Field.” Do this three times, one for each animation.

Add Motion Field
Add Motion Field

Add animation for each of the new motion slots we just created. Idle should be first, then Walk, and finally Run. All you have to do is drag them in place.

blend tree animations

Click the play button above the character in the Inspector tab. Notice the character is just doing Idle animation. His arms wiggle a bit. But if you move the Blend scroller over in the Animator window, he will do much more!

Blended Animations

The Thresholds for each one are as follows: Idle is 0, Walk is 0.5, and Run is 1. The Blend Tree, as you scroll, will mix the animations somewhere in between. The entire scroll to the right will be the full-out run animation. Cool right? However, we haven’t gotten our character in the game to animate yet. We will do that next.

Run Forest Run!

Do you want to make him run for real? Let’s go! The first thing to do is drag the “Player Character” Animation Controller over to the Animator Component attached to the Player. Drop the controller into the controller slot.

Unity Animation Tutorial

Next, open Assets -> Player -> Model folders and click once on the LowPolyMan icon. This will open a window in the inspector we haven’t seen before. This is the import settings window. Click on “Rig” near the top of the window and click the arrow across from “Animation Type.” Select “Humanoid” in the drop-down list. Ensure the “Avatar Definition” is set to “Create From This Model.”

Lastly, click on the “Player” in the Hierarchy tab once again to open it in the Inspector window. Click the little white button across from the “Avatar” row to open the drop-down in the Animator Component. Select the “LowPolyManAvatar.” Close the Avatar window, run the scene, and check it out in amazement!

Holy Moly, Look at That!

To our surprise, it doesn’t do much. However, observe the guy’s arms and stance. They wiggle just like they did in the animation preview window. The other two animations don’t work as we need to code them. Remember, we placed the “Idle” animation first, which is the default animation for the player character. If we had put the walk animation in the Blend Tree first, the character would have walked in place like he was moonwalking.

Born to Run

This guy is just about ready to run a marathon. First, go to the Animator window and double-click the “Blend” parameter. Rename the parameter to “Player Locomotion.”

Click on the “Blend Tree” node to open it in the Inspector tab. Change the Parameter to “Player Locomotion.”

Now we can add the animations to our code and make the character walk and run. Open the PlayerControls.cs file if you don’t already have it open. At The top of the class, under the “CharacterController controller;” add the code:

Animator animator;

In the “Awake()” method, add the code:

animator = GetComponent<Animator>();

Like before, we have to reference a Component. In this case, it’s the “animator” component.

Go to the Locomotion() method and add to the “if (run)” code:

animator.SetFloat("Player Locomotion", 1);

This code sets the value of the “Player Locomotion” parameter to 1 in the animator component attached to the game object. The animator uses this value to determine which animation should be played. In this instance, the value of 1 invokes the “Run” animation because its Threshold value is 1.

Here is what this code looks like in full:

 if (run)
     speed = walkSpeed * runSpeed;
     animator.SetFloat("Player Locomotion", 1);

Let’s add the “Walk” animation to the “else” code like this:

    speed = walkSpeed;
    animator.SetFloat("Player Locomotion", 0.5f);

There is one more code block we need to add. Under “controller.Move(velocity);”, add the code:

if (movementInputs.x == 0 && movementInputs.y == 0)
    animator.SetFloat("Player Locomotion", 0);

This code will prevent the “Run” animation from running while the character is in the “Idle” stage.

Run your game and try out the mouse and keyboard controls. He is running! Now press the Keypad Divide to make him walk. Congratulations!! You have the basic (very basic) workings of a character! In the next tutorial, we will streamline the code to make it more manageable.

Until next time, May The Force Be With You, Always. – Dragon


Leave a Reply

Your email address will not be published. Required fields are marked *