Unity 4.3 2D Tutorial: Animation Controllers

Learn how to use animation controllers to move between a state machine of animations in this Unity 4.3 2D tutorial! By Chris LaPollo.

Leave a rating/review
Save for later
Share

Welcome back to our Unity 4.3 2D Tutorial series!

In the first part of the series, you started making a fun game called Zombie Conga, learning the basics of Unity 4.3’s built-in 2D support along the way.

In the second part of the series, you learned how to animate the zombie and the cat using Unity’s powerful built-in animation system.

In this third part of the series, you’ll get more practice creating Animation Clips, and you’ll learn how to control the playback of and transition between those clips.

This tutorial picks up where the previous part ended. If you don’t already have the project from that tutorial, download it here.

Just like you did in Part 2, unzip the file and open your scene by double-clicking ZombieConga/Assets/Scenes/CongaScene.unity.

It’s time to make that cat dance!

Getting Started

So far you’ve only been working with Animation Clips, such as ZombieWalk and CatSpawn. You learned in Part 1 that Unity uses an Animator component attached to your GameObjects in order to play these clips, but how does the Animator know which clip to play?

To find out, select cat in the Hierarchy and look at its Animator component in the Inspector. The Controller field is set to an object named cat, as shown below:

cat_controller

This object is an Animator Controller that Unity created for you when you made the cat’s first Animation Clip, and it’s what the Animator uses to decide which animation to play.

Note: The Animator contains a few other properties that you can edit in the Inspector, but you won’t be dealing with any of those in this tutorial. To learn more, see Unity’s Animator documentation.

As you can see in the following image, the Animations folder in the Project browser contains the controller named cat, as well as a controller named zombie, which Unity created for the zombie GameObject:

controllers_in_project

Note: Although Unity created these Animator Controllers automatically, you can create them manually by choosing Assets\Create\AnimatorController from Unity’s menu.

Open the Animator view by choosing Window\Animator. Don’t let the similar names fool you: this view is different from the Animation view you’ve been using.

Select cat in the Hierarchy to view its Animator Controller in the Animator view, as shown below:

animator_view

For now, ignore the areas named Layers and Parameters in the upper and lower left corners, respectively. Instead, take a look at the various rectangles filling most of the view.

animator_view_states

Note: You can drag these rectangles to arrange them any way you’d like, so don’t fret if your screen doesn’t look exactly like what you see in these screenshots.

What you’re looking at are the states of a state machine that determines which Animation Clip should run on the cat.

If you’ve never heard of a state machine, think of it as a set of possible modes or conditions, called states. At any given time, the machine is in one of these known states, and it includes rules to determine when to transition between its states.

Note: Many state machines are finite state machines, meaning they can be in only one state at a time. Technically, the state machines defined by an Animator Controller are not finite, because more than one state can be active as the controller transitions between states. You’ll learn more about transitions shortly.

These rectangles each represent an Animation Clip, except for the teal one named Any State, which you’ll read about later.

The orange rectangle represents the default state, i.e. the state that runs when the Animator Controller starts, as shown below:

animator_view_states_types

Unity sets as the default state the first Animation Clip you associate with that Animation Controller. Because you created the cat’s clips in order, Unity correctly set CatSpawn as the default animation. However, if you ever want to assign a different default state, simply right-click the new state in the Animator view and choose Set As Default from the popup menu that appears.

The following image shows how you would manually set CatSpawn as the default state:

set_default_state

With the Animator view still visible, play your scene. Notice that a blue progress bar appears at the bottom of the CatSpawn state. This bar shows you the cat’s exact position within the state machine on any given frame.

As you can see, the cat is continuously running through the CatSpawn animation without ever moving on to the next state.

catspawn_state_loop

Note: If you don’t see this blue bar, make sure that you still have the cat selected in the Hierarchy view.

You need to provide the Animator Controller with rules for moving between states, so this is the perfect time to segue into a talk about transitions!

Transitions

A state machine isn’t very useful if it can’t ever change states. Here you’ll set up your Animator Controller to smoothly transition your cat from its spawn animation into the animation defined by CatWiggle.

Inside the Animator window, right click on CatSpawn and choose Make Transition. Now as you move your mouse cursor within the Animator view, it remains connected to the CatSpawn state by a line with an arrow in its middle. Click CatWiggle to connect these two states with a transition, as demonstrated below:

create_transition

Play your scene and you’ll see the cat pop in and start wiggling. How easy was that?

spawn_to_wiggle_in_game

That was certainly quick to set up, and you might be happy with the results. However, sometimes you’ll want to tweak a state transition. For example, in this case, there is actually something a bit strange and unintended happening, so it’s a good time to learn about editing transitions.

Editing Transitions

With only one transition defined, the easiest way to edit it is to click directly on the transition line within the Animator view, shown in the following image:

animator_transition_arrow

This displays the transition’s properties in the Inspector, as shown below:

transition_in_inspector

When you have multiple transitions, selecting them in the Animator view isn’t always easy. Instead, you can view a specific transition’s properties by selecting the state in the Animator view that starts the transition – in this case, CatSpawn. In the Inspector, click on the appropriate row in the Transitions list to reveal details about that transition, as shown below:

transitions_list

Note: You can define any number of transitions, either between different states or between the same two states. That’s because each transition can be tied to different conditions, which you’ll learn about shortly.

In the Inspector, Unity provides you with a visual representation of how it intends to move between the two animation clips. The following image highlights the most important elements of the transition editor:

transition_editor_annotated

  1. Start and End markers: These icons specify where the transition begins and ends. They look like >| and |<, respectively.
  2. A blue highlighted area clearly showing the areas of the clips involved during the transition.
  3. A scrubber that shows your current position when previewing transitions inside the Preview pane at the bottom of the Inspector (not shown).
  4. Bars showing the clips involved in the transition. If one of the clips loops, it will appear multiple times if necessary to span the transition’s duration. The blue highlighted area of the bars shows what part of and to what extent each of the two clips will affect the final animation at any point in time.
  5. I’m not clear as to what this actually shows. It appears to be a graph displaying how the clips influence the resulting curve value, but I’m not sure. In any case, I’ve always ignored it without any problems.

As you can see in the previous image, Unity claims it will start the transition between the two clips as soon as CatSpawn starts playing. For the duration of CatSpawn‘s animation, Unity gradually blends the amount by which each clip affects the resulting animation, starting at 100% CatSpawn and 0% CatWiggle, and moving to 100% CatWiggle and 0% CatSpawn.

Unfortunately, it seems that Unity actually triggers this transition after CatSpawn has played through one full time, and then it starts the transition at the beginning of the second run of CatSpawn. You can see it more clearly in this frame-by-frame walk through of the transition:

spawn_to_wiggle_slow

It seems that starting the transition at the zero percent mark of the first clip causes a problem. I don’t know if this is intended behavior or a bug in Unity, but it’s a good chance to try the transition editor.

With the transition selected, look at the Conditions list in the Inspector, shown below (you might have to scroll down a bit to see it):

exit_time_condition_1

This list contains the conditions that trigger this transition. By default, the only condition available is named Exit Time, which is considered true after a specified percentage of the first animation has played.

Note: You won’t do it in this tutorial, but you can use the + button at the bottom of the Conditions list to add more conditions. When multiple conditions are present, Unity evaluates them with a Boolean AND operation. That is, the transition will not start until all the conditions are met.

Exit Time’s value is currently 0.00, meaning it’s set to the start of the clip. You can adjust this value directly in the field next to Exit Time or you can move the Start Marker (>|) described earlier, but it’s easier to be accurate using the field directly.

Change the value for Exit Time to 0.01, as shown in the following image. Exit Time’s value is based on a zero to one scale, so 0.01 means to start the transition after playing just one percent of CatSpawn.

exit_time_condition_2

Note: You can assign an Exit Time value that is larger than 1.0 and Unity will still handle it correctly. There are times when you’ll want to do this, for example, if you want to slowly transition to a new clip over the course of several cycles of a looping animation.

Play your scene again and the cat animates into view, transitioning smoothly into its wiggle animation.

spawn_to_wiggle_fixed

Take a look at the transition in slow motion to see the difference more clearly:

spawn_to_wiggle_fixed_slow

With all this jumping around the cat’s doing, the zombie is sure to notice it! Of course, getting attention from zombies in real life usually leads to zombification, and in this game it’s no different. When the zombie touches them, the cats will turn into demon zombie conga cats. To indicate their undeath, you’ll turn them green.

Contributors

Over 300 content creators. Join our team.