
Animating sprites
Creating and using animations for sprites is a bit easier than other parts of the development stage. By using animations and tools to animate our game, we have the ability to breathe some life into it. Let's start by creating a running animation for our player. There are two ways of creating animations in Unity: automatic clip creation and manual clip creation.
Automatic clip creation
This is the recommended method for creating 2D animations. Here, Unity is able to create the entire animation for you with a single click.
If you navigate in the Project Panel to Platformer Pack | Player | p1_walk, you can find an animation sheet as a single file p1_walk.png
and a folder of a PNG image for each frame of the animation. We will use the latter. The reason for this is because the single sprite sheet will not work perfectly as it is not optimized for Unity.
In the Project Panel, create a new folder and rename it as Animations
. Then, select all the JPG images in Platformer Pack | Player | p1_walk | PNG and drop them into the Hierarchy Panel:

A new window will appear that will give us the possibility to save them as a new animation in a folder that we choose. Let's save the animation in our new folder, titled Animations
, as WalkAnim
:

After saving the animation, look in the Project Panel next to the animation file. Now, there is another asset with the name of one of the dropped sprites. This is an Animator Controller
and, as the name suggests, it is used to control the animation. Let's rename it to PlayerAnimator
so that we can distinguish it later on.
In the Hierarchy panel, a game object has been automatically created with the original name of our controller. If we select it, the Inspector should look like the following:

Note
You can always add an Animator component to a game object by clicking on Add Component | Miscellaneous | Animator.
As you can see, below the Sprite Renderer component there is an Animator component. This component will control the animation for the player and is usually accessed through a custom script to change the animations. We will do this later on. So, for now, delete this new object that we have created, since we will use our character from the previous chapter.
For now, drag and drop the new controller PlayerAnimator
on to our Player
object.
Manual clip creation
Now, we also need a jump animation for our character. However, since we only have one sprite for the player jumping, we will manually create the animation clip for it.
To achieve this, select the Player
object in the Hierarchy panel and open the Animation window from Window | Animation. The Animation window will appear, as shown in the following image:

As you can see, our animation WalkAnim
is already selected. To create a new animation clip, click on where you see the text WalkAnim
. As a result, a drop-down menu appears and here you can select Create New Clip. Save the new animation in the Animations
folder as JumpAnim
.
On the right, you can find the animation timeline. Select from the Project Panel the folder Platformer Pack/Player
. Drag and drop the sprite p1_jump
on the timeline. You can see that the timeline for the animation has changed. In fact, now it contains the jumping animation, even if it is made out of only one sprite. Finally, save what we have done so far.
The Animation window's features are best used to make fine tunes for the animation or even merging two or more animations into one.
Now the Animations
folder should look like this in the Project panel:

By selecting the WalkAnim
file, you will be able to see the Preview panel, which is collocated at the bottom of the Inspector when an object that may contain animation is selected. To test the animation, drag the Player
object and drop it in the Preview panel and hit play:

In the Preview panel, you can check out your animations without having to test them directly from code. In addition, you can easily select the desired animation and then drag the animation into a game object with the corresponding Animator Controller
and drop it into the Preview panel.