Animations In Unity
Animations in Unity is one of many features Unity has to offer. Being one of the most fundamental skills developers need to learn, it is one of the most important aspects of building a game.
Unity provides an animation manager and an animation editor to handle animations such as running, walking, and jumping. Without animations, a game wouldn't feel as modern and life-like.
Plan
The plan for the blog is to have a functional walking animation teaching you a variety of tricks such as animating, scripting, and editing.
In the future, different animations such as jumping, sliding, and sprinting may be added but having a starting point like this is all that is necessary.
Animating!
As the first step, we would like to have a comfortable atmosphere and a well-known area of what we are working with.
Inside Unity, you will be able to open the Animation tab by going to Window on the top of the screen and then clicking Animation and the Animation again. This should open up the Animation tab.
Now that you have opened the Animation tab, we can start animating.
To create an animation, you can either create your own animations or as I am going to do, use the animations provided in store assets. In the asset that I am using (Tiny RPG Forest), already provides me with animations that I can use.
Inside the TRF(Tiny RPG Forest) asset, you can see an Animations folder which contains 5 animations. This will be our end goal and what we will be working towards
Idle, Player Down, Left, Right and Up.
The first animation that we will be doing and is the most simplest is the Idle animation. Going back to the Animation tab you can hit create in the center and create a folder called Animations, inside of this folder we will add an animation called "Player_Idle".
Once doing this you should have an Animations folder and one Animation in it.
Inside the Animation tab, you can select the idle animation or drag and drop it in. To add the animation you can go to the idle folder inside of Artwork then sprites then hero and then idle. Drag and drop the hero-idle-front animation into the animation editor and that's all.
Repeat for the rest of the animations
Tips and Difficulties
For the animation section, you may encounter some problems or inconveniences. The first thing you might run into is that your animations are going too fast, to fix that you need to press the three dots and use the option show sample rate.
Now set the sample rate to 12
Another problem you might face is that there is no animation for the walking right. For this one, you can use any editor to flip the walking left animation and then import it into the assets.
A problem on top of the animation editing is that when you import the animations or pictures, they are most likely going to be blurry. To fix this, click on the animation in Unity and select the option in filter mode to point.
Using The Animator
Once you have hopefully finished creating all of your animations, we can move on to the animator.
If you don't know what the animator does, essentially it allows you to organize your animations into order.
For example, you could set an animation for death and one for living. The living animation would be your default animation as you are alive at the start, but with the help of some scripting, when your player health hits zero you can switch the animation to dead with the help of the animator.
The first step is to open up the Animator tab. You can do this by simply hitting windows on the top of the Unity editor and clicking animation, and then clicking on Animator to open it up.
Once you have opened it up, you will be greeted with the animations you have created such as Player_Idle, Player_Walk_Down, and so on. What you are going to want to do is delete all of the other animations except Player_Idle.
If your Idle animation isn't orange like mine, it may be because you haven't set it to the default animation. To do that all you have to do is right-click on it and use the option that says set layer default.
The next thing that we are going to do is under parameters, create a new parameter by clicking the plus button and setting it to float. This parameter will be called Horizontal.
This parameter will be our horizontal entry.
We will also be creating a new parameter called Certical. So as we did for the Horizontal parameter, hit the plus button, create a new float, and call it Vertical
Now that you have done that, we can go back to the Animator and create a new blend tree. What this does is it allows you to transform to different animations in our case based on the player's position(Horizontal and Vertical).
To create a blend tree, go into the animator, right-click on any surface besides the animations, and hit Create Blend Tree.
We will name this tree movement.
The next thing we need to do is define what a movement is so the animator knows what it looks like. To do that we can double-click on the movement blend tree to move 1 layer in. You will notice a Blend Tree at the center of the screen, click on it.
As you can see there is a lot to unpack here. The first thing you are going to want to do is change the blend type at the top of the screen to 2D Simple Directional
The second update we need to make is to change the parameters to first horizontal and then vertical
The next thing you are going to want to do is create 4 motions simply by hitting the plus button. Then drag each animation into place, eg down on the top, followed by up, and so on.
Finally, fill in the coordinates corresponding to the right animation. These coordinates tell the animator when to switch animations.
Now that we have finished inside the movement layer, we can move back up to the base layer and start hooking up all of the animations. First, we are going to add a new float called Speed.
Next, you are going to want to right-click on the player idle, hit make transition, and then click it on the Movement blend tree.
You can do the same for the other side. Now that you have done that we need to make some changes. Click on the first transition you made and it should open up.
The first thing you have to do is set the condition at the bottom. Select if the Speed is Greater than 0.01. What this does is it makes the transition from idle to moving if the player has a greater speed than 0.01.
Next, untick the Has Exit Time option and set the transition duration to 0.
This should be all for this transition and let's do the other one.
This one is just as simple. Do everything duplicated, except the condition. This time we want the condition to be if the Speed is Less than 0.01. This allows for the animation to go back to idle if the speed of the player is less than 0.01.
This is actually everything done for this section and we can now move on to scripting.
Scripting
The first step before we start scripting is to open up the player movement script. This is where we will contain the movement and animations.
First, we will define the animator by using public Animation
public Animator animator;
Then, inside our Update function, we can list the Horizontal and Vertical axes as well as the Speed.
animator.SetFloat("Horizontal", movement.x);
animator.SetFloat("Vertical", movement.y);
animator.SetFloat("Speed", movement.sqrMagnitude);
What this does is it hooks up the "Horizontal" axis defined by unity to the movement.x, which is the Blend Tree inside the animator we created.
Believe it or not, this is it.
If you want to have a glimpse of the player movement code, here it is if you need to catch up:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class PlayerMovement : MonoBehaviour
{
public float moveSpeed = 5f;
public Rigidbody2D rb;
public Animator animator;
Vector2 movement;
void Update()
{
movement.x = Input.GetAxisRaw("Horizontal");
movement.y = Input.GetAxisRaw("Vertical");
animator.SetFloat("Horizontal", movement.x);
animator.SetFloat("Vertical", movement.y);
animator.SetFloat("Speed", movement.sqrMagnitude);
}
void FixedUpdate()
{
rb.MovePosition(rb.position + movement * moveSpeed * Time.fixedDeltaTime);
}
}
Testing
Going back to Unity, before we press play, we need to drag and drop the animator into its slot simply by clicking on the player and dragging the animator already set inside of the player.
And there you have it. If you want to test it out, hit play and check out your new animations.
Conclusion
In conclusion, I hope this blog helped you with animations, and in the next update of the series, I will be creating a simple pixel art map to give the game a sense of character.