Storyboard Transitions

Storyboard transitions define the flow of nodes in the storyboard. A connection from one node to another represents a transition between those two nodes - a presentation or dismissal. The hook from which the transition originates defines the trigger for that transition.

Direction

All transitions in a storyboard have a direction, which can be one of two values - downstream or upstream. A downstream connection is equivalent to a presentation and is represented by a  blue  color. An upstream connection is equivalent to a dismissal and is represented by an  orange  color.

A downstream transition (presentation) from the menu to the settings screen and an upstream transition (dismissal) from the settings screen back to the menu.

Creation

To create a transition between two nodes, drag from the source node's hook to the destination node, as shown in the video below. Canvas Flow automatically detects the direction - downstream or upstream - based on the current state of the flow graph.

Creating transitions between nodes.


Note: An upstream transition, or dismissal, is created when a connection is made in which the destination node has a downstream path to the source node. Therefore, to create an upstream transition a downstream path between the nodes must exist.

Configuration

A transition's properties can be configured by selecting its origin hook. This will open the transition inspector, which is shown below and followed by a description of each property.

The transition inspector.

Property                 Description
Hook Name The name of the hook that will invoke this transition. This is taken from the game object that the hook component is attached to in the canvas controller.
Animated Is the transition animated?
Custom Animator The transition's animator. For more information, please see the transition animators section of the manual.
Presentation Mode The presentation mode of the destination canvas controller (only available on downstream transitions). Please see presentation mode for more information.
User Identifier The transition's user identifier. This is used to identify the transition when triggering it manually, such as with a manual transition.
Load Asynchronously Should the canvas controller be loaded asynchronously? By default, canvas controllers are always loaded asynchronously.
Override World Position Specify a world position at which to place the loaded canvas controller. This can be specified as an absolute world position with the 'Position' setting, or as a spacing multiplier with the 'World Spacing Multiplier' setting. If 'World Spacing Multiplier' is selected, the world position for the new canvas will be the source canvas' world position plus the canvas size scaled by the multiplier.

Passing Data Between Canvas Controllers

When a transition occurs in a storyboard, the transition's source canvas controller will have its PrepareForStoryboardTransition() method called, passing in a StoryboardTransition.

This gives an opportunity to pass data between canvas controllers, just as you might use a configuration action when presenting a canvas controller from script.

For example, in Canvas Flow's Floaty Cube example, the menu canvas controller uses the PrepareForStoryboardTransition() method to detect when the loading screen is being presented and to configure it with the name of the scene to load, like so:

public override void PrepareForStoryboardTransition(StoryboardTransition transition)
{
    var destination = transition.DestinationCanvasController();
    if (destination is FCLoadingCanvasController &&
        transition.direction == StoryboardTransitionDirection.Downstream)
    {
        // We are presenting the loading screen. Configure it to present the Game scene.
        var loadingCanvasController = (FCLoadingCanvasController)destination;
        loadingCanvasController.SceneToLoad = "FCGameScene";
    }
}

Manual Transitions

Manual transitions are transitions that have no origin hook - i.e. they must be triggered manually. These can be used to invoke a storyboard transition in response to non-UI events, such as a collider being intersected or a timer expiring.

To create a manual transition, drag from the source node's 'Manual Transitions' element to the destination node and enter a user identifier, as shown in the video below.

Creating a manual transition between nodes.


To trigger a manual transition, call PerformTransitionWithIdentifier() from the source canvas controller, passing in the transition's userIdentifier.

For example, in Canvas Flow's Floaty Cube example, an event is raised when the player reaches a target height. The game overlay screen subscribes to this event, and in the callback it triggers its manual transition named "PresentGameCompleteScreen", like so:

public void OnPlayerReachedHeight()
{
    PerformTransitionWithIdentifier("PresentGameCompleteScreen");
}

Note: Any storyboard transition - not just manual transitions - can be triggered by passing its User Identifier to PerformTransitionWithIdentifier().

Entry Transition

When the first canvas controller is added to a storyboard, an entry transition pointing to the new canvas controller is automatically created. This is shown by the blue wire connecting the 'Entry' node to the newly-added canvas controller.

The storyboard's entry transition.


The storyboard's entry transition determines which canvas controller is presented when the storyboard is presented - i.e. the storyboard's entry point. To change the storyboard's entry point, select the 'Make storyboard entry point' button on the canvas controller's node, as shown below.

Set a storyboard's entry point.


Note: A node can only become the entry point if it has no downstream transitions pointing to it. Similarly, if a node is the entry point, a downstream connection cannot be made to it.

The entry transition can be configured just like any other transition, as described above, with the exception that it cannot be deleted; a storyboard must have an entry point.

Exit Transition

A storyboard exit transition is optional and is not always required. It is used in the event that you want to dismiss the entire storyboard. It will dismiss all canvas controllers that are in the storyboard's initial canvas controller's presentation hierarchy, including the initial canvas controller itself. It is the equivalent of calling DismissAllCanvasControllers.

To create an exit transition, drag from a hook or manual transition element to the Exit Transition node.