Mobile Games in Unity: Animation Set Up- Idle, Run, and Flipping the Sprite

In this article I’ll cover a few different things. Setting up the idle animation, the run animation, and the sprite flip functionality.

First, the idle animation.

This is actually incredibly simple! First I’ll select the sprite under the Player game object and navigate to the animation window.

Create the animation by clicking create, save it to your preferred directory, then drop down the “characters” folder. Here you’ll find the PNG files that make up the 2D animation.

Click that object and you’ll see some things populate the inspector window. Navigate to the “Sprite editor”. Here you can slice the spritesheet so that the PNGs all have the same dimensions. This will be incredibly handy for all the animations that need to be created in this game.

Slice it accordingly. Drop down the Idle folder and you’ll see 33 files. Select the first one, then shift select the last one. This chooses all of them. Now just drag them all into the animation window. This will create keyframes for each file. Play the animation and you’ll see the idle animation happening. Since this will be the defaut animation we wont need to set any parameters in the animator window just yet. (If yours is moving very fast, set the samples to 15.)

Thats exactly what I’ll do for the run animation as well. How am I supposed to transition from Idle to Run though?

In the animator window I can set a parameter that can be manipulated through code. I’ve made a parameter called “Move”. If this is less than 0.1 I’m going to have the run animation transition back to Idle.

In order to transition TO run this will need to either be less than zero(running left) or greater than 0 (running right). I’ll achieve this using an absolute value. Check it out.

I’ve created a new class called PlayerAnimation. This is where I’ll be handling all things animation. I have a handle to the Animator. For this example I’m setting the float “Move” in the animator to the absolute value of “move”.

This method is going to have to take a float value of some sort from somewhere. In the player script, I have “horizontalInput” set to a float and thats what I want to determine the value of the float. SO! In the player script I just need access to the script by creating a variable and assign ing it in start.

private PlayerAnimtion _playerAnim;

Then in my Movement method I’ll just put the following line of code.

This calls the helper method in PlayerAnimation and sets the float value to the horizontalInput value. Since I’m using GetAxisRaw this value is going to jump directly to 1 or -1 depending on direction and the animation is only going to read 1 becaus eof the Mathf.Abs() line.

Now all I need to do is flip the sprite depending on the direction the player is moving. I’m going to preemptively put this functionality inside its own script. I’ll be adding more to it once I implement more things like the sword swing animaion.

First I need a handle to the Sprite renderer component. Why you ask? Check it out:

The Sprite Renderer has a flip parameter built in! All I need to do is acces this parameter and set it to true or false depending on the direction my player is facing.

So in start, after I’ve declared the SpriteRenderer as _renderer I need to say getCOmponentInChildren since the script is on the parent and the Sprite Renderer is on the child object. Below you’ll see the Flip() method. This is going to be fed a bool called faceRight.

To actually flip the sprite all that needs to be done is type _renderer.flipX. So if faceRight == true, I wont flip it. If its false I will. Now in my movement code I’m just going to say that if horizontalInput is > 0 then Flip is true. If not its false! Easy!

Final Result: