2D Mobile Game: Player Run Animation

Intro

In this article, we are going to cover how to setup the run animation and add it to the animation tree so it will transition from the Idle to Run animation.

Animation Setup

When getting the animation clips ready for important you want to check how they are being sliced. Currently, the Run sprite sheet is automatically being slice and this is causing different size sprite images. This will result in animation shifting as it runs through all these images at different sizes, instead of uniformed sizes.

We want each of the sprite run images to be the same size, so we will slice them by cell size. This will make the images sizes be all of the same, which will create a smooth animation.

Now that the run sprite sheet is sliced properly, we are ready to create a new animation clip. Lets select the Player Sprite we want to add the animation to inn the hierarchy and create a new Clip in the Animation window.

Pressing the Record button, select all of the run images, and drag them into the animation timeline will create the new Run animation clip. Mess around with the frames per second to get the right speed and I will set it at 30 frames per second.

In the Sprite Animator tree, we have the Idle animation as the default animation and now we have the Run animation. In order to go from one animation to another, we will need to add a transition from Idle to Run and from Run to Idle.

We are going to need a parameter to let the Animator know when to make those transitions. Lets think about what we want to control the transition and is the horizontal input value or the right/left arrow keys. The horizontal input returns either a -1 or 1, but since there is no equal comparison operator for animation parameters we are going to use a float parameter.

This parameter will be called Move. Lets select the transition we want to add the parameter to and that will first be from Idle to Run. The condition will be if the Move parameter is greater than 0.1 that means either the left or right arrow keys are being pressed.

We will need to add the Move parameter for the transition from Run to Idle. The condition to make this condition will be Move or the horizontal input is less than 0.1, which is basically 0, meaning neither of the movement keys are being used.

Code

We will need to get a handle of the animator so we can make use of those Move parameters to trigger the animation transitions.

In the On Start, we will get the Animator component and complete a null check.

The horizontalInput is determining the direction the player will move depending on what key is pressed by returning a different value (Left = -1, Right = 1).

We are going to access the Animator float parameter using _anim.SetFloat and passing in the name of the parameter, Move, and the float value which will be the horizontalInput.

The Animation transition is only working when moving right and not left. This is because the transition parameter is looking for a value greater than 0.1.

But, when moving left the horizontalInput is return a value of -1, which no longer meets the transition condition of being greater than 0.1

To fix this, we will get the absolute value of the horizontalInput which will return a 1 even if the player is moving left, which will satisfy the Move condition to go from Idle to Run.

Now we have the run animation working in both directions, but we have the player moon walking when moving left.

The Sprite Renderer gives us the ability to flip the image on the Axis, we just will need to be able to set this flip in the code.

We will create a variable to store the Sprite Renderer and get the Sprite Renderer component and assign it to this variable. Lastly, complete a null check.

When the left arrow key is pressed, we can access the Sprite Renderer and use the flip method. We want to set it to true to flip the image so it is facing left. We are going to set flip to false when the right arrow key is pressed to return the image facing right.