This tutorial will walk you through adding animation for the movement of your player avatar. You should already have added physical movement to the character - see Tutorial: Four Direction Player Movement or Tutorial: Platformer Player Movement for examples.

To start, you need an animation for your player walking. If you don't want to create your own sprite, you can use the one in the tutorials folder of the toolkit.

Setup

Ensure you have a GameObject in the scene for your player, with a sprite attached.

TODO: IMAGE

Next, you need two new windows / panels in Unity that are not visible by default. These are the Animation panel and the Animator panel.

Open the Animation panel by selecting Window > Animation > Animation. This panel is how you create and edit animations for your sprite. You will have a separate animation for each action. Dock the panel somewhere on your Unity UI.

TODO: IMAGE

Open the Animator panel by selecting Window > Animation > Animator. The Animator panel controls what animation is playing on your sprite at any given time, and how to change between those animations. The animation clips that you create in the Animation panel will show up as little boxes on the Animator panel. You can then connect them using transitions, which can be triggered by Actions

TODO: IMAGE

Create Idle Animation

First, we will create the default animation our player will use when not moving. This is called the "idle" animation. To do this, select your player in the scene. Now look at the Animation panel and click the button in the centre to create a new animation clip. You will be prompted to save your new clip somewhere - create a folder for it and save it with a sensible name, like "Player-Idle". You will now have a blank animation in your Animation panel.

TODO: IMAGE

We need to tell it what sprite to display for this animation. Select your player's standing pose and drag it into the Animation panel. You should now see an animation property (the horizontal row) for the player's Sprite Renderer Sprite field, and a single keyframe for the image. This means that when this animation plays, the player's sprite will be changed to the one your dragged in.

TODO: IMAGE

Your idle animation is now complete!

Create Moving Animation

The process for creating a moving animation is very similar to what we just did for idle. Select your player in the scene, and look at the Animation window. In the top left of the window is a drop down - this will contain all the animation clips you have made for this object. Right now, there is only one in there - your idle animation. Click the drop down and go tot he bottom and select "Create New Clip". Save it in the same folder as your last one, and call it something sensible like "Player-Moving". You will now have a blank animation in your Animation panel.

TODO: IMAGE

This time, instead of dragging a single image in, we will drag all the frames of our running animation in. Do this by selecting all of the frames at once, then dragging them in to the Animation window together. This will create a series of keyframes, one for each image.

TODO: IMAGE

You can test your animation by using the play button in the Animation panel (not the big one for the whole Unity editor!). Your animation is probably running way too fast to start with - alter then "Samples" number to change the FPS for the animation.

TODO: IMAGE

Connecting the Animations

If you run the game right now, your player will be locked in their idle animation. That's because, since we made it first, that is the default animation - and we have not yet told our animations how to transition from one to another. Let's do that now.

Select your player and look at the Animator window. You should see two squares representing the two animations we created. One (the idle animation) will be coloured orange and have an arrow pointing to it from the "Entry" square - this means it is the default animation.

TODO: IMAGE

Right click the idle animation and select "Create transition", then click on the moving animation. This creates a transition from the idle to the moving animation.

TODO: IMAGE

However, by default this will happen as soon as idle finishes. This isn't want we want - instead, we want it to happen based on a condition. In this case, the condition is that walk speed should be not 0.

To implement this, we must add walkSpeed as a parameter to our Animator. On the left, click the parameters tab, and add a new parameter by clicking the + sign. Choose a bool parameter. Name your new parameter "moving".

TODO: IMAGE

Now click on the arrow you made connecting the idle and walk animations. On the right side, uncheck "has exit time" and set the transition duration to 0. Add a condition at the bottom of the transition, select your new parameter "moving", and transition if "moving" is true.

TODO: IMAGE

You need to be able to get back from the walk animation into the idle one, so we need to add a transition in the other direction. Right click the moving animation and select "Create Transition", then click the idle animation. You should now see an arrow going the other direction. Click it, and uncheck "has exit time", set duration to 0, and add a condition so it transitions when "moving" is false.

TODO: IMAGE

AnimationAction

Our animator is set up, but it still won't play our moving animation as it is. We need to actually set that "moving" parameter to true when we move, and false when we stop. We do that using the AnimationAction component.

TO FINISH