In this Article by Claudio Scolastici, author of the book Unity 2D Game Development Cookbook. we will cover the following recipes:

• Creating an animation tree
• Dealing with transitions

(For more resources related to this topic, see here.)

Now that we have imported the necessary graphic assets for a prototype, we can approach its actual building in Unity, starting by making an animation set for our character.

Unity implements an easy-to-approach animation system, though quite powerful, called Mecanim. Mecanim” is a proprietary tool of Unity in which the animation clips belonging to a character are represented as boxes connected by directional arrows. Boxes represent states, which you can simply think of as idle, walk, run…you get the idea.

Arrows, on” the other hand, represent the transitions between the states, which are responsible for actually blending between one animation clip and the next. Thanks to transitions, we can make characters that pass smoothly, for example, from a walking animation into a running one.

The control of transitions is achieved” through parameters: variables belonging to different types that are stored in the character animator and are used to define and check the conditions that trigger an animation clip. The types available are common in programming and scripting languages: int, float, and bool. A distinctive type implemented in” Mecanim is the trigger, which is useful when you want a transition to be triggered as an all-or-nothing event. By the way, an animator is a built-in component of Unity, strictly connected with the Mecanim system, which is represented as a panel in the Unity interface. Inside this panel, the so-called animation tree of a character is actually built-up and the control parameters for the transitions are set and linked to the clips.

Time for an image to help you better understand what we are talking about! The following picture shows an example of an animator of a “standard game character:

As you can see, there are four states connected by transitions that configure the logic of the flow between one state and another. Inside these arrows, the parameters and their reference values to actually trigger the animations are stored.

With Mecanim, it’s quite easy to build the animation tree of a character and create the “logic that determines the conditions for the animations to be played. One example is to “use a float variable to blend between a walking and a running cycle, having the speed “of the character as the control parameter. Using a trigger or a boolean variable to add “a jumping animation to the character is another fairly common example. These are the subjects of our following two recipes, starting with trigger-based blending.

Creating the animation tree

In this recipe, we show you how to add animation clips to the animator component of a game object (our game character). This being done, we will be able to set the transitions between the clips and create the logic for the animations to be correctly played.

Getting ready

First of all, we need a set of “animation clips, imported in Unity and configured in Inspector.

Before we proceed, be sure you have these four animation clips imported into your Unity project as FBX files: Char@Idle, Char@Run, Char@Jump, and Char@Walk.

How to do it…

The first operation is to create a folder to store the Animator Controller.

1. From the project panel, select the Assets folder and create a new folder for the Animation Controller. Name this folder Animators.
2. In the Animators folder, create a new Animator Controller option by navigating to Create | Animator Controller, as shown in the following screenshot:
3. Name the “asset Character_Animator, or any other name you like.
4. Double-click on Character_Animator to open the Animator panel in Unity. “Refer to the following screenshot; you should have an empty grid with a single magenta box called Any State:
5. Access “the Models/Animations folder and select Char@Idle. Expand its hierarchy to access the actual animation clip named Idle; animation clips are represented by small play icons. Refer to the following screenshot for more clarity:
6. Now drag” the clip into the Animator window. The clip should turn into a box inside the panel (colored in orange to represent that). Being the first clip imported into the Animator window, it is assumed to be the default animation for the character. That’s exactly what we want!
7. Repeat this operation with the clip named Jump, taken from the Char@Jump FBX file. The following screenshot shows what should appear in the Animator window:

How it works…

By dragging” animation clips from the project panel into the Animator editor, Mecanim creates a logic state for each of them. As states, the clips are available to connect through transitions and the animation tree of the character can come to life.

With the Idle and Jump animations added to the Animator window, we can define the logic to control the conditions to switch between them.

In the following recipe, we “create the transition to blend between these two animation clips.

Dealing with transitions

In this recipe, we create and set up the “transition for the character to switch between the Idle and Jump animation clips. For this task, we also need a parameter, which we will call bJump, to trigger the jump animation through code.

Getting ready

We will build on the previous recipe. Have the Animator window open, and be ready to follow our instructions.

How to do it…

1. As you move to the Animator panel in Unity, you should see a orange box representing the Idle animation, from our previous recipe. If it is not, right-click on it, and from the menu, select Set As Default. You can refer to the following screenshot:
2. Right-click on the Idle clip and select Make Transition from the menu, as shown in the following screenshot:
3. Drag the arrow that “appears onto the Jump clip and click to create the transition. “It should appear in the Inspector window, to the right of the Animator window. “Check the following screenshot to see whether you did it right:
4. Now that we have got the “transition, we need a parameter to switch between Idle “and Jump. We use a boolean type for this, so we first need to create it. In the bottom-left corner of the Animator window, click on the small +, and from the “menu that appears, select Bool, as shown in the following screenshot:
5. Name the newly created parameter bJump (the “b” stands for the boolean type; “it’s a good habit to create meaningful variable names).
6. Click on the white arrow representing the transition to access its properties in Inspector. There, a visual representation of the transition between the two clips “is available.
7. By checking the “Conditions section in Inspector, you can see that the transition “is right now controlled by Exit Time, meaning that the Jump clip will be played only after the Idle clip has finished playing. The 0.97 value tells us that the transition is actually blending between the two clips for the last 3 percent of the idle animation. For your reference, you can adjust this value if you want to blend it a bit more or a “bit less. Please refer to the following screenshot:
8. As we want our bJump parameter to control the transition, we need to change Exit Time using the tJump parameter. We do that by clicking on the drop-down menu on Exit Time and selecting tJump from the menu, as shown in the following screenshot:
9. Note that “it is possible to add or remove conditions by acting on the small + “and – buttons in the interface if you need extra conditions to control one single transition. For now, we just want to be sure that the Atomic option is not flagged in the Inspector panel. The Atomic flag interrupts an animation, even if it has not finished playing yet. We don’t want that to happen; when the character jumps, “the animation must get to its end before playing any other clip.

The following screenshot highlights these options we just mentioned:

How it works…

We made our first “transition with Mecanim and used a boolean variable called bJump to control it. It is now possible to link bJump to an event, for example, pressing the spacebar “to trigger the Jump animation clip.

Summary

There was a time when building games was a cumbersome and almost exclusive activity, as you needed to program your own game engine, or pay a good amount of money to license one.

Thanks to Unity, creating video games today is still a cumbersome activity, though less exclusive and expensive!

With this article, we aim to provide you with a detailed guide to approach the development of an actual 2D game with Unity. As it is a complex process that requires several operations to be performed, we will do our best to support you at every step by providing all the relevant information to help you successfully make games with Unity.

Resources for Article:

---

Further resources on this subject:

• 2D Twin-stick Shooter [article]
• Components in Unity [article]
• Introducing the Building Blocks for Unity Scripts [article]

---