Using Unity3D Animator with Sprite Frame-by-Frame animation


Hey guys 😀

First let me introduce you to this section! In “Development Posts” we will try to maintain a “DevLog” from our projects. This might include technical posts, as this one, and maybe ones discussing ideas, techniques etc.

Today I want to talk about using Unity’s Animator (part of Mecanim) for Sprite frame-by-frame animations, a problem we encountered while working on it and how it is easy to solve.

If you are using Unity3D for a 2D game and using its built-in animation system, keep reading 🙂

As you might know, Unity3D is, obviously, a 3D game engine, and its 2D functions, introduced in version 4.3, are built on top of 3D ones. This have some advantages and disadvantages as well, and the Animation process is no exception.

Since Mecanim’s introduction, Unity gained a great animation toolset for 3D bones animation, by allowing different animations to mix, animations layers and more. The basic workflow is: you create an Animation for an asset, Unity will automatically create an Animator Controller for it and there each Animation will be a State Machine, then you create transitions between these states with the desired conditions (float, bool, trigger and int). There is also a Blend Tree feature, where Unity allow for blending multiple animations based on a float condition.

This works well for 3D bone animations, but for 2D frame-by-frame animations, if you do not pay attention, you can end with something like this:

Animator done wrong!

Animator done wrongly!

Please do not look too much to this web or you might get crazy!

As you can see, in my first naive approach, I simply created one State for each Animation and then managed to somehow create the necessary transitions, often missing some transitions or creating unnecessary ones.

So, how to make this manageable? The answer is simple: using Sub-State Machines and Blend Trees!
For 2D frame-by-frame animations? Yes!

At first I thought these features wouldn’t work well for frame-by-frame animations, but I was obviously wrong.

First, Sub-State Machines. The name might give the wrong impression, but they really are folders, to help you organize and separate state machines in groups and sub-groups. Here is my Jump group:

Jump Animator Sub-State

Jump Animator Sub-State


It is really easy to use it. Just right-click, create a Sub-State Machine, rename it, double-click it to enter and now create the states for this group. When you need to transition from a state within this group to a state outside it, just link the transition to the (Up) state, then Unity will give you a drop-down to choose where this transition is going to. If you have others sub-states, Unity will gracefully separates them in sub-menus, as you can see:

Sub-State Transition to Up layer

Sub-State Transition to Up layer

Just by using Sub-State Machines can help a lot, but they will only separate your states into groups. There is one more feature that can really reduce states, that is the Blend Tree:

Jump Aim Blend Tree

Jump Aim Blend Tree

A Blend Tree automatically transitions between states for you based on a float parameter. You insert the “Motions” (Animations) and their Threshold, or at what value of the parameter this Animation will be active. By having more than one animation, you can adjust the threshold values and Unity will automatically “blend” these motions. In Bone animations, the weights will be smoothly altered, but in this case, the chosen animation will change driven by the parameter:

Blend Tree Parameters

Blend Tree Parameters

Blend Trees can save a lot of space in your animator, as well as being less error prone. In the animator screen they will appear as a simple State, as you can see in the jump animator image (both jump aim and jump shoot are blend trees with two states each).

Here I am using Blend Trees to transition between “Diagonal” and “Upward” animations, driven by an angle value, but Blend Trees can go much further and can even be driven by two parameters (see Blend Type field).

Here is the almost-final version of the monster that was the animator:

A more manageable Animator!

A more manageable Animator!

It is still not perfect, but it is much easier to see what is happening 😀

If you had similar problems, or what to share any advice, please comment!

Until next time 😀

The following two tabs change content below.


Programmer at Mister Studios

Latest posts by Chaoseiro (see all)

Leave a Reply