Setting up an Animation State Machine

On this page you will learn how to set up an Animation State machine for a 2D character which will allow the character to cycle between different Flipbook animations based on your defined criteria.

This tutorial assumes you have a Paper 2D character that is already set up for movement and have some Flipbook animations that you want the character to switch between. If you do not have a character or Flipbook animations, see the Paper 2D Top Down Tutorial for information on setting up a Paper 2D character and applying movement as well as a link to the sample assets used in this tutorial.

With your project open and Paper 2D character ready to go, follow the steps below.

Variable Setup

1. Inside your project, open your Paper 2D Character Blueprint (TopDownCharacter in our example).

2. In the My Blueprint window, click the Add Variable button to create a Bool variable and name it IsMoving?.

   

3. Create and name another variable based on one of your Flipbook animations (such as Idle) and set it to a Paper Flipbook type.

   

   Depending upon the type of game you are making, you may have different animations. Most character based games, have a state where the character is idle (or resting and not moving).

4. Click Compile then set the default value of the variable to its corresponding Flipbook asset.

   

   Above we have assigned our Idle Flipbook animation to our IdleFlipbook variable.

   (Optional) For the sake of clarity, you may also want to put the variable in a Category called Animations.

   

   You can type in the name of the category you would like and will keep things organized for you.

5. Repeat the previous two steps for each of the animations that you want your character to be able to play.

   

   Above we have created another Paper Flipbook variable called RunFlipbook, clicked Compile then set the Default Value for that variable to our corresponding Run Flipbook animation. While our example only has the two animations, you could have one for a death animation, another for reloading a gun (if they have one) or a melee attack, another for picking up or using items, etc.

   Once you have added variables for each of our Flipbook animation states, proceed to the next section.

Update Animation Setup

Next we will create some script to handle the updating of our Animation state.

1. Right-click inside the Event Graph and search for and add a Custom Event.

   

   Call the Custom Event something to the effect of UpdateAnimation.

2. Right-click in the graph again and add a Get Velocity node, then drag off the return value and add the Vector Length node.

   

   We can use the Vector Length of Velocity to determine if our character is moving or not.

3. Off the return value of the Vector Length, add a > node then drag-and-drop the IsMoving? variable onto the Bool return to set it.

   

Animation State Machine Function

Here we will create a function that will handle the checking of which state we are in and output a corresponding Flipbook animation to use.

1. In the My Blueprint window, create a new Function called Anim State Machine.

   

2. In the Details panel of the function, add an Input Boolean called IsMoving? and an Output Paper Flipbook called Output Flipbook.

   

   Our function will take in the value of our variable also called IsMoving? to check if we are moving and use that as a test case to determine what state we are in (moving or not). Our function will then output an Output Flipbook which we will set our sprite to use in a moment.

3. Connect a Branch node off the input executable pin of the function.

   

   The first thing that occurs when this function is called is run a True/False check against our IsMoving? variable.

4. Back inside the Content Browser, Right-click and under Blueprints create an Enumeration and call it Animation State.

   

   We are using an Enumeration to create a list of all our animation states that our character can be in which we can then select from.

5. Open the Enumeration, then add a state for each of the animations that your character will enter.

   

   For example, we only have Idle and Run however you may have many more depending upon the animations you plan to use.

6. Return to your Paper 2D Character Blueprint and create a new variable called AnimationState set to the Enum Animation State.

   

7. Inside the Anim State Machine function, hold Alt and drag in the AnimationState variable to set it.

8. Drag in another AnimationState variable and connect each to the True and False pins of the Branch node.

   

   For the Enum connected to True, set the state to Run and set the other Enum to Idle. We are saying if IsMoving? is true set our Enum state to Run and if we are not moving set it to Idle. While our example only checks whether we are moving or not, you could add different Branch nodes to check different criteria based on your needs.

   One thing to note is that the order in which you process your checking is important and you'll want to prioritize certain states over others. For example, if we had a death Flipbook animation for our character would probably want to process that first and check if the character is dead and if so, we would want to play the death animation and kill the character. If they are not dead, then we can proceed on to the next series of checks (if the character is moving, attacking, using an item, etc. with the final check being if the character is not doing anything at all resulting in the Idle pose.

9. Hold Ctrl and drag in the IdleFlipbook, RunFlipbook and Animation State variables, then Right-click and add a Select node.

   

   For this section, you will need to drag in each of your animation variables into the graph.

10. Connect each of the nodes so the function is complete and looks similar to below.

    

    Our function now checks if we are moving and if so, sets our Enum state to Run (Idle if we are not moving). We then use a Select node to get our Animation State from our Enum and based on the state assigns the corresponding Flipbook as the Output Flipbook to use.

Finishing Update Animation Event

Now that our function is complete, we will call it as part of our Update Animation Event and finish off the remaining script.

1. On the Event Graph in the My Blueprint window, choose to Show Inherited Variables then hold Ctrl and drag in your Sprite.

   

2. Drag in the Anim State Machine function and connect it to the Set Is Moving? node, then off your Sprite add a Set Flipbook node.

   

3. Connect all of your nodes together for the UpdateAnimation custom event as shown below.

   

4. Following the Add Movement Input node from your MoveForward Event, call the Update Animation custom event.

   

5. Compile and Save then play in the editor.

   You will now have a character that cycles between the two states based on your condition of whether or not the character is moving.

As mentioned, in order to add additional animation states to this setup you would need to:

• Have Flipbook Animations for each of the animation states you want your character to enter.
• Add and set them as Flipbook variables inside your Paper 2D Character Blueprint.
• Add each of the states to the Animation State Enumeration we created.
• Create conditions that determine when the character can enter each state and add it to the Anim State Machine function.
• Connect each of your Flipbook variables to the Select node inside the Anim State Machine function.