Basics & User Interface

Creating a new flowgraph asset

Right click inside the assets panel and select Assets->Create Flowgraph

The Flowgraph editor

Double click the flowgraph asset.

The flowgraph editor will start.
Initially, newly created flowgraph files contain several events pre-defined in the graph.
##On Start
Is triggered whenever the AR Experiecne is Played on a mobile device / Simulated through the editor.

On Update

Is triggered for every rendered frame.

📘

Events

Events are the entry point for flow graphs as the execution of actions can only be triggered by them.
The white circle on the right side of the node is an "execution socket" and can be connected an action, which will be executed whenever the event is triggered.

Sockets

Every node in the system has one or more sockets.
Sockets are used to connect nodes for the following reasons:

  1. Execution sockets: Attach the next node in a flow.
  2. Input / Output sockets: Get a value / Set a value in nodes.

Connections

Sockets can be connected by dragging and dropping from one output socket to one input socket and vice-versa.

Common Socket Types

A White socket is an execution socket.
Nodes connected by it form a flow.
Each node is executed in turn.
Actions such as "Set Local Position" and "Look At" are called one after another until the last node in the chain (flow) is executed.
A Light Blue socket is an object socket.
It is used to reference an object in the scene.
Input object sockets can also be initialized with a selected object.
By clicking the "Select object" button you can define the object used as input.
A Magenta socket represents an object's transform.
Transforms are used to control and manipulate the object's position, rotation and scale.
Light Green and Green-Yellow sockets represent 3d and 2d vectors.
Input vector sockets can also be initialized with x, y and z values.
The Dark Red (Text), Purple (Boolean), Brown (Color) and Yellow (Number) are also common in basic flowgraphs.

Basic UI Controls

Panning by dragging the right mouse button

Selecting nodes by dragging the left mouse button

Moving nodes by dragging them

Deselecting by clicking the background

Zooming in and out by using the scroll-wheel

Designing a basic flow graph

  1. Create a new project, select the Image target template.

Adding a node to the graph

  1. In the Nodes section, expand the Transform category and drag & drop the Rotate node.
  2. Connect the "On Update" event's output execution socket to the Rotate's input execution socket.
  3. Press on the Transform input socket within the Rotate node and drag outside, then release. The flowgraph editor will show you node suggestions that are suitable for this socket. Select "Get Transform".
    The Get transform node requires an object input, leave this object blank (aka "select object").
    This will cause the Get transform node to reference the object which this flowgraph component will be assigned to.
  1. In the Nodes section, expand the Math category and drag & drop the Multiply node.
  2. Connect the "Delta Time" number output from "On Update" to the "A" number input on "Multiply".
  3. Set "B" on "Multiply" to 30 and connect the "Result" number output to "Degrees" within "Rotate".
  4. Edit the "Axis" on the "Rotate" node, set "Y" to 1.
  5. Set "Space" to "self".
    This will cause our object to rotate 30 degrees per second on its local Y axis

Assigning the flowgraph to an object in the scene.

Select any cube.

Click Add Component in the Object Details panel and select the flowgraph component.
Click "Add Existing Flowgraph" and assign the flowgraph asset you've previously created.

Hit Play in the AR Studio to see the cube spinning.

Since we've made a generic flowgraph that rotates the object that references it - We're able to repeat this step and assign the same flowgraph asset to all the other cubes in the scene (Add flowgraph component etc..).
This will result in all the cubes spinning when the AR experience is played.