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

hello everybody Chris here and in this video I want to give you guys a quick rundown of the UI tool kit which is a newer way of building GUI elements inside of unity so we're just going to go ahead and get started by creating a brand new 3D core project inside of unity so inside of our starter scene I'm going to start by making sure that we have a canvas and an event system added in so that we can respond to UI things like clicks let's go ahead and right click in the hierarchy go down to UI and then we will do event system down here then I'll right click go down to UI again and let's add in a canvas so the canvas is basically where we can put all of our 2D UI elements let's change this to 2D view so that we're looking right at the canvas rather than our main game scene so to build our UI with the toolkit we're going to need to create a UI document I'm going to set this up in the assets folder to start so I'm going to right click and I'm going to go to create folder I'll just call this the UI folder for right now double click into it let's right click in the project go to create and down here at the bottom we have UI toolkit so I'm going to choose UI document from this set and I'll rename this to be let's say UI base so you'll see that this is a visual tree asset we can open it up for editing by double clicking on it or we could go to window UI toolkit and then UI Builder so double clicking on this will automatically open up the UI Builder so I suppose I'll put this right next to the game view drag and drop so here we're basically looking at the layout for our UI document so just like the scene has a hierarchy our visual tree also has a hierarchy now it's important to note that the elements we add in here are not game objects as other objects in the scene would be they're their own separate thing their visual tree elements so if I drag a visual element onto the hierarchy here then just like you might expect this is now a child of the parent container let's expand this a little bit over here and having this visual element selected you can see that there are a whole bunch of properties that we can edit over on the right about this element it's almost exactly like if you were doing web development you have style sheets inside of the UI Builder that you can use to Target classes or other identifiers for the different elements on your UI document so to create a style sheet up here at the top left in UI Builder let's create a new USS so it's not a CSS like it would be in web development but it's you I believe for Unity style sheet let's go ahead and create that in our UI folder I'll call this base UI dot USS save and add and now we can grab the different elements on our document and give them classes if we want them to adopt certain properties that we Define in our style sheet uh for a more workable example so that it's really clear let's add a label beneath our visual element so the visual element container as in our main UI document container so this gives it a name and later we can Target it by the name container as well but let's drag in the label here beneath here so it's the label at the top of the container I'm going to change the text to say test title and now let's create a Class Property which we can use to Target this title and anything else that we would Define as a header inside of our base UI so I am going to create a custom class here let's do dot header and I'm going to add style class to list so now double click here and that's going to add it to our USS document as something we can Target and edit if we were to open up the USS file you can see inside of here that it's already written the code header and then in here we have this styling properties none yet so let's in the UI Builder click on header once again and then let's create a custom color style for anything that is a header also quick note if you hover over it you can see any elements that are using that class currently so it's a very helpful visual identifier so let's change the color here to something like redo Orange if I change that over here you'll see that the elements in the document the label here with that class immediately update I'm going to control s to save this if we look at Visual Studio we can see that the USS file has been updated so here is the code representation of whatever we're doing inside of the UI Builder and just so you know you can go back and forth so if you want to manually type in a style here something like let's see font size then we could type in 30 pixels here okay Ctrl s go back over here and you'll see that it updates in the editor as well so anything that has the header class is now a size 30. so now how do we take this UI document and actually make it visible inside of the game so let's go back to scene view on the canvas I am going to click in here so looking at the scene View and the hierarchy what we need is something in our canvas to have a UI document component so we could put that directly on the canvas I'm gonna actually just created a child game object so let's create an empty and I'll say main UI here add a component UI document so you see here that we need to create a panel settings asset so let's right click on our UI area go to create UI toolkit and then panel settings asset so these are the settings that will apply to your UI documents one to note here is scale mode where you can see it's constant physical size if you want your UI to automatically scale with your screen size you can just change it here scale with screen size and then that will mean that as your screen size goes smaller or bigger your UI will just scale with it which is very helpful okay anyway we have our panel settings let's just rename it here and I'll call it Main panel settings the UI let's go to the main UI object in our scene I'm going to drag the panel settings into here and then we need the visual tree asset I'll click here type in base UI or UI base and just select that you can also just drag and drop the visual tree asset into here if you want and now as long as this UI document is enabled when we hit play it should pop up on the screen so you can see our UI is displaying here so if we exit out of play mode and I turn off the enable for the UI document we hit play again then you'll see it doesn't appear here if we happen to toggle this on and off during gameplay it's going to completely reset whatever was in the UI document before and regenerate a new copy of the UI document when we re-enable it so that's something we could do in code Now to create something that's a little bit more functional in game Let's create a button so this time I'll actually create it as a second UI document which will be loaded on top of the first one automatically so let's create a new child game object here from the main UI and I'll just call this button UI let's add a new UI document component and you'll see immediately that this becomes a child of the main UI because this is further down the hierarchy so it is using the main panel settings from the main UI and and it references the parent UI document where this new source asset will be loaded on top of so we can just create a new visual tree asset in our UI I'll right click go to create UI toolkit UI document and I'll just call this button UI and I'll double click into it and let's add a button here so I'll just find the controls button drag that in as the root here and now we can basically just leave it like that I guess just keep it simple okay and now we want to take the button UI and I'll just drag that into Source asset let's make sure that everything is enabled and we can go ahead and hit play and we should see the button UI loaded somewhere on top of the main UI so these are actually two separate UI documents but the button just gets loaded underneath as a child of the parent and we can kind of test what's going on here by going to window UI toolkit I believe it's debugger here and if we pick an element and then click on the screen and we'll be able to see the layout that's going on here so we have the main UI container we have the visual element we created under it which is called container but really it's a container within a container and then we have the text label so the other child here is that new UI we just created the template container hashtag button UI container it has a button inside of it but it's really important here to note that this is a child of the main UI so just keep that in mind now if we were to click the button you can obviously click on it but it's not going to do anything we would need to subscribe to a click event so that whenever we click on the button something will happen so let's create some code I'll do it as a new script under button UI and we'll Target that button and then we'll make some debug log happen whenever that button gets clicked on so I'm going to create a new script here let's call this button Clicker I suppose and let's edit that script so what we're going to need from our button click or script is sometime around on enable for our mono Behavior we want to get reference to the UI document that is storing our button and inside of that we want to pick out the button which we can query by name in order to find and then we can give it a call back whenever it's clicked on so that we can actually run some code on it so let's add in at the top UI document and I'll call this button document or a button UI something like that if we look at the inspector we can see that we're putting the button clicker script right next to the UI document so we can just do git component on the game object to find this UI document so I'm going to do button document equals get component UI documents and I'll just do a quick check to make sure that's not null before I go on for other things so if button document is null I'll just debug log and error and say no button document found otherwise we can use it for querying the button inside of the UI document so we'll have a button up here a button UI button and we'll do UI button equals button document dot uh let's see root visual element so in order to query things that are inside of the document you want to get the root and then drill down to find the items so this is the root of the button document not the root of the main UI and keep that in mind and then when we have the visual element we can do a DOT queue for query and we can just do a quick query by name so I am going to find the element called test button and this will return a visual element but we can just get the visual element as the type we would expect so I'll do as a button so we're representing the visual element as a button and a button will just inherit from visual element as the root class for things in your UI document okay so now we just need to make sure there's actually a button with the name test button for this to work so let's go back to the UI Builder we have the button let's just paste in the name there okay and that's really all we need so we should be able to find that and let's say if UI button does not equal no we'll just do a quick debug log button found so back in the scene hierarchy both of the UI documents are enabled the button clicker script is enabled so the on enable function should run as soon as the game loads basically so let's go ahead and hit play and if we look in the console we can see that we found this button successfully by querying it by its name so now that we have that button referenced we can subscribe to a click event that occurs on the bottom and then give it a call back so UI button dot uh let's see register a callback I believe it is we need to give it the event type so we're looking for a click event and then let's give it a callback function to use so I could call this just on button click so obviously we haven't created a function here which will take a click event as a parameter so let's create that public void on button click which is going to take a click event as the Callback parameter I'll call it pvt for event and yep there we have that so whenever our button is clicked on now it is going to run this function so let's do a debug log and I'm going to say that the UI button has been clicked on so with that we can get rid of this extra start update methods we don't need that and we can just go ahead and give it a test so let's go back out here hit play so we have the button found down here and it should have registered The Click event onto the button so let's click on the button a few times and you can see each time the UI button has been clicked on is successfully running okay so that is basically a really quick introduction to UI toolkit and how you can start building a UI for your game by building out your UI in the UI Builder adding in some style sheet classes and then interacting with the UI with code that references the UI documents that you create to represent the UI so iPhone Chris I hope this was a helpful full quick introduction into the UI Builder system thanks for watching to the end and I will see all of you in my future

Channel: Chris' Tutorials

Views: 26,522

Keywords: UI toolkit, eventcallback, onclick, button click, UI toolkit button, visualelement, root visual element, UI Toolkit Unity 2022, Unity 2022, Query Visual Element, USS style sheet, unity style sheet, visual tree asset, unity visual tree asset, unity UI document, ui document tutorial, ui toolkit tutorial, button event callback, clickevent callback, C# callback, ui document callback, ui document setup, UI Builder, unity UI Builder, ui builder tutorial, unity UI, UI beginners

Id: BG6NCgkbbiA

Length: 13min 54sec (834 seconds)

Published: Sat Dec 24 2022