Unity 5.x 2D Game Development Blueprints
上QQ阅读APP看书,第一时间看更新

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.