> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/cs2335/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/cs2335/animation/animation-steps.md).
# 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
* **Select ( shift - to select multiple sprites )**
* **Drag the set of sprites into the Scene** view, you will be prompted to SaveAs, 'Create a new animation',\
\
**Name clips:** hero\_idle, hero\_walk, hero\_jump
\
**This creates the following Items:**
* A gameObject in the hierarchy with an attached: **Animator Component**
* **Animator Component:** 
* An **Animation clip** - in the selected assets folder. This can be viewed/edited in the Animation window when the gameObject is selected
* Animation clip: 
* An **Animator Controller** - in the selected assets folder. This can be viewed/edited in the Animator window when the gameObject is selected
* Animator Controller 
* **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)**.
* Delete all other Animator Controller ( 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 ) 
(ignore the hero\_dead animation clip)\
\
**Modify** the auto-created **idle Animator Controller: Create 3 new Empty States**
* **Open the Animator Window -** ( menu: window/Animator)
* With the player gameObject selected, the animator window should display as below.
* Right-click in the Animator window to **Create State > Empty**
Repeat 2 times to create 3 new State nodes\
Rename States: right-click each state to rename: hero\_walk, hero\_jump, hero\_dead
**Configure new States**
* Configure state-nodes as shown in tables below.
* Each state-node must be assigned an animation clip,
* 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
### 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. 
```
//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 table below 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
### Jump - > Idle Transition: Has Exit Time - Selected
### 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. 