Intermediate Tutorial

Animation Component

10 minutes

Posted on: October 28, 2017

Learn Sumerian
Animation Component


state machine

In this tutorial you will learn about:

State Machine
and Timeline

In this tutorial, we show you how to use .fbx animation files and add them to your scene. We’ll use the Mannequin asset, which is available in the asset library.

You’ll learn about:

  • Animation component
  • Adding animations
  • Creating animation transitions
  • Using State Machine to transition animations
  • Adding an animation .fbx file
  • Animation layers

This is the scene we will build in this tutorial. For best results, be sure you are using the latest version of your browser.


Before you begin, you should have completed the following tasks and tutorials:

Step 1: Set up the Scene

  1. From the Dashboard, create a scene from the Default Lighting template.

  2. Choose Import Assets at the top of the interface to open the asset library.

  3. Search for and then add the “Mannequin” asset.

  4. Navigate to the Assets panel, and then expand the Mannequin pack.

  5. Drag the Mannequin entity (next to the hexagon icon) to the canvas.

Step 2: Using the Animation Component

  1. In the Entities panel, choose the Mannequin entity.

  2. In the Inspector panel, open the Animation component.

  3. You can see several animations: idle, cheer, and applause. To set one as the default, simply click the animation’s Default button.

  4. Set any parameters you want:
    • Name: Changes the name of the animation.
    • Loop Infinitely: Repeats the animation infinitely.
    • Time Scale: Defines how fast the animation plays. A value of .5 plays at 50% speed, 1 plays at 100% speed, 2 plays at 200% speed, etc.
    • Transitions: Transitions to other layers.
  5. To add in a transition between animations, choose the + button. This creates a smooth transition from one animation to the next. Without transitions, animations don’t change smoothly but jump from one to the next. Transitions are important for smooth changes between animations.

  6. Select the order of transitions and define the time it takes to transition.