Unity's UI Toolkit & UI Builder: What is It, and How Do You Make It Work ? - Space's Aces Devlog #03

Today, as fall is in full swing, I take a deep dive into Unity's new UI Toolkit & UI Builder that comes packaged with Unity 2021.2 and learn how to create professional UI with ease in a short amount of time. Significantly improved over the old GUI system, this new system uses web technologies similar to HTML, XML, and CSS. In Unity, these are referred to as UXML, and USS. This Space's Aces Devlog is designed to be a quick exploration and example of how to use UI Toolkit, and should hopefully act almost like a tutorial. It contains useful snippets of code, detailed explanations of systems, and practical outcomes.

Ultimately, this video should help you learn how to make it work for you.

Chapters:
0:00 Relaxing Moment
0:20 Introduction to UI
2:42 Learning Goals & What is UI Toolkit?
4:41 UI Builder & Style Sheets
7:57 Control UI Toolkit with MonoBehaviour
11:57 Code with VisualElement
17:03 PseudoClasses
19:35 Transitions & Animation Classes
22:23 Final Thoughts
23:23 Outro

[holtfirstable]

Wow - instant subscribe. A video on Unity UI has no business being this pleasant. I love the style, and the delivery, and the shots of plants and coffee. Thanks for putting so much work into it!

[KookaNova]

While taking my time to enjoy fall, I've also been diving into Unity's new UI Toolkit. Hopefully, this will help anyone seeking to learn the new system bypass the few weeks of trying to understand it with little help that I had to do.
And if you come across this, I hope you're having a good day.

[shenko]

Best UI toolkit video I've found, subscribed

[StellarMirage]

This is better than any other tutorial on yt. Subscribed on the first go

[sayama]

You're actually one of the best tutorial (even if, indeed, it's not a tutorial) that helped me the best to understand how to use the UI Toolkit / UI Builder. Thanks a lot!

(So it goes without saying, great video !)

[BrandanLee]

I'm in the process of moving my entire canvas system UI for a very complex game over to UI Toolkit, and this has been quite helpful! Thanks!

[arne]

Pro tip: Take a course on html and CSS, and you will instantly master this new UI Toolkit :D Such a great feature, one that i have been requesting for Unreal Engine to implement for years now.

[blitzkreig]

Excellent Video. Does help to understand the power of UI Toolkit. The switch is a no brainer for me after this one.

[Lizby]

Please never stop making videos 😭 this is incredible and so helpful ❤

[BritBox]

The best video on the UI Builder on Youtube, far as I can tell. Didn't even know Builder was a thing until this week. T

[RossYlitalo]

Very thorough overview of the UI Builder -- Thank You Very Much!

[cklaffer]

Thank you, very helpful and good luck on getting your post processing glow effects right.

[thefunnyguy]

Omg! Why does it have so few views? This is so helpful video!

[stealcase]

This is an excellent overview!

My main struggle has been practical examples of how to link Unity Toolkit UI to code, and this has given me the confidence I need to tackle it.

[pedrobelluzzo]

I've just writen my entire menu navigation with the old system without even knowing about this, but now... oh boy... better to make some coffee.

[RoffeDH]

Thank you, will try this tomorrow, it feels exactly like what I have been looking for in how to manage different menus in this new UI Toolkit.

[seang]

Excellent video! Thank you for putting all of this together as it saves me a lot of time of trial and error. This gives me a leg up for learning the new UI Toolkit. Will read through the docs as you suggested, but I needed to get a UI together quickly and all of the information you went over covered everything I need right now.

[keharacek]

Ah, seeing the UI toolkit for the first time but it really feels like home after working in a web development industry for a while now. Thanks for the video!

[happyfarang]

Nice video. I will play with it for sure. My next project will be near 100% UI. It looks like this will solve many of the pain points of the old UI system. I just need to figure out how to populate the UI dynamic from lists of classes and what have you and instantiate new elements as needed but I have a feeling it won't be too much of a pain point. I will poke around with it for sure :) Thanks for the inspiration!

[Bruce.B]

Thanks for this video! As a web designer and CSS lover, I was very excited for this new system since they announced it. But I have been hesitant to start using the new system because of the lack off tutorials and guides on it. This is a great video for getting into it.