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'

  

  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 (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 )

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 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

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.

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

Uncheck Loop Time in Inspector Panel for hero-dead Animation clip

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

• 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
• 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.

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.

///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?
        }

    }