UI Toolkit + UI Builder runtime UI tutorial

[shosanna]

Hello,
We started to use UI Toolkit together with UI Builder for our runtime UI for our upcoming game. I was really struggling with even simple things, like how to display it, but anyway, figure out most of the stuff eventually (also with the help of this forum!).

https://loglog.games/2020/09/27/unity-ui-toolkit-first-steps/

This is a very practical beginner tutorial for the first steps of UI Toolkit + UI Builder setup. I would be grateful if you would give me your feedback as well as if you have links to some other tutorials so that I can improve my skills. I really love this setup and will for sure continue to be using it.
Thanks!

[SimonDufour]

Hi Shosanna,

This is a great walkthrough of everything there is to be done in the context of a quick start!

With the newest version of unity (2020.2), you will not (yet) find the packages in a list as they are not verified and this may confuse peoples. But I really like that you pointed to the right page in the documentation as the worst case is people open it if they have a question.

The base is solid and the only basic thing I could think of adding is the flex-direction, and flex-grow to help with the structure as most beginner will try to go for an absolute layout that will not adapt to different resolution and will be hard to adjust on the long run.

To continue your blog with more advanced topic, you could look into :

• How to embed one uxml into another one using the builder for reusing component instead and more modularity. Maybe event introduce templates.
• Like you said, you are not doing a pure css course, but maybe go over a few css part that are custom to this system (starting with unity-* ) or that you use frequently.

Don’t hesitate to ask questions on the forum and to let us know when you have update to your blog

[jGate99]

@shosanna

Hello,
We started to use UI Toolkit together with UI Builder for our runtime UI for our upcoming game. I was really struggling with even simple things, like how to display it, but anyway, figure out most of the stuff eventually (also with the help of this forum!).

https://loglog.games/2020/09/27/unity-ui-toolkit-first-steps/

This is a very practical beginner tutorial for the first steps of UI Toolkit + UI Builder setup. I would be grateful if you would give me your feedback as well as if you have links to some other tutorials so that I can improve my skills. I really love this setup and will for sure continue to be using it.
Thanks!

Hi Just wanted to say Thank you
And it’d great if you can write more tutorials like that as we all need them

[system]

@shosanna , thank you so much for this, and for explicitly stating “We are building UI for runtime” in your blog post. I want to try using UI Toolkit for the runtime GUI in my application, and I have been incredibly frustrated trying to find resources which apply to runtime instead of the editor. I was close to giving up on UI Toolkit for a little while until more resources were available; but I think you have now pointed me in the right direction and I can give this a shot.

[Ng0ns]

I can see that you do the binding in the Overlay.cs as a monobehavior. What I don’t get is how its done in the UnityRoyale demo. In that demo, e.g. the TitleSceneManager.cs isn’t referenced within the scene, but rather its an VisualElement which seems to be called when editor compiles. No [ExecuteInEditMode] etc…

[Ng0ns]

Ah, the coin dropped literally as I pushed post reply.
Creating a C# script inheriting from VisualElement makes it usable as a custom control within the UIBuilder.

[uDamian]

The attempt in the UnityRoyal demo is to approach UI bindings in a way that maximizes separation of concerns. In that demo, going between main menu “screens”, like Settings and About, has no impact on game play so the idea is to keep all of that logic entirely on the UI side, using custom VisualElements. Only bring in UI into the GameObject world when you actually need to bind the UI to game logic.

[tacman1123]

@uDamian

The attempt in the UnityRoyal demo is to approach UI bindings in a way that maximizes separation of concerns. In that demo, going between main menu “screens”, like Settings and About, has no impact on game play so the idea is to keep all of that logic entirely on the UI side, using custom VisualElements. Only bring in UI into the GameObject world when you actually need to bind the UI to game logic.

Is there documentation about this approach? In particular, I’m not seeing where the relationship between TitleScreenManager.cs and TitleScreenManager.uxml is set.

Also, I’m not sure what the first few methods do and how to implement them in my own menu.

        public new class UxmlFactory : UxmlFactory<TitleScreenManager, UxmlTraits> { }

        public new class UxmlTraits : VisualElement.UxmlTraits
        {
            UxmlStringAttributeDescription m_StartScene = new UxmlStringAttributeDescription { name = "start-scene", defaultValue = "Main" };

        public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
            {
                base.Init(ve, bag, cc);
                var sceneName = m_StartScene.GetValueFromBag(bag, cc);

                ((TitleScreenManager)ve).Init(sceneName);
            }
        }

[uDamian]

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:

UI builder and custom elements

Yep, you can do that by inheriting from VisualElement. You can then define a UxmlFactory inside your element class to expose it to UXML (so you can create it with a tag with same name as you C# type). And you can define a UxmlTraits class to add custom attributes that you can then set in UXML. These custom attributes will then be exposed in the UI Builder inspector, like Text, Binding Path, Name, etc. (in your screenshot). Here's a full example of a custom element and some UXML attribute declara…

[zhaoxin2022]

I am a newbie in unity but I am trying to develop 2D game using Unity, have been developing a 2D game for 2 months.
I figured out the UI Builder that supports creating beautiful and responsible UI, which is available from unity 2020.2x+.
I want to create demo project on my side, but I couldn’t find appropriate guide that I can follow to.
So, hope to get a tutorial (not video) that contains the code and explanation step by step.