Andrew Douglas

Byte Sized Tutorials

Unity Animation Basics

Want to spice up your Unity games with 2D or 3D animations? Follow this tutorial to add your own animations to your Unity projects!

We will showcase a few aspects of Unity’s Animator, including the different components that go into animation, as well as how to use various tools provided for you by Unity. By the end of this article, you will know how to add animation to game objects, create animations, and use both State Machines and Blend Trees to control animations.

Let’s Get to Animating!

Taking a Look at Unity’s Animator

Adding animation to a game object comes with a few different components. First, there is the Animator component, along with the Animator Controller asset. These go on the game object and actually allow it to perform animations. There is also the Animator Window, which is where you can control when animations will be played.

Additionally, there is the Animation Window, which is where you can configure Animation assets. Each Animation asset isa unique animation a game object can perform, such as an idle animation or an attack animation.

Animation assets are shown in the Assets folder with these little triangles, and are usually created in the current directory you are working in.

Now that we are familiar with the different parts of the animator, let’s start adding some animation!

Adding Animation to an Object

The easiest way to add animation to a Unity entity is to click on the game object, go to the Animation Panel, and click “Create”. This will automatically set up an Animator Component on your game object, connected to its own Animator Controller Asset. You can also choose the folder the new Animation asset will go in.

After creating and naming your new animation, you will see this timeline. You can add all sorts of behavior here, such as movement, sprite changes, Unity Events, and even controller children of the game object.

One easy way to begin animating is with keyframe recording mode. To begin, click the small red dot in the top left. Now, any changes you make to the game object will be recorded at the current keyframe (indicated by the slider on the timeline). Additionally, you can right click on a component in the inspector (such as sprite, position, rotation, or other) and select “add key” to create a keyframe at the selected timing. Play around with keyframes, and try animating your object!

Additionally, at the top right of the timeline, you can click the three dots to change some animation settings, like seeing seconds vs. frames, or the speed of your animation (under sample rate).

Make some animations for your game object, and next we will use a State Machine to connect the animations together.

Now that we can make animations, how do we play them in game? With State Machines!

What is a State Machine? How do we use one?

State Machines are graphs of behaviors, or states, that an entity can be in. Each state is represented by a box or circle, and the arrows that connect them are transitions. As seen in the example above, any entity or player can be in a wide variety of states, such as an idle state, a falling state, or a running state. Entities may stay in one state for a while, or they may transition often between states.

In Unity, we use state machines to represent our animations, and to help entities smoothly transition between different animations, without worrying too much about the underlying code. In this state machine, each state is an animation, and each transition can be controlled by parameters. Let’s take a closer look at Unity’s animator!

Unity Animator Close-Up

As seen above, the Unity animator shows a grid for your state machine, with some pre-made “states” and space to make your own. There are three important “states” that you will see first:

• Entry: your entity will not be in this state for long, and will immediately transition to whatever the Entry state is pointing to after being created.
• Any State: a special node, to cut down on complications and redundant transitions- this state is used if you want a state to be triggered (or not) no matter where the entity is currently, from any previous state
• Exit: a special node that must be transitioned to, not from. This ends the current state, and resets it to the Entry node, effectively restarting the state machine.

To add a new state, you can right-click and Create State. If you click the new state, you can rename it, and add a pre-made animation under “Motion”. Additionally, you can drag and drop animations from the Assets folder into the window, and anytime you create a new animation (with the Animation Window), it will automatically be added to the Animator Window.

How do we transition between states?

In Unity, you can right click on an animation state and select “Make Transition”, then click the arrow on another state. This will create a simple transition, so when the first animation is finished playing it will transition to the next. If “Has Exit Time” is selected, the entire animation will play before transitioning, which can be important to toggle on or off if animations feel choppy or are being skipped. What more can we do with this? Let us implement transition conditions.

At the top left of the Animator window, you can find the Parameters tab. These are variables that can be used by the animator to control transitions, and can be directly changed by scripts. There are a few types: Float, Int, Bool, and Trigger. We will primarily use Float and Trigger.

Let’s say we want a character to transition from a moving animation to an attacking animation when a certain button is pressed. How can we accomplish this? First, create a new trigger parameter called “Attack”. Then, create a transition from the moving animation to the attacking animation, and under “Conditions”, add the “Attack” trigger. Now, when the animator hears the “Attack” trigger, it will transition states. But how do we set this “Attack” trigger? Let’s look at our player movement code.

In our player script, we can use

animator.SetTrigger("Attack"); 

in our attack function, in addition to any other logic that happens on attack. The SetTrigger method takes a string as an argument, and will set the animator trigger whose name matches the string. But how do we connect our animator to our script? We should use

Animator animator; //outside of the Start loop. 

void Start()
{
	//other code
	animator = GetComponent<Animator>();
}

Here, we use GetComponent<Animator> to find the Animator component on our game object. Make sure that both the Animator component and the script are connected to the same game object here. Now, when we call our attack function (connected to player input) our animation will update too!

Now that we can use states and transitions, we can create almost anything we want. However, it can be tedious to have states for every animation, and create complicated transition maps between all of them, or between any state and every animation. How can we speed this process up?

This can get pretty complicated pretty quickly- let’s look at an alternative, Blend Trees!

What is a Blend Tree? When should we use them?

Let’s say we have four movement animations: walking up, walking down, walking left, and walking right. How many states and transitions would we need with a state machine?

Well, given we have four states that must transition to each other state, we need 4 states and 12 transitions! This is too much- what a mess!!! However, we can simplify our design using a blend tree, which will handle all the transitions for us. Let’s take a look.

You can create a blend tree just like you create a state, but selecting “From New Blend Tree”. When you do, you will see a new node labelled “Blend Tree”. But what happened to our other animations? They are still here, just on a different layer. You can switch between them, as shown below, or by clicking on the Blend Tree node.

Now back to our blend tree. Let’s create two float parameters, xVelocity and yVelocity. Then, in our movement script, we should add:

void Update()
{
    animator.SetFloat("xVelocity", rb.linearVelocity.x);
    animator.SetFloat("yVelocity", rb.linearVelocity.y);
}

Instead of SetTrigger, we should use SetFloat, which takes a string and a float value. We put this in the Update loop, so every animation frame the animator parameter will be updated to the current float value of the x and y velocity. Now, lets look at our blend tree.

You can add animation assets under “Motion”. Let’s add our four movement animations. Under “Blend Type”, select “2D Simple Directional”. Make sure the parameters are “xVelocity” and “yVelocity”. Now, for each of the four animation states, set the positions of X and Y to match above. X is just the first parameter and Y is the second parameter, and a “1” means the value is positive, while the “-1” means the value is negative. This makes sense- when our X velocity is negative, we are walking left, and when our X velocity is positive, we are walking right, and the same is true for Y velocity and down/up. You can play around with the red dot to see which animations plays when.

Now that we have our blend tree, how to we get it to apply? This is treated just like a state, and can be transitioned to and from just like any other. Let’s go back to our Base Layer. Create a Bool parameter called “moving”. Then, in your movement script, add a conditional statement that checks the magnitude of the velocity:

void Update()
{
    animator.SetFloat("xVelocity", rb.linearVelocity.x);
    animator.SetFloat("yVelocity", rb.linearVelocity.y);
    
    if (rb.linearVelocity.magnitude < 0.1f)
    {
        anim.SetBool("moving", false);
    }
    else
    {
        anim.SetBool("moving", true);
    }
}

Now, you can create a simple transition between an idle animation and your movement blend tree, based on this parameter. When the character is moving (or, their velocity is greater than a small value), the appropriate directional animation will play. If they are not moving, their idle animation will play.

Now we have created 4-directional movement animations, using a blend tree! You can use blend trees for many other types of animations, and they can be super useful to save time when creating state machines. Play around with them, and see what you can do!

That’s it for this tutorial!

Thank you for reading to the end, hopefully you found this useful. Unity’s animator can be a powerful tool, and can be used to control much more than just visuals. Enjoy giving your games life, and spicing them up with flashy animations!

Also feel free to check out more of ACM Studio’s tutorials, and stay tuned for more in the future.

Tutorial written by Andrew Douglas, with original images. Other GIFs found through GIPHY.