Beginner Tutorial


State Machine Basics


25 minutes

Posted on: October 11, 2017

Learn Sumerian
State Machine Basics

Tags

state machine
transition
action
behavior
click event
states
video

In this tutorial you will learn about:

State machine
Actions
Events
Behaviors
Transitions
Interactivity

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 Machine 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..

Prerequisites

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.

Editor Interface Overview

In this section, we will get an overview of the State Machine editor interface. Note: We will be using screenshot images from the scene we will create in the next section of this tutorial. To skip to the lab portion of this tutorial and create a behavior of your own, skip down to Step 1.

Behaviors in the State Machine

The State Machine component can be added to any entity. You can do this by selecting an entity, navigating to the Inspector panel on the right of your screen and clicking + Add Component. Next, choose State Machine.

This will add a State Machine component to your entity.

You use the State Machine to create behaviors. A behavior can be anything, from a flag going up and down, to a drone flying when a key is pressed. Other behaviors could be reactive to mouse clicks, like a TV changing channels when an entity is clicked. Behaviors are produced when an entity transitions from one state to another.

In this scene, there is one behavior that involves two states: one state of the flag is Up, and another state is Down. The Up state is set as the default state. However, the State Machine can have many behaviors.

Go ahead and try out this scene. Press play and use your mouse to click the flag and watch it go up and down.

State Machine Component

To create a new behavior, click the + button.

To add a pre-built behavior to an entity, locate the behavior in the Assets panel. Drag and drop the behavior into the Drop Behavior input.

To edit, duplicate, or delete an existing behavior, click one of the three buttons to the right of the behavior.

In this first section, we look at the Up and Down behavior, which will create in the next section.

State Machine Editor

This is the State Machine editor.