# Animation Steps

To create a 2D animated character, first you need to find a set of sprites that show a character with slight changes in body position.

[Link to Free - 2D GameArt - Sprites used here](http://www.gameart2d.com/freebies.html)

After downloading the sprite set, determine which animation states your character will use. In this case, we'll implement 4 animation states: `idle, walk, jump, dead` (_If desired, you can implement 3 states: idle, walk, jump_)

* **Import sprites** associated with desired animation states into your Unity project.  Put these in a folder: Sprites/PlayerSprites

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiJveeG3w0DaQq6G%2FScreen%20Shot%202018-10-31%20at%2010.42.11%20AM.png?generation=1581627420556179\&alt=media)

* Select ( shift - to select multiple sprites )&#x20;
*   Drag the set of sprites into the Scene view, you will be prompted to SaveAs, 'Create a new animation'

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiJxOMAr5HmW2aAV%2FScreen%20Shot%202018-10-31%20at%2010.41.50%20AM.png?generation=1581627422602204\&alt=media)

    &#x20;**This creates the following Items:**
* A gameObject in the hierarchy with an attached: **Animator Component**
  * Animator Component:  ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiJzVGZXJrfVle53%2FScreen%20Shot%202018-10-31%20at%2011.08.46%20AM.png?generation=1581627420869022\&alt=media)
* An **Animation clip** - in the selected assets folder. This can be viewed/edited in the Animation window when the gameObject is selected
  * Animation clip:   ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiK0g7u0cIb0tdoa%2FScreen%20Shot%202018-10-31%20at%2011.11.21%20AM.png?generation=1581627422637245\&alt=media)
* An **Animator Controller** - in the selected assets folder. This can be viewed/edited in the Animator window when the gameObject is selected
  * Animator Controller  ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiK2DHPDvp-h3Qxm%2FScreen%20Shot%202018-10-31%20at%2011.11.12%20AM.png?generation=1581627422632001\&alt=media)
* **Play the Unity scene** to make sure the created gameObject animation works as expected
* **Repeat steps** for each desired Animation State ( idle, walk, jump, dead )

**Delete the following:**

* Delete auto-created GameObjects: all **except** the **idle gameObject** ( the animation auto-created gameObjects)
* Rename the remaining gameObject: player
* Add Tag:  player
*   Find the Animator Component on the player gameObject, Identify the Animator Controller **(idle)** that is on the player gameObject.\
    **This one will not be deleted (idle)**.

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiK4ZtLxGzPd5Zec%2FScreen%20Shot%202018-10-31%20at%2011.12.37%20AM.png?generation=1581627420412523\&alt=media)
* Delete all other Animator Controller (dead, walk, jump )
* Keep all auto-created Animation clips (Don't delete these)
* The image below shows the remaining assets: 4 animation clips and 1 animator controller ( idle ) ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiK69MHgA5n3Hbb5%2FScreen%20Shot%202018-10-31%20at%2011.15.01%20AM.png?generation=1581627420412501\&alt=media)

**Modify** the auto-created **idle Animator Controller: Create 3 new Empty States**

* Open the Animator Window - ( menu: window/Animator) &#x20;
*   With the player gameObject selected, the animator window should display as below.

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiK8xotTwSlCPBfo%2FScreen%20Shot%202018-10-31%20at%2011.23.46%20AM.png?generation=1581627420927381\&alt=media)
*   Right-click in the Animator window to **Create State > Empty**

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKAsxf3QxUUNvJ7%2FScreen%20Shot%202018-10-31%20at%2011.26.04%20AM.png?generation=1581627419956209\&alt=media)

    Repeat 2 times to create 3 new State nodes\
    Rename States: right-click each state to rename: hero\_walk, hero\_jump, hero\_dead

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKCU4CS62pFAXFI%2FScreen%20Shot%202018-10-31%20at%2011.30.03%20AM.png?generation=1581627422652115\&alt=media)

**Configure new States**

*   Configure state-nodes as shown in tables below.

    * Each state-node must be assigned an animation clip,&#x20;
    * Select the state-node in the animator window, then set _**Motion**_ in the inspector by selecting the corresponding animation clip listed below.
    * Each state-node must have event arrows created and configured to allow transitions between state-nodes
    * Right-click on a state, select: Make Transition, drag to next state node according to the tables below&#x20;

    ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKEyLZ5hMwR4vJg%2FScreen%20Shot%202018-11-08%20at%209.00.12%20AM.png?generation=1581627420453061\&alt=media)

### Create Animator Parameter:  HeroState

In the image below, in the left hand panel of the Animator Controller, select the **Parameter** tab. Select **+** to add a new int parameter, you will name it **HeroState**. This is the value that is used to set the logic for transition arrows between states. The is is used in the code to send a signal to the animator controller in the player controller script. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKG7gYX55zral7d%2FScreen%20Shot%202018-12-01%20at%207.19.31%20AM.png?generation=1581627420069966\&alt=media)

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKIQM-4LMvjR9i8%2FScreen%20Shot%202018-12-01%20at%207.15.35%20AM.png?generation=1581627420810035\&alt=media)

```
//Code in PlayerController to set the HeroState parameter in the animator controller.
 animator.SetInteger("HeroState", (int)heroState.idle);
```

State Configuration:

| State       | Motion - Animation Clip | Create Transition Arrows |
| ----------- | ----------------------- | ------------------------ |
| hero\_idle  | _hero\_idle animation_  | hero\_idle -> hero\_walk |
| hero\_idle  | _hero\_idle animation_  | hero\_idle -> hero\_jump |
| hero\_walk  | _hero\_walk animation_  | hero\_walk -> hero\_idle |
| hero\_walk  | _hero\_walk animation_  | hero\_walk -> hero\_jump |
| hero\_jump  | _hero\_jump animation_  | hero\_jump -> hero\_idle |
| hero\_jump  | _hero\_jump animation_  | hero\_jump -> hero\_walk |
| hero-dead\* | _hero\_dead animation_  | Any State -> hero\_dead  |

\*hero-dead is optional

### State-Event Transition Table

The following table shows the details for logic that is used to configure the transition arrows between states Each line of the table represents logic for an arrow between the CurState and NextState nodes.

### Has Exit Time

The images below show the **configuration for arrows** between the hero\_idle and the hero\_jump states. The checkbox Has Exit Time is unchecked for the transition arrow that goes from idle to jump, this means that the **jump event can interrupt** display of the idle animation clip. When leaving the hero-jump state, the jump animation should not be interrupted, so it can to completion. **It is necessary Has Exit Time is not checked** for event transitions as listed in the table below. This is necessary so that the **keypress-event for triggering the transition into the jump-state** to run the jump animation clip.

### Idle -> Jump Transition: Has Exit Time - Not Selected

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKKQXyzp9AAL_MC%2FScreen%20Shot%202020-01-31%20at%202.48.51%20PM.png?generation=1581627421333357\&alt=media)

### Jump - > Idle Transition: Has Exit Time - Selected

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKMNbHmEaQg83Ca%2FScreen%20Shot%202020-01-31%20at%202.38.54%20PM.png?generation=1581627420811627\&alt=media)

### State - Event Transition Table

| Current State | Event Condition | Next State | HasExitTime |
| ------------- | --------------- | ---------- | ----------- |
| hero\_idle    | HeroState == 1  | hero\_walk | False       |
| hero\_idle    | HeroState == 2  | hero\_jump | False       |
| hero\_walk    | HeroState == 0  | hero\_idle | False       |
| hero\_walk    | HeroState == 2  | hero\_jump | False       |
| hero\_jump    | HeroState == 0  | hero\_idle | True        |
| hero\_jump    | HeroState == 1  | hero\_walk | True        |

The diagram below shows that **6 transition** arrows have been created in the Animator Controller, using the configuration information listed in the table above. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKODDEjOT8X33-L%2FScreen%20Shot%202020-01-31%20at%202.38.40%20PM.png?generation=1581627420651520\&alt=media)

## Optional: hero\_dead animation clip

### Configure loop-time

Since we don't want the hero\_dead animation clip to loop continuously, we need to set that configuration as part of the hero-dead animation clip asset. In the project assets panel, find and select the hero-dead animation clip. Once the animation-clip is selected, in the inspector panel, uncheck the Loop Time checkbox. Loop-time will remain checked for all other animation clips.

**Select hero\_dead Animation Clip in Project Assets** ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKQl4YK9uOkMXer%2FScreen%20Shot%202018-11-08%20at%209.23.39%20AM.png?generation=1581627421278182\&alt=media)

**Uncheck Loop Time in Inspector Panel for hero-dead Animation clip** ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKSmhPoR4UlPpCg%2FScreen%20Shot%202018-11-08%20at%209.23.55%20AM.png?generation=1581627421164477\&alt=media)

### Add Animation Event to hero\_dead Animation Clip

Finally, you may choose to add an animation-event to the hero\_dead Animation clip. An animation event allows for a function/method to be executed when at a specific animation keyframe is played. In this case, we'd like the hero\_dead animation to play completely before leaving the scene or reloading the scene. So, an animation event allows for some specially defined event to be triggered when a specific keyframe is executed. The animation event can be configured to execute any public method with the following syntax: `public void someMethod( )`, but this method must be defined within a script-component that's on the same gameObject as the animation clip that has the animation event defined.

### Steps to Create An Animation Event

* Select the player in the hierarchy.
* Open the Animation panel&#x20;
* From the Animation panel dropdown, select the hero\_dead animation clip
* Select the timeline section above the final keyframe
* Push the button: with icon: small white vertical rectangle, when you hover over this icon, it will say Animation Event  ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKUsX-JOuBHdS0N%2FScreen%20Shot%202018-11-08%20at%2011.32.38%20AM.png?generation=1581627422567078\&alt=media)
* In the inspector, select the Function from the dropdown, to be executed as the Animation Event.(See images below)
* If the ReloadScene( ) method hasn't been added to the player controller yet, see code below, it will need to be customized for your game details.
* You may want to add additonal keyframes, at a later keyframe time slice, if you want the dead animation to be displayed for a longer time before the scene is reloaded.

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKWIZU2g1uhW_qF%2FScreen%20Shot%202018-11-08%20at%2011.21.00%20AM.png?generation=1581627421210087\&alt=media)

As seen in the image below, once you've configured an animation-event, then when you hovering over the icon, it will display the message shown below, which is the name of the function / method you've configured to be executed.

![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M0-KOTdBSCNJjpmpwrG%2F-M0-KiKYIUF2tcQH5csV%2FScreen%20Shot%202018-11-08%20at%2011.22.20%20AM.png?generation=1581627422618018\&alt=media)

```java
///Example Method in PlayerController.cs
///This method is executed from within the hero_dead animation, 
//when the keyframe is played with the corresponding animation event.

    public void ReloadScene(){
        if(GameData.instanceRef.Lives <= 0){
            //go to end scene if there are no more Lives left
            SceneManager.LoadScene("Scene5");  //actual scene name
            StateManager.instanceRef.SwitchState(new Scene5State());  //create new state, pass to StateManager

        }
        else //if there are still Lives left, reload the current scene 
        {
            //reload this current scene
            SceneManager.LoadScene("Scene4");  //actual scene name
            StateManager.instanceRef.SwitchState(new Scene4State());  //create new state, pass to StateManager
            //How should we reset score, health variables for the game?
        }

    }
```
