UI Toolkit + UI Builder runtime UI tutorial

We’re still working on documentation for runtime. For now, that demo is the main example I can point to.

As for TitleSceenManager, it’s a custom VisualElement that implements the logic for the screen transitions. If you look at TitleSceenManager.uxml:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
    <ui:Template name="TitleScreen" src="TitleScreen.uxml" />
    <ui:Template name="Options" src="Options.uxml" />
    <ui:Template name="About" src="About.uxml" />
    <UnityRoyale.TitleScreenManager class="screen">
        <Style src="TitleScreenManager.uss" />
        <ui:Instance template="TitleScreen" name="TitleScreen" class="screen" />
        <ui:Instance template="Options" name="OptionsScreen" class="screen" style="display: none;" />
        <ui:Instance template="About" name="AboutScreen" class="screen" style="display: none;" />
    </UnityRoyale.TitleScreenManager>
</ui:UXML>

You’ll see that it is creating a TitleSceenManager element and putting the 3 screens as children of this element (which themselves are UXML instances). Then, in TitleScreenManager.cs, we investigate what child elements we have and treat them as screens - looking for specific elements like buttons that we need to facilitate the screen transitions.

For more info on custom VisualElements and what that UxmlTraits/UxmlFactory is for, see:

1 Like