Storyboard Nodes

A storyboard node represents a single instance of a canvas controller in the storyboard. Nodes can then have connections made between them, called transitions, which define the flow of your user interface.

Adding Nodes

To add a node to a storyboard, simply drag the canvas controller's scene file onto the storyboard window, as shown in the video below.

Alternatively, you can use the '+' button in the lower-right corner of the Storyboard Editor window to select an existing canvas controller in the file inspector.

Adding a canvas controller to a storyboard with drag & drop.


Node Details

A node represents a single instance of a canvas controller in the storyboard. It will display any hookable elements - such as Unity's UI Buttons - in the canvas preview area of the node, as shown below. A hookable element is one that a transition can be created from, in order to present or dismiss a canvas controller.

A node's canvas preview area displays its 'hookable' elements, such as the pause button shown here.

Note: The canvas preview area is sized according to the Canvas Scaler's reference resolution. See the canvas controller's canvas object for more information.

By default, all Unity UI Buttons are supported as hookable elements in a storyboard. This means that any UI Buttons in a canvas controller can be used in a storyboard to trigger a transition to another canvas controller. To support additional UI elements, such as a custom button type, please see the Custom Storyboard Hooks section of the manual.

When a canvas controller's scene is saved, all hookable components have a Storyboard Hook added to them, causing them to be displayed in the canvas preview area. A storyboard hook can be excluded from a storyboard by selecting the Exclude From Storyboard flag on the hook in your canvas controller's scene.

Exclude a hook from a storyboard.


Additionally, the automatic adding of StoryboardHook components can be disabled in Canvas Flow's preferences by unchecking 'Auto-Add Hooks On Scene Save', found in the menu bar at Unity/Preferences/Canvas Flow.