Building Runtime UI with UI Toolkit In Unity

user interfaces are a significant part of anyone's game development Journey no matter what kind of game you're working on you're probably at some point in time also developing a user interface for your users to well interface with there are a ton of different approaches to UI tooling both within engines and available from a number of different third party providers if you're watching this video you're probably using unity and if you're like me you probably also have a LoveHate relationship with unity's default UI system I think you agreed that while it's a fairly robust set of tools Unity UI definitely comes with a lot of drawbacks there's a somewhat Arcane familiarity required in understanding how all of the components work with one another in order to achieve a result that looks good and it seems that Unity have also understood the limitations involved because over the past couple of years they've been working on an alternative and while I've been keeping my eye on it it hadn't really been something that I was excited to talk about or even use many of the features were pretty Bare Bones and it just seemed easier to go with what I knew so I was hanging out in unity Island for the time being however as of this talk at unite in 2023 showcasing a number of different improvements added to the latest version of the package things changed and I'm now well and truly on board the train to UI toolkit Town hi there I'm Matt and welcome to Game Dev guide in this episode we're going to take a look at some of the key things you might need to know in order to get started working with unity's UI toolkit at runtime we're going to take a look at how we can build out a simple main menu in the UI Builder and how to animate between different states of our interface we'll look at how to build a custom component in C and how we can expose properties and behaviors to be usable inside the UI Builder window we'll then look at how to use the painter tools to draw our own radial progress bar component from scratch and finally we'll look at how we can bind game data to our components so that they update themselves to represent the data automatically now I know I mentioned it in the intro and some of you may be new here so you may be thinking wait a minute there's a fully functional runtime UI solution in unity already and yes there is in fact I have multiple videos here on the channel That navigate around some of the many many drawbacks of unity's older UI system there's also the even older IM GUI which I've also touched briefly on in the past but that mostly just became useful for editor tooling rather than runtime and in modern Unity versions the majority of the editor code has now been replaced and is rendering inside of UI toolkit now anyway so I won't be diving into that here the point is for the past couple of years there have been two main Solutions in place Unity UI or the new UI toolkit framework and frankly up until Unity 2023.2rpm [Music] kit seems like the future for Unity however it's still in development which if you're a Unity veteran you're all too familiar with like most things in game development a lot of this is going to require Nuance for you to decide whether moving to UI toolkit is a valuable decision for you in your project so hopefully this video can act as a case study and help you make that decision there are pros and cons to both UI tool sets there are a lot of things I like about UI toolkit especially some of the affordances that it gives when it comes to animation styling and reusability but it's also a very different way of working and the entire thing is closer to a web development workflow which depending on your disposition is either a pro or a con for me I think this is actually one of its biggest strengths because one of the industry's largest thirdparty Solutions coherent UI uses virtually the same web-based design philosophy coherent has been in many many well-known Indie and AAA titles so there's a robust history of proven products there taking that idea but integrating its Concepts further into your engine and relying on the power of C rather than JavaScript hooks makes a lot of sense to me and I can see why they opted to go this route not only does it become an accessible solution for UI and ux artists in the industry who are more familiar with web-based UI design opening up the pool of developers you can hire but as an aside you're also allowing users to harness the wealth of knowledge that exists online for that type of interface design and there is a lot of it that said for a lot of people the web design approach is horrible and the amount of boiler plates you need to write to get anything up and running sucks so your mileage may vary what I'm saying is I get it as many regular viewers of this channel would know I'm very very familiar with unity's UI system at this point design and workflow philosophies aside though the biggest drawbacks from a feature standpoint for UI toolkit is the lack of custom shaders and World space support so if those are two things you desperately need in your game you'll need to figure out some workarounds or hold off until Unity adds support for them I fully recommend checking out the UI road map on unity's website as this will give you a bit more of an overview on what features exist and what they're looking to work on next I'll post a link in the description down below so with all that said and out of the way let's jump in and get started working with UI toolkit for runtime I have a small scene here where the player can drive around a little road Network right now if I hit play I go straight into the game but I'd prefer if we had a little main menu for the player to be greeted by before they start playing the game nothing too complex just a simple play button maybe an options button and an exit button should suffice I think so let's take a look at how we can build something like that inside of UI toolkit let's open up the UI Builder by going to window UI toolkit UI Builder this is a visual editor Unity have created for us to more easily built out UI toolkit interfaces you see unlike Unity UI where we have components that control the look and layout of our visual interfaces UI toolkit uses two or three independent script components and separates the visual data and functional layouts from the actual styling of the interface itself in the form of a uxl file for the layout a USS file for The Styling and a sharp file for the functionality we'll explore some of the affordances of this further in the video but for now all you need to know is that the UI Builder essentially composes the uxl file and the USS file for you under the hood while you're using it you don't need to use the UI Builder to create runtime UI if you want to go full hog and code all of the uxl and USS files yourself you absolutely can I just find the UI Builder useful and it's how I like to work in order to preview this properly let's go into our hierarchy here and choose Match Game View then let's save our XML file here and let's also create a new USS file and save that [Music] too the base canvas settings here just act as a way to preview our UI on something but don't actually get stored as part of the UI as you can see I've just set it to be the scene camera so I can get a good preview for how it will look I want a full screen panel here so let's create a root visual element and set our style We'll add a new USS selector called panel to this element and then select that selector up here and choose some base properties for this selector one of the things I really like about this new workflow and the more CSS like approach is how you can build modular behaviors with stylings stylings sort of become component like for instance we could add a hidden selector here that when added simply changes the visibility of the component this can be super useful for making changes to your UI at runtime as you can simply use C code to add and remove classes from elements and drastically change how it behaves next I'll add a visual element to contain our logo and our buttons I want it to be in the center so I'll actually set the flex properties on the panel selector to align to the center of the panel a lot of this Behavior carries over from CSS and is way out of scope for me to explain to you in this video so if you're un familiar with how things work in webl I'll leave some good resources for learning CSS below all right with that set up let's start adding some buttons Unity has a number of built-in components here that we can use similar to the ones that existed in unity 2i so let's grab three of these button components but then let's add the class selectors into our own USS and then let's override the visuals of these buttons a bit until we get something we [Music] like finally I'd like to get this logo here on the menu and so let's add a visual element on the edge here and name this [Music] logo in our logo selector we'll select our image and set the scale value to scale to fit and I'm pretty happy with how this is looking obviously it's kind of basic but it'll do the job if we take a look in preview mode we'll notice that our buttons don't really react to any hover events and they should so let's fix that much like normal CSS we can use special selector events to change the style of our visual elements depending on certain input states such as hover or Focus let's add a new hover selector for our buttons and then simply change the background color as you can see the state now changes when we hover over the element the cool thing about this selector approach that would have been much more difficult to support in unity's previous UI system is that as you can see we can adjust any of these other values here and update how our button looks easily not only that but we can also transition between these two states dynamically through the use of the animation properties down here no extra code or tweening libraries are needed it's just built straight into UI toolkit so for instance let's say I want to transition the scale of my buttons here down here in the animation section we'll just add a property for scale set the duration to around .25 seconds and just like that we now have a state transition between our buttons I honestly think this is a really cool feature and is one of ui2 Kit's biggest selling points for me okay so our initial menu here is just about ready to go what we need to do now is get it working in game by adding a UI document object and assigning our XML file it looks a little larger than I'd like though so we need to go into the panel settings and change a couple of things these settings are essentially the same set of configurations as the old canvas renderer and related components so here let's switch from constant size to scale with screen size and set our Target resolution to 1080p there we go now it looks like we designed it if we hit play and mouse over our buttons they animate as expected so now we've got to get it functional and unfortunately this is a little bit more code focused than Unity UI in the old system each element was a game object so we could just expose a reference in code and set it in the inspector but these uxl files are just text assets so instead we have to do a bunch of lookups as part of our coding process UI components rely on names and classes so essentially we have to do the equivalent of the old transform. find method on everything in our UI to be able to add interactivity I'm not super fond of this workflow because it relies so heavily on string references and as you all know names change all the time so it's easy to break things but it is what it is for now we can only hope that Unity improves this in the future let's go ahead and add a new class here which we'll call main menu [Music] controller in our awake function we'll get the UI document and grab a reference to the root visual element then let's get our three buttons by name using this query method this is just the element name we set in the UI builder for each of the buttons will'll subscribe to the clicked event and build out corresponding methods to handle [Music] it okay so that's the basics of working with UI Builder and runtime UI toolkit now let's look at some more advanced use cases you might run into on a larger project and how you might want to navigate them them let's suppose I'm deciding to localize my game into other languages I'm using unity's localization package and so instead of displaying hard-coded text into these buttons here I'd like them to reference my key and grab the localized value at runtime instead one way to do this would be to go into the code for the menu and adjust the text in here but that doesn't scale super well so I'd like it to be a bit more exposed than that what we can actually do is build a custom UI component like the ones you see down here and expose some custom properties and behaviors for the component that will appear in our inspector here in the Builder so we can make a custom button component that instead of taking a text input takes a guid input and automatically handles the localization itself when we're in play mode this used to be a pretty painful process in previous versions of UI toolkit but as of 202 3.2 onwards it's much simpler and easier to do so let's go ahead and create a new C Class here for our custom button We'll Inherit from the button class but we'll set this class to partial and add the uxl element attribute up here at the top of our class this tells UI toolkit that the C class is an element that can be used in the UI Builder we'll then also create a string property for our key and add the uxl attribute attribute above it and this will be exposed in the UI Builder as an editable property if we look in the UI Builder we now have a custom component we can add to our element stack and a custom key property exposed here in the Builder the previous method for doing this was really convoluted and involved a whole bunch of boiler plates so I am very very thankful you need folded all of that boiler plate away into their API and are just using attributes instead it's it's much nicer to work with let's go through and swap our button here with our new localized button class and fill in our keys from our localization table currently if we hit play nothing happens so we'll need to tell our UI element to replace the text when we start the game in our button class let's add a line that checks if the key is empty and if it isn't to try and pass the key through our localization system Unity got super angry with me due to some layout behaviors that occur when a button is instance so I wrapped this code in a delegate on the visual elementer but if you're just extending a normal visual element you shouldn't need to do this buttons are just quirky in this way I guess anyway if we head over to our game View and hit play We Should now see that when the button is instanced our code is executed in the Constructor and our buttons show our localized text pretty cool one of the other new additions to UI toolkit in 2023 is how we can bind data structures to our UI elements and have them update themselves relative to that data to demonstrate this let's build out a little speedometer for our car as it drives around our circuit and have the element update relative to the rigid body's velocity we're actually going to take advantage of some of the vector drawing tools here too so let's create a new C class which I'll name speedometer we'll mark this as a partial class that extends from visual element and add the uxl element attribute and then create a uxl file for it in our Builder as well we'll also create a new UI document for it in our game view here in the Constructor of our cop speedometer class let's add a method that subscribes to the generate visual content event this method will be in charge of drawing our UI component we can essentially draw any kind of mesh or object that we want in here and is very similar to how Unity UI worked with drawing custom meshes in the past we simply tell the context what to draw to demonstrate how this works let's just start by drawing a basic Circle we'll get the width and height of the content wct as well as a reference to the 2D Vector context then we'll simply call the draw Arc method and draw in half an arc from the center of our element around 180° angle we'll offset the element by the height so that it positions itself at the bottom of our element if we take a look we now have a closed semicircle let's go ahead and duplicate this process and add our fill element I'll set the angle to a little lower so we can see how it'll look as you can see it's a little janky that's because when we're closing our path it tries to return to the first point added right now is where we started the arc so we can fix this by adding a point and starting our path at the center instead now we have a nice fill element for our progress we want this fill to be dynamic and change relative to our speed so let's go ahead and expose this angle as a property that we can adjust in the inspector at the top of our C script we'll create a new progress property and a public getter and Setter for our progress in our inspector which when set will clamp our private property from a value between not 01 and 100 then down in our fill we'll just need to do a little calculation to Arc from - 180 to 0 relative to our progress value and now if we look in our inspector and change the progress BAR value our element updates isn't that awesome as an extra step I just added another element here over the top to give it a little bit more of an interesting look now we have our element but let's suppose I want to expose and adjust the color of our progress bar here or even in the background one thing we could do is just simply set the color as a property like our progress bar and have the user set the desired color in the inspector here the only issue with that is that generally these properties are best suited for data driven things such as the progress here and if we want to use this element elsewhere we would need to set its color in the XML every time what we really want to do is have our fill color be set by our USS properties Instead This is where the custom style properties come in in our bar here let's add a custom style property definition for our fill color and let's also add one for our background color two underneath let's add a local variable for both of those two in our Constructor let's add a coolback for a custom style resolved event and then in this method we receive a generic Target from our UI system so we check to see if the target is our current element as there might be other elements also resolving their custom Styles then we simply call a method on our element that syncs these static values with our local [Music] value and now as you can see our USS file is controlling The Styling of our custom property if I change the color in our USS file here it updates our element this is a really powerful component of the UI toolkit workflow because we can now change the visual style of our progress bar simply by adding or removing a class from the script as I'm sure you can imagine this is an extremely flexible way to deal with different styling rules within our own custom classes without needing to directly update the elements themselves all right so this bar is looking pretty good all we need to do now is sync the data with that of our vehicle controller so it represents our current speed I've got this value in my vehicle controller that outputs a speed rating so wouldn't it be kind of cool if we could sync the progress value to this speed value automatically in our speedometer script all we need to do is make sure that we have the create property attribute assigned to any value that we want to be exposed to a data source and we're good to go in the UI Builder we can simply click on the little dots here and choose add binding then we can just use the little popup here to tell Unity that this element is linked to a specific property on a class so I'll just set my vehicle class here and choose the current speed value as its source path notice how you can also change the kind of binding that you want to create in our instance we're using the data to set the element value but in the instance of something like a text field or a button or something you can actually use the element to set a value on the data instead or have it work in both directions this little icon means that our binding is set and ready to have a data source assigned which we'll need to do in code so let's create a simple controller for our speedometer bar get a reference to it and we can then assign our vehicle controller as the data [Music] source if we set this up in the inspector and then hit play we now have a UI element dynamically driven by a property on a Target data source our vehicle controller for me this was the one thing that made UI toolkit an absolute Game Changer and something I wanted to start taking ser seriously the ability to tell the system what kind of data it should track and how directly or indirectly and then just be able to bind an object to it at runtime as a source of that data is extremely powerful there's a ton of potential here for different combinations of assets being driven by generic types of data and that type of flexibility is extremely exciting to me and that's about it for today's video hopefully I've covered enough of the key points of UI toolkit here to give you more of an overview of how things work and expose some of the things you might not have known were possible and that by watching this you're now able to make a more informed decision about whether it's for you or not personally I think it's heading in the right direction and I really really like some of the new affordances it creates it's really fast and easy to get a slick looking UI working with very little overhead and is much more divorced from game specific architecture than ever before while it is functionally kind of a paradigm shift I'm definitely enjoying working with it the bindings and new custom component attributes added in 2023.2rpm interested in hearing your thoughts too so let me know if it's something you're already using if some of the new features are a turning point for you too or if you've sworn it off entirely and are sticking to Unity UI for the time being either way I'm curious to know what you think so be sure to leave a comment down below if you've enjoyed the video don't forget to hit that like button and if you're new to the Channel please do consider subscribing as you'll get notified when new videos go live if you'd like to see more from me first consider checking out one of the videos on screen now as always thank you very much for watching and I will see you again next [Music] time

Channel: Game Dev Guide

Views: 31,440

Keywords: unity, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games, unity 3d tutorial, unity ui, unity ui toolkit, runtime ui, unity uss, ui toolkit tutorial, ui builder, ui toolkit, custom inspector ui toolkit

Id: 6DcwHPxCE54

Length: 21min 35sec (1295 seconds)

Published: Wed Apr 03 2024