Transitions

Transitions allow us to go from one state to another based on various interactions.

Quick start:

addStateMachine({
  descriptor: {
    ...
  },
  states: [
    ...
  ],
  transitions: [
    {
      type: "Transition",
      from_state: 0,
      to_state: 1,
      on_pointer_down_event: {},
    },
    ...
  ]
})

Format

    {
      "type": "Transition",
      "from_state": number, // state index inside state array
      "to_state": number, // state index inside state array

      // This will build a Guard object type inside the Transition
      // Guards can optionally depend on a context variable
      "guards": [{
        "type": 'Numeric' | 'String' | 'Boolean'
        "context_key": string,
        "condition_type": 'GreaterThan' | 'GreaterThanOrEqual' | 'LessThan' | 'LessThanOrEqual' | 'Equal' | 'NotEqual'
        "compare_to": string | number | boolean
      }],
      // The Event(s) that triggers this Transition
      "numeric_event": {
        "value": number
      },
      "boolean_event": {
        "value": boolean
      },
      "string_event": {
        "value": string
      },
      "on_complete_event": {
      },
      // on_pointer events optionally take a target
      // If no target is used, the canvas becomes the target
      "on_pointer_down_event": {
        target: string?
      },
      "on_pointer_up_event": {
        target: string?
      },
      "on_pointer_enter_event": {
        target: string?
      },
      "on_pointer_exit_event": {
        target: string?
      },
      "on_pointer_move_event": {
        target: string?
      },
    }

Transition types available:

Transition

type: “Transition”

The base transition allows you to move between states depending on events received.

The base transition can be configured with the following properties:

from_state?: number

Index of the state to transition from.

to_state?: number

Index of the state to transition to.

guards?: []

Transition guards.

numeric_event: number

Transition if a numeric_event is received with the defined value.

boolean_event: number

Transition if a boolean_event is received with the defined value.

string_event: number

Transition if a string_event is received with the defined value.

on_complete_event: {}

Transition if an on_complete_event is received. The player automatically sends this event to the state machine.

⚠️ For onComplete event to fire, the animation can not be looping.

on_pointer_up_event: { target: string }

⚠️ Not implemented

Transition if an on_pointer_up_event is received.

If on_pointer_up_event is defined inside the Listeners array the player will automatically set up the listener for you.

on_pointer_down_event: { target: string }

⚠️ target is not currently supported.

Transition if an on_pointer_down_event is received.

on_pointer_enter_event: { target: string }

⚠️ Not implemented

Transition if an on_pointer_enter_event is received. If on_pointer_enter_event is defined inside the Listeners array the player will automatically set up the listener for you.

on_pointer_exit_event: { target: string }

⚠️ Not implemented

Transition if an on_pointer_enter_event is received. If on_pointer_enter_event is defined inside the Listeners array the player will automatically set up the listener for you.

on_pointer_move_event: { target: string }

⚠️ Not implemented

Transition if an on_pointer_move_event is received. If on_pointer_move_event is defined inside the Listeners array the player will automatically set up the listener for you.

Future additional properties for Transition

In an upcoming update we will add the possibility to add targets to the on_pointer.. events meaning the transition will only occur if there is a press on a specific layer of the animation.

DelayedTransition

⚠️ Not implemented