Introduction to Unity Animator

In small projects everyone needs to wear multiple hats. That’s why I’m usually coder, designer and animator in most of my games, and I’m not creating sound effects and music because I literally have no time to learn about it.

For that reason I’ve taken a look to some methods to include 2D animations in all the Unity projects I’m creating while I get used to the engine. For now I’ve tested Spine2D, 2D sprites and the animator that Unity provides as a built-in feature, and this article is an introduction to the last one.

 

 

Working with assets

For this one I’m using a good simple character pack created by Kenney. Here is the link: http://opengameart.org/content/modular-character-pack

Before animating a character this way, we need to split it in parts. That’s because this animation method works more or less how a puppeteer animate his puppets, so we need separated parts to simulate the articulations of the puppet.

To add assets to unity, create a new child folder into assets and call it sprites. Then, drag and drop every part of the character into the folder and select sprite as texture mode and set the pivot position for each part. This is so important, pivot will anchor the part when you transform it, and it’s easier to rotate an arm anchored by its shoulder than rotate it from his center and then change its position in every frame.

 

Building the character

Now, the character can be constructed only dropping all the assets in the scene, creating duplicates if necessary. To sort which part is over the others, switch to 3D and change the Z position.

 

 

When the character is complete, a good way to simplify the animation process is creating a hierarchy. For example, if you set the hand as a child of the arm, the hand will move along the arm. The sale with both feet, face, hair…

 

 

Moving time

Once the character is finished, open the animator view through Window-Animator menu.

Three important things before getting started:

• Never move anything if the record button is disabled. Doing this will change the character position, not the animation.
• Never move the entire character with the record button enabled. The animation works better moving each part, and moving the entire character will mess up everything.
• If the animation is a loop, the last and the first frame must be the same. Select your first keyframe, copy it using ctrl+c shortcut, and paste it at the end of the animation.

Adding a keyframe

The default view of the animator is the dope sheet. There is a timeline and a panel that holds every attribute being changed during the animation right under the record and play buttons. To add a keyframe, enable the record button, click on the timeline and transform a part of the character. A new keyframe will appear at the selected point of the timeline and a new attribute will be added to the panel. For example, if the left arm’s position was changed, a keyframe for the attribute left arm : position should be created in the left panel.

The add curve button works more or less the same. Click on it, select the part to animate and the attribute to change, and it will be created in the panel.

 

Curves

I usually use curves o tweak the animation once I’ve set all the keyframes, but at some point you can use them to create any keyframe or the entire animation. Clicking the button “Curves” the animator interface shows a line for each dimension of the animated attribute, and a point for each keyframe created before. The lines represent the evolution of each value, and moving the line will change the animation. For example, a straight horizontal line means no changes while a diagonal line represent an uniform change over time. It’s more or less like the linear motion classes at school some years ago!

Main functions of this view are:

• Double click in a line to add a new keyframe.
• Right click on a keyframe to edit the transition. Some options will change the right and the left side of the keyframe, while some of them will only change a side.

 

There is more than uniform transitions! In the keyframe edit menu, we can set it as flat, creating a soft transition; as broken, which means a fast change like a hit or a bounce, or use the free options for one side or both to create a curve. How it works is quite simple, but is hard to master. It’s all about keep trying.

 Conclusion

In my opinion,  Unity’s animator is a good way to create simple 2D animations, but for more complex transitions I prefer Spine2D since it’s based on skeletal animation using inverse kinematics, or in case of animations that change the shape or the way the character looks, I’d rather use a sprite for each frame and build a sprite sheet like we explained in one of our posts.

Hope you liked this introduction! For the next post we will have a glimpse over Spine2D.

See you!