Beginner Tutorial

State Machine Basics

25 minutes

Posted on: October 11, 2017

Learn Sumerian
State Machine Basics


state machine
click event

In this tutorial you will learn about:

State machine

This tutorial teaches you how to use the State Machine to create a behavior that raises or lowers a flag when it’s clicked.

You’ll learn about:

  • State Machine
  • State Graph
  • Actions
  • Events
  • Behaviors
  • Transitions
  • Interactivity

This is the scene we will build in this tutorial. Click on the flag to make it go up and down. For best results, use the latest version of your browser..


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

What Is a State Machine?

A State Machine is the system to build behaviors, which are changes to entities initiated by a user. Behaviors can act alone or they can act in a sequence. They can be movements, animations, sounds, camera changes, collisions, reactions, AWS service integrations, etc. Behaviors are built using a collection of States that are connected by Transitions, as an entity transitions from one state to another. A few things to remember:

  • An example of multiple behaviors would be an entity that moves forward and backward, and left and right. Forward and backward is one behavior, while left and right is another behavior. An entity could also move up and down, creating a third behavior. However, actions must initiate these transitions.

  • A typical action is a mouse click. An example of this behavior would be clicking a flag to make it move up and down. In this exercise, the flag will have two states: up and down. A state is simply a position of an object at a certain point in time. We’re going to build a scene with a flag that goes up and down, or transitions between two states, when a user clicks the flag.

  • Between the states, the Flag has two Actions that make the Transition from one state to another: raising and lowering. When the Flag is in the Up state, it is possible to use the Lowering action to bring the Flag to the Down state. Likewise, in the Down state, it is possible to use the Raising action to bring it to the Up state.

  • Whether an entity is moving forward, backward, left, right, up, or down, and the initiation is to move (i.e., a mouse click), you build all these behaviors using the State Machine.

Step 1: Set up the Scene

In this step, we’re going to create an Empty Scene and add the Sumerian Flag.

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

  2. To add the Sumerian Flag from the asset library, choose Import Assets (located above the canvas).

  3. Search for and then add “Sumerian Flag”.