4 - Using Unity UI Toolkit (Game Dev In 10 Mins) | #unity #gamedev

hi I'm Sam welcome to using Unity UI toolkit so the essential features inside a Unity project include UI input audio graphics and then of course scripting it all together using C sharp UI is a key part of these Essentials let's take a look at this UI system I'm Sam I'm a Unity certified game developer with over 20 years of experience I'm available for remote contract hire as an educator and as a game developer so inside the unity engine there's many different systems and some systems have multiple versions or options of what you can install So within the unity user interface you can choose the classic Unity UI solution which probably has been the de facto for five or six years and much of the content you see online uses Unity UI however we're going to talk about UI toolkit UI toolkit is based on web standards technology and a lot of the philosophy behind that including the Box model and also separation of concerns from the layout styling and behavior and unlike most systems in unity UI toolkit is not game object based we're going to see the unity UI Builder as the window where we bring it all together so UI toolkit is a collection of features resources and tools it is tailored for maximum Performance Based on web standards as I mentioned web Technologies it is the newest and best system but note that it does not yet have feature parity with the unity UI system there are some things that currently are not natively supported but most everything we want to do is fully supported so we'll take a look at the assets that is the UI document this is something like HTML defines the structure of the UI then there's style sheets which is a Unity stylesheet format USS that's something like CSS and allows you to set the visuals of those components that you have on the screen and then we'll use c-sharp of course to do the behavior for example clickable buttons or populating text Fields dynamically UI Builder is the window that will open up I'll make it full screen here so we can take a look it is the UI authoring that has a what you see is what you get approach makes it very easy for iterative development and while this screenshot looks like it might be the unity editor because it has different layouts windows and areas of Interest this is just the UI Builder itself so there's so much going on here I tend to use a second monitor or just go full screen which is what I'm going to do today when we take a look so here we are using the LTS version of unity 2022 which as of recording this video is the latest version of LTS so in it UI toolkit comes automatically added and you don't need to add it as a package so sitting here in a new project with an empty scene I'll start creating UI toolkit the first thing that we're going to want to do is create an empty game object I like to call it UI document and then we're going to add a component called UI document now UI document is the one game object in this system so remember I mentioned it's not game object based most of the elements the text the buttons Etc are not game objects themselves but all together that layout needs to plug into the scene somehow and that's using this one game object so here I'm going to need a panel settings and then what they call a visual tree asset so in the project I will create a new got to scroll down here to the bottom UI toolkit and I'll create the panel settings asset that creates it there then I'm going to right click again and create and go down to the same menu again and here choose a UI document the first time that happens it needs to generate some files most of which uh sit kind of in the project repo the one that we see here in the assets is this template itself now there's a few different names notice it was called UI toolkit in one spot it was called layout or uxml in another spot here it says template so there's a few different names for this but again this is something like the HTML markup so with those two created I will drag our panel settings into the UI document and I will drag the template into the visual tree asset slot and then I'll double click it now here it's going to open up this is the UI Builder so let's just take a very quick look at what we've got here first of all here in the viewport this we can click it and we can choose match the game view so now I'm using Mouse wheel to zoom out but it now matches whatever the game view of your game is so as you're working here you can get a bit of preview within the aspect ratio you're building for then I'm going to use from the library down here we've got lots of different choices of things that we can drag out the one of the gotchas when you're first getting into this is most everything you're going to use and drag out is a visual element so just by dragging out visual element here that gives you one it's very Universal and flexible you can apply it to many different use cases it's something like a div in the HTML world so I'm going to grab it here and I'm going to rename it by double clicking and I my convention that I like is to call this one screen and then I'm going to drag out another child and I'm going to rename this one content those are names that I come up with myself both of them still are visual elements so for the screen what I can do here is give it some properties here on the right in the inspector there's all sorts of different properties you can use and they're all inspired by cascading style sheets from web standards so what I'd like to do is give a little bit of padding or margin around the entire screen so I'll go down here to margin and padding and I'll just choose 50. you can see now that I've got a border around the entire screen so now as I add things into the content I can have them stick to the corners of the content but with a nice little bit of empty space there toward the end it just makes it look nice so let's say we wanted to create a button and just put it in the corner of the screen so I'll use the content node here and then I will grab a button see we've got lots of different choices I'll just choose the regular old button so I'll rename the text here to hello world and I will keep keep the button name as hello world but all right so if we zoom in a little bit we can see that the text is getting previewed there but it doesn't quite match what I want to do so what I want to have it do is stick to the upper left corner no matter where the screen gets resized to so to do that here I'm going to go to my Hello World button and there's lots of different settings I can use here but I'll use position absolute and set the Left To Zero pixels and the top to zero pixels now that's going to Anchor it up there and then I'll make it a bit bigger let's go down to size and we'll set it to let's say 300 by 300 pixels each time you're setting pixels you could also choose percent if you want that's another option and then let's choose the text here and make the font much much bigger so now when I close the UI Builder we can see that as we were building that it was automatically populating the live game screen so you can get a fantastic preview inside UI Builder anytime you want to double check the accuracy at runtime you can come here and look at the game window and then of course you can click the play to see the end user's experience for most of my workflows I see the UI Builder looks the same as the game in edit mode and the same at runtime so you get a very nice consistent look across them there'll be some small exceptions here and there now notice when I hover over here I get a slight brightening of that button let's see what else we could do there we'll go back to our template and we're going to create our first and only style for this demo before we wrap things up what you can do to style these different elements is come up here and choose to add a new style so I'll call this one button I'm going to give this a my Styles name and now I can drag that button onto our button then if I duplicate the button and I'm going to rename it foreign classes again borrowed from CSS that we can use here so we'll give this one the name button colon hover and now anytime that our pointer or Mouse hovers over we can change the effects here so here I'm going to give this a slightly different look let's say that I want to go to the transform and I want to have it scale up to 1.1 I'll do a quick save there to refresh The View with that hover pseudo State and then one last thing we'll go back to the base State and I'll go to transition animations and I will just set the duration to be one quarter of a second then up here I can hit this preview button and as I Mouse over may not be able to see it too obviously here in the video recording but it is scaling from 1.0 to 1.1 every time I Mouse over and by clicking that preview it gives me those hover previews I'll go back and run the actual app and here we see the same effect as applied at runtime so that's it we've seen how to create a UI document how to use the layout inside the UI Builder a little bit about setting the properties over there on the right and setting some Styles there's much much more that you can do with UI toolkit including scripting it with c-sharp we'll take a look at that in the future for now thanks very much thank you

Channel: Samuel Asher Rivello

Views: 4,170

Keywords:

Id: pqSwaqJmYwk

Length: 10min 43sec (643 seconds)

Published: Wed Jun 28 2023