Movement animation in Unity 2D

Objective: Add idle, run and jump sprite animations to 2D game.

Animated player movement.

Our player is organized into the Player game object and a child object called, Sprite. Select the Sprite and create an animation named Idle, placing it in the animations folder within the Sprites folder. With the Sprite child selected, open the animation window (Ctrl+6) and create new clips for Run and Jump. When finished the project window should look like that shown below.

Project organization.

Make sure Idle is the default state. Create transitions to and from each state to the other two states, as shown below. Create a float parameter called Move and a bool parameter called Jump, which will be used to control these transition.

Sprite controller animations and transitions.

Drag the player sprites for Idle_0 to Idle_33 into the animation window for Idle and adjust the timing so they play out over a minute. Loop time for Idle animation should be checked. Similarly drag the player sprites for Warrior_Run_0 through Warrior_Run_21 into the Run animation window and adjust the timing so they loop over a minute, making sure loop time is checked. Finally select the Jump animation and add Jump_6, Jump_8–10 and Jump_12–15, with Jump_15 positioned at 2 seconds, as shown below, to produce the jump and hold the fall position until landing.

Jump animation with most keyframes in the first 0:17 seconds.

The transition for idle -> run is shown below, noting the has exit time is unchecked and transition duration is zero. This transition occurs when Move is > 0.1. The run -> idle transition is similar only it occurs when Move is < 0.1.

The transition for idle -> jump is shown below, noting the has exit time is unchecked and transition duration is zero. The setup for run -> jump transition is identical to that below. Both of these transitions occur when Jump is true, differing by their starting state. The jump -> idle transition is similar except that it occurs when Jump is false. The jump -> run transition only occurs when Move > 0.1 and Jump is false, but is otherwise similar.

The parameters for these transitions are controlled by the Player script on Player game object, which needs two new variables. First it needs access to PlayerAnimation, _playerAnim, and second is a bool, _isJumping, to track when the player has recently jumped. The _playerAnim is assigned in void Start().

Variables required for movement animation in Player script.

The animation state is dictated by player input and thus occurs within the Movement() method shown below. If _isJumping is false and the Physics2D.Raycast detects the ground the _playerAnim.Move() method is called passing false to the PlayerAnimation script. If the player is near the ground and presses the space key the player starts the PlayerJumps coroutine and calls the Jumping method, passing the current _horizontal movement, to _playerAnim, .

Movement method on Player script.

An IEnumerator coroutine is used to prevent the Physics2D.Raycast from prematurely halting the the jump animation in the frames after the space key is pressed by setting the _isJumping to true for 0.1 seconds. After this time the player has cleared the ground and _isJumping is set to false, allowing the raycast to end Jump animation.

PlayerJumps IEnumerator method on Player cript.

The animations are controlled from the PlayerAnimation script on Player game object, which requires access to the _animator and _renderer on the Sprite child. These components are assigned in void Start().

Variable assignment in Player animation.

There are two methods within PlayerAnimation, Move() and Jumping(), which are shown below. Each method sets the parameter controlling their respective animations. In the Move method, the _render.flipX command controls the facing of the player based upon input move from the player script. The _render.transform.localPosition commands maintains the raycast at the center of the sprite, adjusting for current move direction.

Move() and Jumping() methods in PlayerAnimation.

This article uses assets from GameDevHQ Filebase.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store