[Unity2D] Running Animation

Information
Step 1
In this lesson we are going to add a running animation when we move left and right!
Ezgif.com crop
Information
Step 2
First we need to learn how animations work. Look back into our sprites folder. We have two types of animation files.
Temp1550347094 Temp1550347666
Step 3
Let's see our player's animation controller! Click on our player and click on the Animator tab.

If the Animator tab is not there

  • Open it by clicking on the window button, then click on Animator. Click back on the Scene tab, select your player, and then click on Animator tab.

  • To move in the Animator window, click and hold the middle mouse wheel and drag it around to find your animations.

Information
Step 4
When we start our game. Our Animation controller starts with the Entry State. And then it moves into the Idle state.
Temp1550348426
Step 5
Click and drag the Animator tab out to make another view. So we can see both Game/Scene and Animator. Press play.

You can see that the idle state has a playing blue bar that plays over and over.

You can also click and drag a tab outside of Unity to make a whole separate window!

Step 6
In the animator, let's create a new State called "Run". Right click anywhere in the space and create an empty State.
Temp1550426091
Step 7
Now we want to create a transition from Idle to Run. Right click on idle and Make Transition. Drag the arrow to Run.
Planning
Step 8
Right now the Run State doesn't have any animation motion to it. Remember the .anim pieces? We need to create one.
Step 9
So let's create the run animation! Find all the running sprites, select all of them and drag it into your hierarchy.

Click and drag all run sprites into the hierarchy and create a new anim file called run.

  • Click the first one, HOLD down SHIFT and then click the last one to select all sprites between the first and the last.
Step 10
We only want the .anim file (the animation piece), we don't need the run object or run animation controller so delete it
Temp1550429039 Temp1550429406

We are going to use this run.anim file for our playerController animator!

Step 11
Go back to the Animator and click on the Run State. Right now the Motion is None. So click on the circle to add run.anim
Temp1550429493 Temp1550429516 Temp1550429547
Step 12
Click on the transition arrow from idle to Run and Uncheck Exit time, Uncheck Fixed duration,set transitionDuration to 0

This will make changing sprites from idle to run at 0 time. Meaning it changes immediately without delays or wait time.

Step 13
Next we'll create a float variable in the Animator called "speed".
Planning
Step 14
Now when do we know when to change from idle to run?

When we are not moving, something is 0.
When we are moving, something is NOT 0.

Is this something our speed* variable in our Animator?
Or is this something our horizontal variable in our Player.cs script?

Can we connect our speed variable with our horizontal variable?

Temp1550433659

Remember when we are moving, horizontal will be either -1, 0, or 1.

Step 15
For now, we need to reference(or get) our player's Animator. Type this code into your Player.cs script.
Temp1550433952
Information
Step 16
This is how to get our player's animator and then store it into our Animator variable called "playerAnimator"
Temp1550434095
Step 17
Now we can connect our "speed" (from Unity's Animator) with "horizontal" (from our Player.cs script) with SetFloat().

Type this into your code.

Temp1550434863
Planning
Step 18
Here's what it looks like on how this is connected.
Temp1550435282
Information
Step 19
What does Mathf.Abs() mean? We take the Absolute value of something. Meaning "Always" make something positive.
Temp1550435764

Since our horizontal is always going to be between -1 and 1, speed always be between 0 and 1, since -1 also becomes 1

Step 20
Go back to Unity, click on the transition from idle to run, and add a condition with the speed variable.

Put 0.01 into the the speed variable field.

So we now go from "idle" to "run" if our speed is greater than 0.01.

Step 21
We also need to return back to idle if we are not running. So make another transition from Run to idle.
Step 22
Click on the Transition line from Run to idle, first we need to remove exit time, fixed duration and transitionDuration
Temp1550436397
Challenge
Step 23
Now we need another condition where "speed" is less than "something".
Temp1550436510

Remember from step 19 that speed can only be between 0 and 1. So the number here cannot be a negative number and it cannot be 0.

Hint: Check what we typed for step 20

Check Your Work
Step 24
Now it's time to check to see if this works! Go back to Scene or game view and click play to try it out!
Challenge
Step 25
Does the Run animation look a little too slow? Do you remember how to change the frame rate of an animation?
Temp1550436820 Temp1550436787
Planning
Step 26
Now our player looks too fast for it's speed. Let's adjust the speed from the Player.cs script component.
Step 27
Change your speed to where it looks right on your sprite. I set mines to 20.
Temp1550436998
Check Your Work
Step 28
Test your game again and see if it looks right! Opps! Poor dog! We'll fix this in the next lesson.
Planning
Step 29
Let's also fix your player's gravity. Right now the player falls like a feather, we should be falling faster
Step 30
We can adjust the player's gravity by changing Gravity Scale on the Rigidbody 2D to a higher number. Mines is 5.
Temp1550445310
Check Your Work
Step 31
Your player should now fall faster!
Step 32
You are finished with this lesson. Click submit at the bottom and continue onto the next lesson!
[Unity2D] Running Animation Info

Account

MVCode Clubs

Created By

Nepgear tina (instructor)

Course:

2D Platformer Game

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach