Unity UI Toolkit is better than expected

Reading Time: 6 minutes

Introduction to Unity’s UI Toolkit

Unity’s UI Toolkit is a new, open-source UI framework that provides a flexible, easy-to-use system for creating user interfaces in Unity. The toolkit has been developed with the aim of offering developers and designers a modern and efficient tool. And a way to create user interfaces for their games and applications. The Old UI System was out of date, and not much was seen in terms of progress. So the focus was to create a worthy replacement.

The UI Toolkit was introduced as a “Beta” in Unity version 2019.3 as a separate package. Later in 2020, it was part of the standard Unity packages suite.

Overall the tool consists of 3 stages of writing code for the UI.

• UXML
• USS
• Bindings

UI Toolkit also has a Visual Editor to modify all components without looking at the code, UMXL, or USS files.

UI Toolkit is still considered a Beta despite 4 years of development already in 2023.

Pros and Cons of Unity’s UI Toolkit

The Unity UI Toolkit offers many benefits over the traditional Unity UI system. Firstly, the UI Toolkit uses a declarative syntax that makes it easier to read, write and maintain code. This makes it easier for designers and developers to work together to create a beautiful and functional user interface.

UXML is similar to other technologies like HTML, and C#‘s XAML format.

USS is a subset of CSS that provides very poor support for common web tags and complicates everything by promoting long attribute names like unity-text-overflow-position instead of following common patterns that would drop the unity part.

Another advantage is that the UI Toolkit is highly modular and customizable. The toolkit provides a variety of components and features out of the box. But lacks in-depth support for anything more complex than rounded borders and text. It’s also very frustrating if Developers want to add their own functionalities as the whole core of the UI Toolkit is closed, and most of the methods and classes are marked as internal.

The UI Toolkit also offers improved performance over the old UI system. The toolkit uses a highly optimized rendering pipeline that is specifically designed for UI elements. It doesn’t use Unity’s Game Objects for rendering which are known to have a significant overhead. It instead provides GameObject as an entry point and then continues from there using plain old objects without any heavy dependencies.

Pros	Cons
Performant	Closed-Source
Similar XML, CSS syntax	Limited attributes and odd naming
Modularity and Customizability	Lack of common functionalities of HTML renderers
	No support for runtime code inside UXML

Unity Inspector

As of the last year 2022, the UI Toolkit is a recommended way of writing custom Inspectors!

This means that we can write proper editor inspectors using the latest and greatest Visual Elements, and we can abandon the old way of IMGUI.

UI Toolkit vs Unity UI vs IMGUI

As of today there are still significant features missing form UI Toolkit that are required for some games. I guess that they will be added in the near future, but for now we lack support for a few key elements.

I have used the elements provided by Unity own’s website but given them a truly fair valuation. As UnityUI is falsly rejected as worse in theirs comparasion where it can do almost everything and more then UI Toolkit.

2023	UI Toolkit	Unity UI	IMGUI
WYSWIG	Yes	Yes	No
Nesting reusable components	Yes	Yes	No
Global style management	Yes	Yes*	Yes
Layout and Styling Debugger	Yes	Yes	No
Scene integration	Yes	Yes	Yes
Rich text tags	Yes	Yes (req. TMP)	Yes
Scalable text	Yes	Yes (req. TMP)	Yes
Font fallbacks	Yes	Yes (req. TMP)	Yes
Adaptive layout	Yes	Yes	Yes
Input system support	Yes	Yes	Yes
Serialized events	No	Yes	Yes
Visual Scripting support	No	Yes	No
Rendering pipelines support	Yes	Yes	Yes
Screen-space (2D) rendering	Yes	Yes	Yes
World-space (3D) rendering	No	Yes	Yes
Custom materials and shaders	No	Yes	No
Sprites / Sprite atlas support	Yes	Yes	No
Dynamic texture atlas	Yes	Yes*	No
Textureless elements	Yes	Yes*	Yes
UI anti-aliasing	Yes	No	Yes
Rectangle clipping	Yes	Yes	Yes
Mask clipping	No	Yes	Yes
Nested masking	Yes	Yes	Yes
UI transition animations	Yes	Yes*	Yes
Integration with Animation Clips and Timeline	Yes	Yes*	Yes
SVG Support	Yes	Yes	No
OnGUI	No	No	Yes
Editor	Yes	No	Yes

Yes*) There is no official support but it’s possible using custom methods that do nor require mutch effort to implement.

I would want to jump into the details of each point where UI Toolkit has a No and where Unity UI has a Yes with an asterisk.

Serialized events

Because UI Toolkit lacks support for old Unity’s Inspector preview of elements there is nowhere to connect an event. This is also because the UI Builder only have generic connection and everything else has to be binded manualy. This can obviously be provided by a custom binding via MonoBehaviour, but it’s “Not the intended way”

Example binding:

    private VisualElement _element;
    public UnityAction OnClick;
    
    void Bind(VisualElement element)
    {
        _element = element;
        _element.RegisterCallback<MouseDownEvent>(evt =>
        {
            OnClick?.Invoke();
        });
    }

Visual Scripting support

I don’t think there is mutch to say here, and I think UI System might not get Visual Scripting support any time soon. It’s just the way Visual Scripting works I don’t think Unity will implement it into UI Toolkit.

World-space (3D) rendering

This is just a shame, that this is not yet supported. A very basic feature of any GUI is to have it rendered on things in 3D! This is still possible to have it rendered somewhere, via RenderTexture, but it will not accept any events. This is very unfortunate. And as of right now, because the code behind events, clicks and inputs is internal. We can use slooow reflection system or go back to Unity UI for that.

Custom materials and shaders

Another poor decision was to make Visual Elements rendering system internal. Imagine you have a taks to underline the text in your game, for better visual effect. In UI System you would write a custom shader and viola! Here it’s currently not possible.

When I Investigated the source code of the new UI, it was definetly possible to add it. They internaly use simple rendering system that also uses shaders and materials for rendering. Even for some effects! Like borders and rounded edges!

Yet! We are waiting for Unity team to make it public so that advanced users can take the whole UI for the spin…

Dynamic texture atlas and Textureless elements

UI System by Unity’s own website doesn’t support Dynamic Textures and Textureless elements. It’s not true!

First, it is supported, you just need to write 2 lines of the code to do that. Here they are…

var image = GetComponent<Image>();
image.sprite = your other sprite;

Obviously this is not that easy in reality but that support was always there. And there are countrless packages on the Asset Store that will support you in your dynamic texturing.

As for the Textureless elements they probably mean that they have borders and rounded edges that do not require a special texutre to get this effect. Again there are countrless textures packs and shaders to support that for the UI System.

Mask clipping

Clipping in general is expensive operaiton in UI System, and it can completly disable optimization on on all elements like, batching, stenciling, GPU instancing etc. So I guess they didn’t add it to Visual Elements renderer so that it make it proper this time around. To not hinder the performance of their new system.

UI transition animations and Integration with Animation Clips and Timeline

All of those are supported via all unity UI systems. Sad thing is that not all elements can be modified from those tools. So I would say limmited but the basic support is definetly there!

OnGUI

Not want to say that OnGui method was a proper implementation and not how you should do UI in your game, but it’s usefull tool nontheless for the development. I would be missing it in the official implementation as the Visual Elements, Yoga Flex box system is just superior to Gui.Layout.

Editor

I’m very happy to see this transtion into the editor that uses Visual Elements, we will touch on it a bit more in the future. But it’s a blessing from the sky. Making custom inspector no longer requires third party tools.

Conclusion

I do not want to say that UI Toolkit is all bad and stinky, but it’s not a tool that is a proper replacement for UI System. Yet. With NGUI abandoning their product we are left with nothing that could be usefull…

Unless we would go directly into some more exotic technology when it comes to rendering and see if JavaScript land has something to offer…

If you are familiar with JavaScript or TypeScript and React components I would skip intermidiete part of switching form UI System to UI Toolkit and went straight to React Unity. This great tool eliminates some of the headakes of the new system, and provides a solution for them. At the moment it lacks documentation but the Author is very helpful and outsourcing your development of UI to Web Developers always seemed like a good idea!

In next blog posts we will explore on how to use React Unity in your projects, as well as on how to implement easy replacement for Odin Inspector in not paying a dime 🙂