uGUI or UI-toolkit?

So I’m about to embark in some serious optimization, I’ve got benchmarks up the nose with pretty much every other aspect of Unity so I’m asking the community what their experience is with this new UI.
How does it compare with uGUI in term of usability, code binding and performance? With the WISIWIG builder, I ain’t touching css.
And does it run on the Switch in URP?

Well so far my experience with UI Toolkit (previously known as UI Elements) has been really useful for Editor UI. I would love to use it for Runtime but I wouldn’t say it is production ready, by far.

  • Unity 2020.1 is still in beta
  • UI Toolkit doesn’t have feature parity with UGUI yet
  • UI Toolkit is in preview (and I think it is even hidden from the package manager)

I can’t tell that much about runtime usage other than it just isn’t ready for it yet. I’ve tried it out a little bit to just conclude it ain’t ready yet. We require world space, grid and also a nodegraph which aren’t implemented yet.

As for Editor usage, I’ve built quite some tools out of it and I love the way of binding code with the UI.
If I were to compare that to UGUI then UGUI has been a pain to work with. We have a very complex project that is 99% UI based. Binding the many elements with many conditions has been far from easy.

If you’d want some experience with UI Toolkit I’d suggest by start building Editor tools to get a feeling of how it works.
But for runtime, I’d stick with UGUI for now and keep it simple so that an eventual conversion to UI Toolkit will be quick and easy.

1 Like

alright thanks @MaskedMouse I’ll stick to it

Either way have a look at this post:

This is the first of many versions of the preview package that we’ll be releasing throughout the year. In the upcoming months, we’ll be improving workflows, performance, and documentation, with the goal of shipping a pre-release version for 2020.2 by end of year.
In 2021.1, the UI Toolkit that ships with Unity will be considered production-ready. We’ll continue to make the preview package available to give you early access to features in development.

1 Like

UIT Runtime has like 5% of the functional the Editor part has. And even that functional has like 7% of what css offers.
UnityUI or IMGUI-based solutions is currently the only option if you want something substantial.

1 Like

@laurentlavigne you can take a look at this manual page for a comparison between UITK, UGUI and IMGUI: Unity - Manual: Comparison of UI systems in Unity

For runtime usage on consoles, I would agree with @MaskedMouse , and rely on UGUI in the 2020 cycle.

1 Like

3/3 say stick to ugui, I’ll do that.
@etienne_unity I’d like to start seeing a performance table and a workflow table.
uGUI for example is a pleasure to design UI in, no idea about uitk, imgui is a nightmare

@laurentlavigne the Workflow tables are here for UGUI and here for IMGUI, let us know if you’d like more details.

Performance is trickier to compare, as the 3 systems are quite different… we don’t have hard numbers to communicate just yet.

1 Like

I see wisiwig for the new one, that’s cool, got a video of the editor running? Or simpler: does it function like uGUI?

ok maybe some of us can inspire real life benchmarks and you can come up with a standard. I’ll start:

  • 100x world to screen transform with health bar composed of one black background rectangle and one green to red foreground rectangle
  • 100x 128x128 buttons on a static black background, then on an animated background
  • 100x animated gizmos on a static black background, then on an animated background
  • 100x text blocks of 128x128 on static then animated background

Things have improved since then but this should give you an idea of what the authoring workflows look like:

[quote=“laurentlavigne, post:9, topic: 801142, username:laurentlavigne”]
ok maybe some of us can inspire real life benchmarks and you can come up with a standard.
[/quote]

Thanks for those, we’ll expand our benchmarking tests.

1 Like

Those are meant for the documentation - to help us choose

That’s interesting, so you have an extra hierarchy view embeded and everything is a style, loving how you can change the look of all buttons with a few clicks and live. Did you end up borrowing uGUI excellent anchor menu in more recent drops?

UI Toolkit uses a layouting library borrowed from the web called flexbox. You have (USS) style properties like Align Items and Justify Content, and you can use these in combination to achieve the same behavior as uGUI Anchoring.
6123950--667445--upload_2020-7-23_16-46-15.png

For now, as you can see above, these properties are promoted directly in the UI Builder (with some icons at least). We are working on abstracting them further to create a more intuitive Anchoring system, but it will never be identical to uGUI. It’s important to note that UI Toolkit is not attempting to recreate uGUI and that it’s a fundamentally different approach to UI authoring, styling, and layouting. We will adopt similar workflows where it makes sense.

Here’s a visual intro guide to flexbox layouting:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 Like

Is it intended to be a superset of uGUI in term of layouting and performance?

Yep. UI Toolkit is where Unity is investing for its UI solution going forward. As such, it will catch up and surpass uGUI over time, both in terms of workflows and in terms of performance.

That’s a tall order and with the certain track record with promises, I’ll believe it when I see it.

3 Likes

I believe it certainly will surpass uGUI at some point. So far I really love UI Toolkit. The only thing missing for me is it being on par with all uGUI features. Theres no grid component (hopefully a GridView), no world space canvas, a NodeGraph, 2-way binding(?).
I can imagine people wanting to use Editor UI for Runtime UI as well. UI Toolkit closes that gap quite a bit since the tool can be used for both Editor & Runtime UI. whereas currently it is uGUI for runtime and IMGUI for editor. 2 completely different ways of setting up UI.
How awesome would it be if you could just drag drop a Color Picker and use it in Runtime as well as the Editor?

One of the things that made my life a lot easier is the ListView. I love the way of binding data. A simple List, a MakeItem and BindItem method. And it should be more performant as well as the List is only rendering the in view parts and not the entire list. Something uGUI does not do out of the box, even a bit difficult to get in as well. Large lists with complicated items are just not performant.
Also one of the big advantages is UI and Programming can be done separately. Which is a huge deal. Normally with uGUI you’d work in the Scene, adding events to buttons. And the programmers have to create all kinds of scripts and they have to be attached to the uGUI GameObjects. Even do lots of management at a higher level of the UI, which is tedious. Whereas in UI Toolkit you name the element and the programmer queries for that element name to bind it. The only bridge in between a UI designer and UI programmer are the element names and a bit of functional designs of what it should do.

So yeah I hope development accelerates quite a lot for feature parity with uGUI and stability. As I am super excited to actually be able to use this at runtime. But like I said before, it just isn’t ready for production just yet. I’ve been working with uGUI since it got released and UI Toolkit is a great relieve.

5 Likes

? show me what you mean.

UIT is super promising. I like how you focus on how good instantiation and binding are, so important so I’ll keep my finger on the pulse of this project and see it doesn’t get the UNET (etc…) shafting.

1 Like

A node graph like the Shader Graph

I have made a tutorial about UI Toolkit for Runtime :]
Creating a runtime interface of a simple game, using UI Toolkit - UIElements.

Check it out here:
forum.unity.com/threads/course-tutorial-ui-toolkit-for-runtime-new-unity-ui-framework.1016665/

2 Likes