Simple Unity Animation

Published

Introduction: Simple Unity Animation

This tutorial will show you how to implement simple movement animations and how to move a player using a rigidbody component.

Step 1: Getting Setup

For this tutorial you will need a copy of Unity. I will be using Unity 2017.3.0f1. You will also need a sprite sheet for the character animation. The image I will be using is included in this instructable.

The sprite is by DawnBringer and DragonDePlatino and is a part of their 2D spritemap pack DawnLike. It can be found at https://opengameart.org/content/dawnlike-16x16-universal-rogue-like-tileset-v181

Step 2: Unity Setup

Your Unity interface should look something like mine. To start create some folder s to organize your project. You will need a Sprites, Scenes, Scripts, GameObjects, and Animations folder.

Step 3: Importing the Sprite

Import the sprite into the Sprites folder. Then click on the sprite in the Project tab and go to the Inspector tab. In the Inspector tab make sure the following is true:

  • Texture Type: Sprite (2D and UI)
  • Sprite Mode: Multiple
  • Pixels Per Unit: 16
  • Filter Mode: Point (no filter)
  • Tick the Override for PC, Mac & Linux Standalone
  • Format: RGBA 32 bit

Make sure you press the Apply button after doing this.

Step 4: Slice Your Sprites

Press the Sprite Editor button in the inspector and then go to that tab. In the Sprite Editor press the Slice button and then set the following settings:

  • Type: Grid By Cell Size
  • Pixel Size X: 16 Y: 16

Then press the Slice button. The press the Apply button.

Step 5: Checkpoint

Your project should look something like this. Make sure you save your project frequently.

Step 6: Creating the Player

Now we can making the player.

  1. Create an empty GameObject and name it. I named mine Player.
  2. Then add a Sprite Renderer, and an Animator component to the player object.
  3. Then expand the player sprite map and pick a sprite to place in the Sprite Renderer's Sprite setting. Drag the selected sprite to the sprite setting and drop it there. This is just so you can see the player in the editor. (For mine I chose Template_0.)

Step 7: Animator Controller

Now create an Animator Controller and drag it to the player's animator controller and place it in the animator's controller settings.

Step 8: Creating Animation State Machine

  1. Now click on the player animation controller and go to the Animator tab.
  2. Then create a state for Idle, WalkUp, Walk Left, WalkRight, and WalkDown. You can create a state by right clicking in the workspace, selecting create state, and selecting empty.
  3. Set Idle as the default state

Step 9: Creating Animations

  1. Go to the Animation tab and select the play in the Hierarchy tab
  2. Press the Create button
  3. Name the new animation Idle.anim and save it in the Animations folder.
  4. to create another animation press the drop down in the top left of the Animation tab that should have the text "Idle" on it.
  5. Then press "Create new Clip"
  6. Repeat step 4-5 and create WalkUp.anim, WalkLeft.anim, WalkRight.anim, and WalkDown.anim

Step 10: Adding Sprites to Animations

To create the Idle animation:

  1. Drag the selected sprites onto the Animation tab. (For the Idle animation I chose only Template_0).
  2. Change the Samples to 1 because we only have one sprite or set the number of samples to the number of sprites you have in your idle animation. (Samples is how many frames will be shown per second.)

You can test the animation by pressing the play button on the animator tab (in this example the Idle animation will look static since it is only one sprite.)

Next go to the WalkDown animation and repeat steps 1-2 above. For this example I will use Template_0, Template_1, Template_2, and Template_3, and set the samples to 4.

Next go to the WalkLeft animation and repeat steps 1-2 above. For this example I will use Template_4, Template_5, Template_6, and Template_7, and set the samples to 4.

Next go to the WalkRight animation and repeat steps 1-2 above. For this example I will use Template_8, Template_9, Template_10, and Template_11, and set the samples to 4.

Next go to the WalkUp animation and repeat steps 1-2 above. For this example I will use Template_12, Template_13, Template_14, and Template_15, and set the samples to 4.

Step 11: Adding Animation Clips to State Machine

Now go back to the Animator tab and make sure the states have their respective animation as its motion setting. If something is incorrect drag the correct animations to the correct state.

Step 12: Creating Transistions

  1. Create a transition going from "Any State" to all 5 of the player states and change the transition setting "Can Transition To Self" to false (untick).

Note: The "Can Transition To Self" setting might be partially cut off and only appear as "Can Transition To Se" or "Can Transition To".

Step 13: Adding Transition Parameters

Part 1: Now we must tell the state machine how to behave.

  1. Press the "+" button in the upper right of the left column in the animator tab.
  2. Press "Int" in the drop down
  3. Name the parameter "WalkState"

Part 2: Now we must tell the transitions what condition they activate on.

  1. Press the "Any State" -> "Idle" transition and then go to the inspector tab.
  2. Go to the bottom and press the "+" button in the bottom right under Conditions.
  3. Then set the condition to WalkState Equals 0

Repeat steps 1-3 under part 2 except set:

  • "Any State -> WalkUp" condition to WalkState Equals 1
  • "Any State -> WalkRight" condition to WalkState Equals 2
  • "Any State -> WalkDown" condition to WalkState Equals 3
  • "Any State -> WalkLeft" condition to WalkState Equals 4

Step 14: Creating the PlayerController

Now we code the Player Controller for the animations

  1. Create a C# Script in the Scripts folder and call it PlayerController
  2. Open up the controller in an IDE
  3. Declare the following variables:
private const float ThreePiOverFour = Mathf.PI * 3 / 4;
private const float PiOverFour = Mathf.PI / 4;
public float speed;
public Animator animator;
public Rigidbody2D rb2D;

Step 15: Updating the Animation

  1. Next go to the Update method
  2. Declare a float called vertical to the Vertical input axis
float vertical = Input.GetAxis("Vertical");

3. Declare a float called horizontal to the Horizontal input axis

float horizontal = Input.GetAxis("Horizontal");

4. Then create a vector2 using horizontal and vertical as its x and y components respectively and normalize the vector.

Vector2 movement = new Vector2(horizontal, vertical);
movement.Normalize();

5. Now we get into updating the animations

6. You need to check the condition of the player's movement to decide what animation is running.

  1. First you check if movement equals (0, 0)
  2. If movement is not equal to (0, 0) create a float variable called angle assign it to movement's tangent value
  3. Then use angles value to decide if it is moving up, down, left, or right
    • The player is moving up if angle is less than 3π/4 and greater than π/4
    • The player is moving down if angle is less than -π/4 and greater than -3π/4
    • The player is moving left if the angle is less than -3π/4 and greater than 3π/4
    • The player is moving right if the angle is less than π/4 and greater than -π/4

Note: If angle equals π/4, 3π/4, -π/4, or -3π/4 the player just maintains the previous state because in the conditions above it does not do anything if angle equals those values.

The Update method should look something like this:

void Update () {
float vertical = Input.GetAxis("Vertical"); float horizontal = Input.GetAxis("Horizontal"); Vector2 movement = new Vector2(horizontal, vertical); movement.Normalize();

if (movement == Vector2.zero) { animator.SetInteger("WalkState", 0); } else { float angle = Mathf.Atan2(movement.y, movement.x); if (angle < ThreePiOverFour && angle > PiOverFour) { animator.SetInteger("WalkState", 1); } else if (angle < PiOverFour && angle > -PiOverFour) { animator.SetInteger("WalkState", 2); } else if (angle < -PiOverFour && angle > -ThreePiOverFour) { animator.SetInteger("WalkState", 3); } else if (angle > ThreePiOverFour || angle < -ThreePiOverFour) { animator.SetInteger("WalkState", 4); } }

}

Step 16: Moving the Player

This step is probably the simplest. Just add the following code to the bottom of the Update method

rb2D.velocity = movement * speed * Time.deltaTime;

Now the Update method should look like

void Update () {
float vertical = Input.GetAxis("Vertical"); float horizontal = Input.GetAxis("Horizontal"); Vector2 movement = new Vector2(horizontal, vertical); movement.Normalize();

if (movement == Vector2.zero) { animator.SetInteger("WalkState", 0); } else { float angle = Mathf.Atan2(movement.y, movement.x); if (angle < ThreePiOverFour && angle > PiOverFour) { animator.SetInteger("WalkState", 1); } else if (angle < PiOverFour && angle > -PiOverFour) { animator.SetInteger("WalkState", 2); } else if (angle < -PiOverFour && angle > -ThreePiOverFour) { animator.SetInteger("WalkState", 3); } else if (angle > ThreePiOverFour || angle < -ThreePiOverFour) { animator.SetInteger("WalkState", 4); } }

rb2D.velocity = movement * speed * Time.deltaTime; }

Step 17: Adding the Player Controller to the Player

Now that you have programmed the controller you need to add it to the Player

  1. Add a Rigidbody2D component to the player.
  2. Add the PlayerController script to the player.
  3. Set the PlayerController's Speed to 175
  4. Drag the player's Animator the the controller's Animator setting
  5. Drag the rigidbody2D to the controller's Rb 2D setting
  6. Set the rigidbody's gravity scale to 0 for this because the sprite is for a top down perspective not a side perspective.
  7. Now the player should move.

But wait..
When you move the player it feels like it is moving on ice and doesn't stop when you release the movement keys.
To fix that

  1. Go to Edit->Project Settings->Input
  2. Expand Axes
  3. Expand Horizontal
  4. Change Horizontal's Gravity value from 3 to 1000
  5. Change Horizontal's Sensitivity to 1000
  6. Repeat steps 3-5 for Vertical

Now the movement should be sharper.
The Gravity setting dictates how fast the axis' value falls back to 0 and the Sensitivity setting dictates how fast the axis' value goes toward its target value.

1000 makes it practically instant.

Share

    Recommendations

    • Water Contest

      Water Contest
    • Creative Misuse Contest

      Creative Misuse Contest
    • Oil Contest

      Oil Contest

    2 Discussions

    Great first instructable! Thanks for sharing :)

    1 reply