Fundamentals of sprite animation

In this section, we will discuss, in general, the features included in Unity that can be used to create a sprite sheet animation. There are three main features that will be used to create a fully animated sprite character: Animation clips, Animation Controllers, and Animator components.

Animation clips

Animation clips are the heart of the animation system within Unity. All animations are saved with the .anim file extension. The animation Dope Sheet system (as shown in the following screenshot) is very advanced; in fact, it tracks almost every change in the Inspector for sprites, allowing you to animate just about everything. You can even control which sprite from a sprite sheet is used for each frame of the animation:

The preceding screenshot shows a three-frame sprite animation and a modified x position modifier for the middle image, giving a hopping effect to the sprite as it runs.

Tip

Sprites don't have to be picked from the same sprite sheet to be animated. They can come from individual textures or be picked from any sprite sheet you have imported.

Note that you are not limited to the whole character animation with the animation system; you can also construct characters from several sprites and animate them individually, as shown in Unity's own 2D platform sample, which is available at the Unity Asset Store (http://bit.ly/UnityPlatformer2D):

Character constructed from multiple Sprites

In the preceding screenshot, you can see all the parts of the hero in the Hierarchy, such as the body, mustache, feet, and bazooka as separate sprites; then, in the animation Dope Sheet, the Run animation alters the position of each of these sprites to emulate a fast walking effect. This feature can be used in a powerful way once you get your head around what is possible.

Animation Dope Sheet

The animation Dope Sheet can be used to make simple or complex animations, as shown in the following screenshot:

Animation Dope Sheet

Navigating around the Animation editor (as shown in the preceding screenshot), we have the following sections:

The time/recording controls (1)

The time controls let you play or step through your recorded animation to see how it flows. This is especially useful when combined with the active play in the Scene and Game views.

The record button determines whether the changes in the Scene or Inspector panes will affect the Animation properties and will add new ones if a property has not been touched yet.

There are also the buttons to add new KeyFrames (specific points on the timeline at the currently selected time) or Animation Events (script launching points based on time).

Animation drop-down selection (2)

This is a simple list of all the clips in the current animation set/controller. It also has the facility to add more clips directly from this drop-down menu.

The sample rate (frames per second) (3)

The sample rate sets the number of frames per second available in the timeline. It controls the number of key frame points possible between time intervals. It defaults to 60fps.

Tip

Be sure to be aware of what frame rate your sprite sheets where made in. Many 2D animation systems run at 24fps, and you will likely need to adjust this for your animation to perform as expected.

Animation properties (4)

Animation properties list all the different Inspector properties that are being controlled by this animation clip. If a property is touched in the editor while the record mode is active, it will create a new property in the animator or alter the existing property in real time.

While in the record mode, any change in the editor will be captured. This includes any child GameObject properties that you change. This becomes very useful if your animated objects comprise multiple sprites in the child GameObjects.

Timeline (5)

The timeline window shows all the key frames being animated over the lifetime of the animation. Setting the sample rate higher and lower will control how many key points/frames will be available between time units.

You can also use the following keyboard shortcuts to navigate between the frames on the timeline:

• Press comma (,) to go to the previous frame
• Press period (.) to go to the next frame
• Press Alt + Comma (,) to go to the previous key frame
• Press Alt + Period (.) to go to the next key frame

Curve view (6)

The timeline view has an alternate view mode to add finer control and curves between the key frame animations, as shown in the following screenshot:

Curve view in Animation window

Editing the curves takes a little finesse but makes for a better looking transition than the default Boolean (on/off) effect.

You can further control the curves by setting the inbound and outbound tangents of the curve, setting either a smooth (linear), sharp (constant), or free-form curve. Simply play with these settings until you have the kind of curve you want.

We'll cover curves in Chapter 9, Getting Ready to Fight, where we'll learn a few of the slightly more complex curves and animations.

The Animation Controllers

Animation Controllers are simply state machines, systems that store states and the transitions between them, that are used to control when an animation should be played and what conditions control the transition between each state. Animation Controllers are saved with the file extension .controller. An animation cannot play without a controller and a controller can contain many animations.

Lets look at the following screenshot:

Animation state machine

In the preceding screenshot, the gray rectangles represent animation states and the orange rectangle represents the default animation state. The states do not have to be animations, but instead can be a game state. The arrows represent transitions between animation states. Entry and Exit nodes were added to the State Machine Transitions in Unity 5 and they tell the state machine what it should do when it starts and when it should exit. You can have various layers of animation. We will discuss the use of this system to handle game states, rather than just animations, and describe state machines in further detail in Chapter 8, Encountering Enemies and Running Away.

A parameter is essentially a variable that we will be able to access later from our character controller script. Within our script, we can tell our parameters to take on values, thus making the animations transition when we want them to.

The Animator component

To use an animation prepared in a controller, you need to apply it to a GameObject in the scene. This is done through the Animator component, as shown in the following screenshot:

Animator component

The only property we actually care about in 2D is the Controller property. In it, you specify which controller is to be attached to the GameObject.

Note

Other properties only apply to the 3D humanoid models, so we can ignore them for 2D.