Creating a Custom Storyboard Hook For UI.Toggle

In this tutorial, we will add support for Toggles in storyboards, which will allow us to use a toggle in a storyboard to trigger a transition to another canvas controller. This is done by creating a Custom Storyboard Hook and should hopefully serve as a good example for creating custom storyboard hooks for other components, such as custom button types, too.

To illustrate, the transition shown below was configured in a storyboard and is being triggered by a UI.Toggle being switched on.



Create a new storyboard hook

Begin by creating a new storyboard hook script. This is done by selecting Create/Canvas Flow/Storyboard Hook in Unity's Create menu, found in the menu bar at Assets/Create or by right-clicking in the project window.

This will create a new script at the specified location, with three methods for us to implement.

Specify the Auto-Add type

Firstly, let's implement the AutoAddComponentType method. We want our hook to be automatically added to any Toggles in our UI, so we can return the Toggle type here, like so:

public override System.Type AutoAddComponentType
{
    get
    {
        return typeof(UnityEngine.UI.Toggle);
    }
}

Implement the Reset & Connect methods

We now have two remaining methods left to implement - Connect and Reset. In our Connect method, we need to connect the provided invokeTransition action to our toggle so that when the toggle is switched on, the storyboard transition is triggered. Therefore, we first need a reference to our Toggle component. We can obtain this reference in the Reset method and store it in a public field on our component (so it gets serialized by Unity), like so:

public UnityEngine.UI.Toggle toggle;

protected override void Reset()
{
    // Always call base.Reset() when overriding Reset() in a custom hook.
    base.Reset();

    toggle = GetComponent<UnityEngine.UI.Toggle>();
}

Great, so now let's write the code to attach the transition callback to the toggle in the Connect method.

public override void Connect(System.Action<StoryboardHook> invokeTransition)
{
    toggle.onValueChanged.AddListener((isOn) =>
    {
        if (isOn)
        {
            invokeTransition(this);
        }
    });
}

Here we attach a callback to our toggle's onValueChanged event. Notice here how we are observing the toggle's isOn property. If the toggle has been switched on, we will invoke the storyboard transition. Otherwise, if it has been switched off, we will ignore it.

And that's it!

Use it

Now, if we add a toggle element in a canvas controller, like so…

… the toggle is available to use in a storyboard!

Which, when connected, causes our transition to be invoked when the toggle is switched on but not off, like so:


The above video uses the built-in Scale And Fade animator, as well as the KeepPresenterVisible setting on the transition.

And that's all that is required to implement a custom hook for UI.Toggle!

Source

For reference, the entire storyboard hook file we just created looks like this:

using P7.CanvasFlow;

public class ToggleStoryboardHook : StoryboardHook
{
    public UnityEngine.UI.Toggle toggle;

    protected override void Reset()
    {
        // Always call base.Reset() when overriding Reset() in a custom hook.
        base.Reset();

        toggle = GetComponent<UnityEngine.UI.Toggle>();
    }

    public override System.Type AutoAddComponentType
    {
        get
        {
            return typeof(UnityEngine.UI.Toggle);
        }
    }

    public override void Connect(System.Action<StoryboardHook> invokeTransition)
    {
        toggle.onValueChanged.AddListener((isOn) =>
        {
            if (isOn)
            {
                invokeTransition(this);
            }
        });
    }
}