Easy Control of Avatar Animation with ActionSheet

# Course Introduction

Let's find out how to control animations easily through avatar's state in StateToAvatarBodyActionSheet.

# Avatar Animation

In order for the user to recognize when the avatar is walking, sitting, attacking, or jumping, an animation that matches the state is required. If there is Key and AvatarBodyActionStateName in StateToAvatarBodyActionSheet of [AvatarStateAnimationComponent](/apiReference/Components/AvatarStateAnimationComponent), when the avatar enters a certain state, the corresponding animation is played. You can use this feature to delete the original animation value and create a new state and animation to connect with your avatar. For example, pressing the attack key will play the attack animation by default, but you can change it to the dead animation.

StateToAvatarBodyActionSheet defines 11 states (Key) of the avatar and animations (AvatarBodyActionStateName) associated with them by default. When the avatar enters a certain state, the Key sends a request to play an action and plays the animation corresponding to AvatarBodyActionStateName. If you only enter AvatarBodyActionStateName but do not enter a state (Key), the animation will not play because there's no connected state. AvatarStateAnimationComponent is the default component of Player models. You can deactivate this component in DefaultPlayer and add properties to the component. To add/delete a Key, you can change the StateToAvatarBodyActionSheet property's Size value or click the [+] and [-] buttons at the bottom.

[png](167927196496004370d09cca342d0b0ae918cc40e24ac)

StateToAvatarBodyActionSheet has default values as shown below. If you change or delete the default, the corresponding animation will not play. For example, if you delete ladder from AvatarBodyActionStateName, when the avatar climbs the ladder, the ladder ascending animation (ladder) does not play, and the walking animation stops while climbing. PlayRate allows you to adjust the default playback rate for avatar animations. The default values are different according to AvatarBodyActionStateName.

[{"Key":"IDLE","AvatarBodyActionStateName":"stand","PlayRate":"1.0"},{"Key":"MOVE","AvatarBodyActionStateName":"walk","PlayRate":"1.68"},{"Key":"ATTACK","AvatarBodyActionStateName":"attack","PlayRate":"1.33"},{"Key":"HIT","AvatarBodyActionStateName":"hit","PlayRate":"1.0"},{"Key":"CROUCH","AvatarBodyActionStateName":"crouch","PlayRate":"1.0"},{"Key":"FALL","AvatarBodyActionStateName":"fall","PlayRate":"1.0"},{"Key":"JUMP","AvatarBodyActionStateName":"fall","PlayRate":"1.0"},{"Key":"CLIMB","AvatarBodyActionStateName":"rope","PlayRate":"1.0"},{"Key":"LADDER","AvatarBodyActionStateName":"ladder","PlayRate":"1.0"},{"Key":"DEAD","AvatarBodyActionStateName":"dead","PlayRate":"1.0"},{"Key":"SIT","AvatarBodyActionStateName":"sit","PlayRate":"1.0"}]

> Tip. Key has to be in Upper case.

# Connecting Different Animation to Existing State Key

You can modify the AvatarBodyActionStateName value of the StateToAvatarBodyActionSheet property to connect a different animation to an existing state.

  1. Change attack to dead. [png](16793645420245e8a2fcc25234f7391c1c2585fb08417)   

  2. Press the [gif](1656037601843938b5091f64c4a3499ff0940db8d3670)



# Adding New State Key and Animation

You can also add new states (Keys) and assign animations. If you add new states and actions without using the existing one, the two states will operate together. Let's play a certain animation upon pressing number keys 6, 7, 8, 9.

  1. Change Size of Workspace - DefaultPlayer - AvatarStateAnimationComponent to 15.   


  2. Enter a new Key and AvatarBodyActionStateName in the added fields.

[{"Key":"NEW_ATTACK","AvatarBodyActionStateName":"attack"},{"Key":"NEW_DEAD","AvatarBodyActionStateName":"dead"},{"Key":"NEW_JUMP","AvatarBodyActionStateName":"fall"},{"Key":"NEW_CROUCH","AvatarBodyActionStateName":"crouch"}]

[png](1679272025027f89505b96cf948aba9190b4a1bac83be)   


  3. Create the new NewAvatarAnimation script component in MyDesk and add it to DefaultPlayer.   


  4. Open the NewAvatarAnimation script. Write it with the `AddState()` and `ChangeState()` function of StateComponent to play the new added Key.
         
         @Component
         script CharacterAnimationController extends Component
         property any stateComponent = nil
         
         @ExecSpace("ClientOnly")
         method void OnBeginPlay()
         self.stateComponent = self.Entity.StateComponent
         self.stateComponent:AddState("NEW_ATTACK") -- Adds a new state.
         self.stateComponent:AddState("NEW_DEAD")
         self.stateComponent:AddState("NEW_JUMP")
         self.stateComponent:AddState("NEW_CROUCH")
         end
         
         @ExecSpace("ClientOnly")
         method void Animate(number key)
         if key == 6 then
             self.stateComponent:ChangeState("NEW_ATTACK") 
         elseif key == 7 then
             self.stateComponent:ChangeState("NEW_DEAD")
         elseif key == 8 then
             self.stateComponent:ChangeState("NEW_JUMP")
         elseif key == 9 then
             self.stateComponent:ChangeState("NEW_CROUCH")
         end
         end
         
         @ExecSpace("ClientOnly")
         @EventSender("Service", "InputService")
         handler HandleKeyDownEvent(KeyDownEvent event)
         -- Parameters
         local key = event.key
         --------------------------------------------------------
         
         if key == KeyboardKey.Alpha6 then
             self:Animate(6) 
         elseif key == KeyboardKey.Alpha7 then
             self:Animate(7)
         elseif key == KeyboardKey.Alpha8 then
             self:Animate(8)
         elseif key == KeyboardKey.Alpha9 then
             self:Animate(9)
         end
         end
         end
         



    
    
           
        >**Learn more**
        > We added new state and action but did not delete the existing one, so the two inputs operate together.
    
     5. Press Start followed by the number key to play the animation. 
    [gif](1656037637302737656324fc249a3a33872e34f4e54c4)