Animation Transitions
Creating Transitions in the Animator Controller using Triggers
If you’re completely new to animation, head over to the Sprite Sheet Setup and Sprite Animation tutorials to get started. Here, we will learn a simple and direct way to transition between our animations. Let’s begin!
Just like in our Sprite Animation tutorial, you created the first animation for your game object so it has a default animation state that will play when the game starts. But now you want to add more animations for this object. We will need to create a new animation clip. Select your game object, click the drop-down menu in the animation tab that displays your first animation, and select “Create New Clip…”. This will automatically add the new animation state in the animator controller for the game object.
Create the new animation clip the same way as in our previous tutorial.
On a side note, if you click on the animation clip in the asset folder, you can choose if you want it to loop or not by enabling or disabling the loop time.
Open the animator tab. You should see the new animation you just created as an inactive state with no transition arrows connected to it. Don’t forget you can organize these states however you want by dragging them around in the animator tab.
Let’s create a trigger for each animation state that we have. On the top left of the animator tab, in Parameters, click the '+' drop-down button and select Trigger.
In this example we have an "Idle" state and an "Alert" state, so we will name the triggers accordingly. You can choose any name you want for your triggers. It's better to have it self-explanatory since we will need the names in our script later.
Now we begin connecting the animations we created. Right-click the default animation and select “Make Transition”.
This will create an arrow that starts from the default animation state. Click on your second animation to attach the endpoint to it.
By default, the transition will automatically switch the animation to the second one because the ‘Has Exit Time’ variable is enabled. You can play around with the values to see how you can automatically transition the animation using different timings in the settings. Let’s take a step further to get more control over when we want to make the transition. Go ahead and disable the exit time.
We now have a path from the default animation to your new one. But notice that it’s a one-direction transition, so we can only move according to where the arrow points. We’ll create another one to allow a full loop between the animations, but for now, let’s learn how to utilize a single transition. Go ahead and create a script and attach it to your game object.
In the script, we need to access the animator of the object. You can do so like this.
Animator player_animator;
Void Start()
{
Player_animator = gameObject.GetComponent<Animator>();
}
Then the logic for the transition is that when the ‘A’ key is pressed, we need to turn off the default animation trigger, in this example, “Idle”, and turn on the second trigger “Alert”. We can achieve this using this code.
Void Update()
{
f(Input.GetKeyDown(KeyCode.A))
{
player_animator.ResetTrigger("Idle");
player_animator.SetTrigger("Alert");
}
}
So here’s what our script looks like for this example.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Player : MonoBehaviour
{
Animator player_animator;
void Start()
{
player_animator = gameObject.GetComponent<Animator>();
}
void Update()
{
if(Input.GetKeyDown(KeyCode.A))
{
player_animator.ResetTrigger("Idle");
player_animator.SetTrigger("Alert");
}
}
}
The first transition is done! Run the game and try it out! Hit play on the editor and press ‘A’ to see the animation change.
Finally, we can complete the pathing of the animation states by adding another transition. This time start from the second animation state to the first default animation. Use the same technique above to achieve this.
Once again this will work by default as the exit time is enabled. You can test it out by running the game and notice how after you change the animation with the ‘A’ key, it will play for a short time and change back to the default animation.
If you want to transition the animation through your script, you can just reverse the code by turning off the second trigger, in this example “Alert”, and turn on the first trigger “Idle”.
player_animator.ResetTrigger(“Alert”);
player_animator.SetTrigger(“Idle”);
There are different ways to change the animation through scripts like the above example. Instead of a key press, you can try using a timer or collision detection. It’s all a matter of using “ResetTrigger” on the current animation and using “SetTrigger” on the animation you want to change to. And that’s it! With this knowledge, you can apply this animation transition however you want in your game projects.
Level up your game development by finding more stuff to learn in our growing list of pixel-sized tutorials.