Making UI for Games with UI Toolkit ~ Unity 2022 Beginner's Guide to UI

Learn how to set up a UI built with UI toolkit for use during gameplay. This tutorial shows the creation of the UI document, basics of stylesheets styling, how to query UI visual elements, and how to create an event callback on button clicks with UI toolkit UIs. Video is meant to be a introductory guide for beginners.
Scripts and Assets ➣ / 76314316
➣ Downloadable Assets, Video Courses, and Other Places to Follow Me
/ christutorials
chris-tutorials.itch.io/
linktr.ee/ChrisTutorials
◢ Chris Recommends ◥
Master Skills with Skillshare Video Courses ►► www.skillshare.com/r/user/chr...
Save Money Shopping Online with Honey Extension ►► joinhoney.com/ref/qd04c25
00:00 - What to Expect
00:16 - Scene Setup
00:45 - Make UI Document
01:12 - UI Builder Window
02:10 - Making a Unity Stylesheet
03:21 - Stylesheet Class Targeting
04:51 - Show UI Document in Game
06:52 - Creating a Button Child UI Document
08:58 - Writing a Button Click Event Callback
13:24 - Wrapup

[@RossYlitalo]

Thanks Chris! I really appreciate your practical, no-nonsense putting the "rubber on the road" approach to this new topic! I subscribed and I hope to see more from you!

[@Iwanezp]

Great tutorial, very simple but at the same time very clear as to how it works. I've spent a lot of time in web development and that system makes me feel like in home. Many thanks

[@supersuper2]

Excellent tutorial and overview! Unity UI in general seems like such a black box so am happy to see more content covering it. Would love to see more about how UI Toolkit links up to the code and ways of dynamically filling in UI content. Thanks so much!

[@happyfarang]

what do you need the canvas for? isn't the point of UI toolkit to not use the old canvas system? Or am I missing something vital?

[@palanolho82]

Was about to ask the same question. Any idea?

[@sebastienalbert6159]

You don't need canvas AT ALL!
The point is to replace UGui with UiToolkit...

[@mybadstudios]

I was wondering that same thing. This is the first time I saw someone saying we need the canvas. Thanks for confirming my understanding of this system wasn't completely off :D

[@Entikai]

Looks promising. I wish it was better integrated with the inspector. I wish button events were visible in the inspector and you could drag and drop scripts on to it, like the legacy buttons.

[@StefanVanderVyver]

Very nice tutorial. Thanks for taking the time to make it.
At 10:56 where you try to get a grip on the Button element, I take it that the "obscure" code you are writing is because you cannot access the Button as a typical gameObject? So you have to go via the uiDocument?

[@wormholeinteractive]

Wait - can we make websites on Unity now???

[@mesakun6858]

Video is out dated, 3:44 does not auto add anything at all... in unity 2021.3.9f1 personal cannot get past it & won't add the header to the empty list

[@AndreaMencancini]

beautiful!

[@fuzzychest]

Thanks! This helped me get started. What I dont understand is why we have to create each element independently. For example the first button, why not create it in the MainUI? We should be able to add click/event handlers in the UI builder on the action elements like toggle, button, etc. Seems an odd design choice to do it the way you showed in the video. Unless I missed something? Which is likely, I am a unity noob.

[@adminadmin2384]

My UIToolkit menu only contains UIDocument as submenu.
Even if I create a UIDocument, there are no further submenus. I also use 2022 Unity version.
How do I get all the other submenus and how do I open the UIBuildEditor?

[@ethan_zoller]

Right click in the assets folder not the hierarchy window

[@CSharpGameDev]

Idk if you'll get back to me but I'm using VS Code, installed a package that would support .uss files but when I open the file, nothing shows up. Just a blank page. Is that gonna affect anything or should I just manually type the classes in?

[@lucutes2936]

where is an UI example?

[@seanerer]

Makes zero sense.
1. Why would you put the document in a canvas?
2. Why would you have a document within a document?
The document is supposed to be like web development. So normally, one document per page would make more sense...

[@martindubois9279]

i was about to say the same thing ... what the purpose of using ui toolkit without the performance ... the whole canvas refresh every time something change inside.

[@ethan_zoller]

I agree, the button should be housed inside the same document as the text. But, overall good tutorial.

[@SaschQuasch]

Can i create in unity a gui for another game? I know the question is mind boggling. Hahaha!😂

[@MasterM12345]

Why the heck do you have so many tabs open xD