Animating Sprites in Unity

Animations have always been an integral part of game development. They bring a sense of liveliness or relatability to games. There are various ways to animate game objects in unity. Let’s look at one such method which deals with animating with the help of sprites.

What are Sprites?

Think of Sprites as a set of 2D images that when overlaid together form an animation in a scene.

How to Use Sprites to animate in Unity?

In order to animate in Unity we are first required to open an Animation window which can then be used to create our required animation.

Select the game object you wish to animate. Then select the Window option from the tool bar. This should bring a drop down list which will contain an Animation option which further contains an Animation option, selecting them will bring a pop-up Animation window which you can then dock at your desired position.

With that done, lets create an animation,

We can now drag all our sprites related to our Animation into our Dopsheet.

Here, we observe that once the Sprites have been added into the dope sheet, we are able to extend or shorten the time frame which impacts the duration of the animation.

Now lets add a few more animations to the player,

Similarly, create an animation for an idle state and add its respective sprites. With that done, we can now move onto using the animation controller.

The Project panel contains our Animator.

With this lets use our Idle, TurnLeft and TurnRight animations to animate our character.

Here, each animation can be considered as an individual state, where given certain conditions we can transition between those states. Think of it as heating liquid at boiling point transitions it into a gaseous state, similarly freezing the liquid solidifies it. The same way we can transition from our Idle state to TurnLeft if we are pressing the left key(a) or transition to TurnRight state if we are holding down on the right key (d)on the keyboard. This is done in three steps,

Step-1: Make transitions from the idle state to the respective states and vice versa.

Step-2 : Create a variable through which we can decide when to transition between states.

Step-3 : Set conditions using the Variable created.

Similarly do the same for the other states.

So basically,
Idle State → TrunLeft = when Direction is less than 0
Idle State → TrunRight = when Direction is greater than 0
TurnLeft → Idle State = when Direction is less than 1 and greater than -1
TurnRight → Idle State = when Direction is less than 1 and greater than -1
TurnLeft → TurnRight = when Direction is greater than -1 and greater than 0
TurnRight → TrunLeft = when Direction is less than 1 and less than 0

Step-4 : We now need a way to influence this Animator Direction variable through script.

_animator variable will store our Animation component.

With this we can now use _animator to influence the Direction, which will contain the direction we’re moving(since we’re using GetAxisRaw to fetch user input which returns -1, 0, 1 depending on the direction we’re moving).

_horizontalInput stores our horizontal movement.

By default all our animations are set to loop over again and again, so lets toggle it OFF as we want the animation to run once only when called.

Lastly, if you want your animations to play for a certain amount of time after transition, you can toggle Has Exit Time ON. In this case I don’t want any exit time I want the transition to be instantaneous.

This gives us the following result,

We can also add an animation directly to a game object as shown below and it’ll continue to loop, result is as follows,

Thanks for reading. More to come!!!