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

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.