Animation Steps
Last updated
Last updated
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
An Animation clip - in the selected assets folder. This can be viewed/edited in the Animation window when the gameObject is selected
An Animator Controller - in the selected assets folder. This can be viewed/edited in the Animator window when the gameObject is selected
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)
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
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
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.
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.
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 |
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.
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.
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
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.
Animator Component:
Animation clip:
Animator Controller
The image below shows the remaining assets: 4 animation clips and 1 animator controller ( idle )
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.
The diagram below shows that 6 transition arrows have been created in the Animator Controller, using the configuration information listed in the table above.
Select hero_dead Animation Clip in Project Assets
Uncheck Loop Time in Inspector Panel for hero-dead Animation clip
Push the button: with icon: small white vertical rectangle, when you hover over this icon, it will say Animation Event
