Animation

Now that we have our character moving around, let’s next make him look like he’s moving instead of merely floating (which is how it will currently appear). This is where sprite animation comes in.

First, we need to separate our character and ghost sprites into frames so that they’ll animate properly. Select the player sprite in the Project window, then click Sprite Editor in the Inspector. You should see the screenshot in Figure 29.

Figure 29: Sprite Editor Window

Use the Slice menu item to display the drop-down window and click Slice, as in Figure 30.

Figure 30: Sprite Editor Slice Window

The image should show the sprite now sliced into four separate frames (you should see boxes around each image).

Figure 31: Sliced Sprite

Close the Sprite Editor window and you should get a confirmation dialog that will apply the changes to the sprite. Click Apply, then select the ghost sprite in the Project window and perform the same steps.

Now that we have the frames for our animations, it’s time to create the animation for each sprite. We want to apply the animation to our existing prefab, so let’s drag the player prefab from its folder in the project into the Hierarchy window. If the frames for the player sprite in the Project window are not visible, click the icon on the right of the sprite in order to display them. Select the four frames of the player sprite (click the first frame and hold the Shift key while clicking the fourth frame) and drag them onto the player in the Hierarchy. You should get a Create New Animation file window. Create a new folder in the Assets folder called Animations and save the animation in the new folder. The Animator window should also open automatically. If it doesn’t, open it from the Window menu. You’ll see something like Figure 32.

Figure 32: New Animation in Animator Window

With only the one state in the Animator, the animation will start immediately. While that will work fine for the ghosts, we don’t want that for the player. We don’t want the player to have the walking animation playing when standing still. In order to solve that, right-click in an empty area of the window and select the Create State | Empty menu item. A new state will be added with no animation. Rename this state Idle by clicking it and changing the name in the Inspector (make sure to press Enter after changing the name to ensure it actually changes), then right-click it and select Set as Layer Default State. You’ll see the line move to the new Idle state from the Entry state. Rename the first animation Walking.

In order to change states, transitions need to be added between the Idle and Walking states. Transitions are used for indicating when to switch to a different animation. They have parameters that you set with code, and a change in the parameter will be detected automatically. The animation for that change becomes the current animation.

Right-click on the Idle animation and select the Make Transition menu item. Move the cursor to the Walking animation. As you do this, you’ll notice that a line is attached to the cursor from the Idle animation. Click on the Walking animation and you’ll have set a transition between the two. An arrow in the middle of the line shows which direction the transition will go. Right-click the Walking animation, then click on the Idle animation. You should now have transitions to and from both animations, as shown in Figure 33.

Figure 33: Walking and Idle Player Animations with Transitions

Now we need to set up the parameter for the transitions. Click the + to the left of the animation grid and select Bool, as in Figure 34.

Figure 34: Addition Animation Transition Condition

Name the parameter IsWalking. Click on the transition line from Idle to Walking and you’ll see the parameter in the Conditions part of the Inspector window. Set the drop-down item next to it to true. Click on the transition from Walking to Idle and set the IsWalking value to false, as in Figure 35.

Figure 35: Animator Parameter Condition Setting

In order to save the changes to the prefab, we need to drag the Player object from the Hierarchy back onto the prefab in the Project window. Anytime you want to make changes to a prefab, you’ll need to do this. Delete the Player object in the Hierarchy once you’ve saved the changes back to the prefab.

Now that we have everything set up in the Animator, we need only to add a few lines of code to change the value of the IsWalking parameter based on the input from the player. That’s done in the PlayerController class Update method. After the line that sets the vel variable, add the following from Code Listing 14.

Code Listing 14: Animation Transition Code

The CharacterAnimator object gets added to the members of the class in Code Listing 15.

Code Listing 15: CharacterAnimator Declaration Code

Select the player prefab and drag the Animator into the CharacterAnimator member of the script. The script will now update the Animator, which will trigger the animations when the player moves the character around the screen, and you should see the animation in the Game window while holding down the movement keys. The animation should stop when the character isn’t moving.

If you select the Player object in the Hierarchy while the game is running and the Animator window is open, you should see the Parameter being changed and the animations being triggered, as in Figure 36.

Figure 36: Animator Updates While Running Game

This takes care of the player animation. We need to do the same thing with the ghost. Fortunately, the ghost is a little easier—there’s no need for any conditions to the ghost animation and no need to have an Idle state. The ghost will be moving constantly.

Drag the ghost prefab back into the Hierarchy, select the frames of the ghost animation, and drag that onto the Ghost object. Save the animation, drag the Ghost object back onto the prefab, and you’re done. Every ghost that spawns will be animated.

With the addition of animation, the game is a step toward being more professional, but it still doesn’t include a feature that you might have noticed is missing—sound.