UI Toolkit Tutorial - Style Variables and Multiple Menus

hi and welcome to my second video dealing with unity's new UI toolkit in this video we're going to start by adding some variables that can be used across your USS style sheets and also set up a second uxml document which will be used by our settings menu in the last video we set up this start screen with a start button to take you into the main game a settings button which we will be filling out in more detail in this video and a quick button to close your program down these were all styled and controllable and clickable if you'd like to get to a similar State please check out my first video on the subject where I detail how I set this all up so in my last video I started to build a style around my buttons and text and I did this directly on those buttons and if you recall I created some Styles which if I go into open the UI toolkit as you can see we added these styles using classes in this section here to style each of these assets now for smaller projects this is probably all you will actually need given you probably are going to have a relatively small number of classes and moving variables around is probably not going to be a big deal however as you start setting up larger projects or if you want to be able to switch the styling the colors and the stylings of your UI on the fly or while your program is running then you want to try and separate some of your concerns away and one of the ways we can do this is set up a another USS style sheet which can hold all of the colors and any other valuable any other variables that you might want to use within your um styling for your projects this is everything from colors to images um uh borders anything that you can you know the the sizes I believe also the alignments but I'm not 100 sure on that um but definitely margins padding Corner radius all of these sorts of things can be set up as variables we're going to go to our project window down into UI toolkit and styles I'm going to create a new UI toolkit style sheet and this one I'm going to call dark purple theme open that up in our code editor which I'm going to skip to when this actually opens up properly so all sorted yep good right now in here as you can see we've already got a visual element created we're going to remove this and instead type in root this is where we're going to add these variables now you can add these anywhere within your USS files at any point that you want but by putting it in to the root we're going to have it available to everything across the board so I'm just going to expand these brackets out okay so adding a variable in here is very very simple so you need to make sure that you proceed it with two dashes whatever variable you're going to use so the first variable I'm going to use is highlight dot mid then a colon space bar and then I'm going to add my color as a hex value which is going to be 4 6 3 4. seven five and that's it now I have a variable that can be used within anywhere within my USS files that's all the colors that I'm going to use for now these are all taken from the styles that I created in the last video so if you'd like to see how I got those values please see that video do make sure that you have got these Double Dash at the beginning this is a requirement for these variables now to actually use them unfortunately at the moment the UI Builder within Unity itself doesn't currently support you adding or editing these values directly so you have to do it within the USS documents themselves in your code editor um so now to actually add them into the Styles we already have I'm now going to open up the start with the button theme there we go and now in the bottom theme all I need to do is go and replace all of the values with the correct corresponding colors so we'll start at the top and to replace one of these it's very simple you're going to type the VAR keyword put in some brackets remembering your Double Dash and now you're just going to add in the name of the variable that you had oh it's as simple as that so color is the text sorry I believe this should be VAR and this is going to be Gray dot one no gray.2 I think simple as that so I'm going to go down through all of these and fill them all out and now there's one last thing we need to do because if you go back to your style now you'll see that if if you go back to the unity editor now you'll see that everything will have disappeared but we need to make one more change um so that all of our colors will come back and that is to open up the main uxml document which we'll do now start recording it okay as you can see I've now got it up and working um yes one slight change that you need to make from what I said earlier is if we go back to the code you can see it's a colon route rather than just root so that change and that makes it the top level so these are now available for your other USS documents to take advantage of okay and the last thing to do before the settings is we're now going to update the theme file so if I go back to the unity editor and from here if I go back to the UI toolkit go into Unity theme and unity default theme which if we go to the UI document first we should and go to the panel settings we should see that Unity default runtime theme this is the one that we're still using if we select this you can see that we're able to add a list of style sheets so to this I'm just going to add if I just lock this in place I'm going to add the style sheets that we've already created so that's going to be the dark purple theme the tutorial buttons Styles and the tutorial labels and then hit apply now what this means is if we go back to the um Builder we can now actually remove all of these USS files and as you can see all of our styling has remained in place and as you can see all of our styling has remained in place this is because we're being controlled by the unity default theme if you remember from the last video we can select this and change it to say there the editor Dark theme and it will go back to that theming but then we can go back to our Unity default runtime theme and we've got this back so that's a useful way to be able to keep your styling between different sheets without having to completely populate this style sheets with every USS file that you've already created one thing to keep in mind when doing this is that the style that is closest to the element is the one that the element will use so the theme file is the furthest away from the element that it's possible to get so any other styling that you add in place will override that theme file so if I put a new class in here that has the same name as for example dot Unity button or dot button main title and change the signing there that's the one that that button is going to use that that styling is going to be used instead of the one from the theme file and equally if I select the button and start modifying the um settings directly in here then that is what is going to be used instead so always remember that the closer to the element that you are the um more likely that that style is what's going to be used one other thing to note is as you can see here in the text color it's got the color in there that we're using and it's got this sort of gray highlight going around the variable this is just telling you that it's using a style variable rather than being controlled directly and like I said earlier currently these aren't controllable from the UI Builder this just gives you an indication that this variable is being controlled okay so now it's time to create the settings view so for this going to create two new uxml documents so going to project UI toolkit panels create UI toolkit UI document and this is going to be called tutorial settings View and another one create here toolkit UI document and this is going to be called start View the reason that I'm creating two ux mail documents here is because I need somewhere to keep everything together and that's what the start view is going to do so the start view is going to hold a copy of the tutorial main menu and the tutorial settings menu and so I'm going to replace the tutorial main menu on the UI document in the scene with that start View so if I open up start View as you can see very basic setup again I'm going to click the top of the hierarchy match the game View zoom out so that it's the right size and for this I'm just going to leave blank now if I go to the library on the left hand side and open project this is where we're going to be able to add the documents that we already have so I can open assets UI toolkit panels and it will show me the panel that I already have available so the first one I'm going to add by double clicking is the tutorial main menu and then I'm going to double click again another tutorial settings for you as well so for both of these what I can do is Select this yeah I want to select both these and select grow making sure that they fill the entire area same for the setting View as you can see that's going to start taking up which part of the screen which we don't want to happen so as the default we want to go to display for the tutorial settings View and set the display to be turned off we will then in the code later on Swap which one is displayed and which one isn't okay so the next thing to do is to open the tutorial settings view that we created earlier so one way to do this is to right click in the hierarchy here and select opening UI Builder don't just double click on this because it will just try to rename it make sure it's right click opening UI Builder uh save those also again be careful double clicking in here because that will just add that uxml document to your hierarchy if you want to select it from here you can right click and again open a UI Builder okay to start off with I'm going to go back to the standard controls and add the visual elements this I'm just going to grow to fill the entire screen and I'm going to set the background color just to something we'll we'll just make it a gray for a moment I am going to add that to its own USS which I will then use later on but I always like to set the colors in here first and any other variables even if I'm going to use a a variable that I've already set up in the root just because then it populates the uxml document for me and all I have to do is copy and paste the variables without having to worry about all the names that the USS names that I need to use so later on I will probably add or create a list view in here so that you would be able to scroll through all of the settings that you have but for now um I'm not going to to worry about that so what I need to add next is a title this is just going to say settings and I'm going to give this a name title next I need to add a button and to this I'm going to make this the back button which we'll call back now I'm going to call it back button it's going to make it easier to search for later and then I need to add two more things so for the settings screen for this tutorial we're going to add a toggle to turn full screen on or off and also to be able to select the resolution that you want your game to display at so for those two things we're going to add a toggle and we'll call this full screen toggle and we're going to add a what is it and then we're going to add a drop down and this is going to be resolution select oh actually resolution drop down and we'll just think resolution so as you can see this currently doesn't look like anything particularly special um and it's just using the default um styling again this is very easy to fix so the first thing we're going to do is Select our button here and we're going to add to it button main title as you can see that's automatically styled our button to look like the ones that we've got in our main title screen and we can go to our settings and again we're going to call this label we're going to add the clock sorry we're going to add the class label main title so now at least it's starting to look like what we've already used to so the next thing I'm going to need to do is I want to style my toggle and my drop down box and also the background because that currently isn't set up in a style sheet so I'm going to create three new style sheets first one in UI toolkit styles and I'm going to call this back ground s create a another one this one called toggle sorry tutorial toggle tutorial toggle toggles toggles wait what I'm going to remove this I'm going to add a new Style which I'm going to call tutorial drop downs and one more called tutorial backgrounds so now I'm going to go and create all the styles for the background give them all of their color variables and I'm also going to style these elements Please be aware for some of the more complex elements sorry for the more complex controls that you can add from the library you need to actually override the um Unity styles before they'll actually affect what you need to show because you don't have direct access to everything underneath as you can see these are grayed out I'm just going to go and put those Styles in and get it set up I'll give you a quick walk through but if you would like to see um a more detailed video on how to edit each individual control that's in here and to get full control over um your styling then do let me know down in the comments now you can see that I've fully styled the settings menu for now so the next stage is to start adding the code that will populate your resolution drop down and allow you to toggle between full screen and not so the first thing to do is to go back and make sure that we have a CSS uh sorry make sure we have a script file for each of our uxml files so I'm going to go back to the main Unity editor and go to our panels as you can see we've only got the one for the main menu presenter so we'll just create two more start view press enter and tutorial settings View presenter okay so now we're in the start viewpresenter we want to grab the main root element of the start viewpresenter and then swap between the main start menu and the settings menu so to start with we'll grab our root visual element as we did before and now with this we can then query the two visual elements that we added to that Main script which if we go back to Unity we can see these are just the main names themselves so we'll start by grabbing that [Music] I'm going to create two private variables to hold these elements [Music] foreign and as you can see I've got these to point me around so we will set this to settings and this to start okay now that we have our two elements we're now going to start actually adding some useful functionality to our buttons so we'll start by adding the settings button to take us to that settings menu first thing we're going to do is grab our main menu presenter [Music] [Music] and make this equal to a new tutorial menu presenter foreign and then from inside there we're going to assume an action within it which we will call open settings and this is going to equal new action which we can Define with a Lambda expression and within here we can do the start View and then what we can call is a dot display [Music] and set this to false and settings View dot display to true now this display function is an extension that I've written and I'll just show you that now it's very simple it's just trying to skip past um having to write so much code each time so all it is is a very simple extension method if you'd like me to go over how extension methods work and then please leave a comment below um but we're just getting a visual element whichever visual element we want taking in a Boolean of whether it should be enabled or disabled we make sure that the element isn't null and then you can call element.style.display so dot style this is how you would manipulate The Styling of your element from code and then from there we can just call the display method and then depending on whether it's enabled or not we call display style of flex or display style of none uh now we can just use intellisense to create for us a property which will be an action ready for us to populate so now that is set up and we'll just do the same thing for the um settings menu as well okay now that's all set up just one last thing to do here which is just to extract all of these methods just to make your code a bit neater and it'll just help later on when you're trying to debug what's going on so I'll just do that now okay and as you can see I have split out the start menu in the settings menu into their own functions and also created a function just for toggling between the two menus this should tidy it up for later and when we want to add more functionality to each of these menus they can be added in later on next is to actually add the functionality for open settings and back action so to do that we'll start by going into the main menu presenter next we're going to actually hang on before I do that I'm going to go back to Unity and in here I'm going to remove the tutorial main menu presenter from here and instead I'm going to add the start viewpresenter and I'm going to add the start view to the source assets now back to the code in here I'm going to go into the tutorial main menu presenter I'm going to start by removing the mono Behavior so that we can actually use that new keyword and now I need to refactor this a little bit because we are no longer using it as a monitor Behavior we need to create a Constructor which is going to pass through the appropriate root elements that we want um for this menu now that we've done that I'm going to assign our settings button to its own visual element sorry to its own button um variable now that I've done this in the open settings action I can create a new set which will just Lambda into the settings button dot clicked oh sorry dot clicked plus equals the value this will allow you to add functionality to that settings button from outside of this menu now I'm just going to replace the start and quick buttons with in a similar fashion and then just refactor this script a little bit okay as you can see I've now got a variable for each of the buttons that we have and adding the logs in a separate function now if we go back to our start viewpresenter we'll see that there is an error because we're not passing through the root visual element that we're expecting so we can add that very easily by underscore and start View and now we'll do the same for the tutorial settings viewpresenter so we can start by sending in our variable for the Constructor settings View and now inside of this we can remove the Model Behavior add a Constructor and make sure that our back action is assigned to the back button there we are for now that's all we need so now if we go back to Unity and we run our scene if we click on the settings button we can see we've still got the debug and we've gone to the settings View and if we hit back we've gone back to the settings View I can see that I've got some issues with the styling so I'll try and get that fixed for the next video almost certainly I've assigned the wrong colors to the wrong classes the last thing to do now is to go and add the functions for the um settings values so we'll go back to our code [Music] and we're still in that tutorial settings viewpresenter so now we're just going to add some functions to handle the full screen [Music] if that's simple enough we'll create a private void called set full screen Boolean [Music] and this is simply screen dot full screen calls enabled so to action this with a toggle we'll get the toggle itself and with that we can then call full screen toggle so we can call register callback with a mouse up event into here we can pass in the event and then call set full screen and get the actual value of the toggle and pass it in and the last thing we need for this oh actually can I just do that last thing for this is It's Worth just adding trickle down and Dot trickle down and that's now our full screen toggle setup and the last thing that I want to show you for this video is how to populate that drop down so the first thing you're going to want is a list that will hold all the values for that drop down so I'm just going to add that to the top of this class now so as you can see I've just created this list called resolutions and populated it with a few common resolutions that people might use now having set that up what we want to do is grab our drop down so we'll go back into our Constructor we'll create a private field now that I've got my drop down field what we want to do is first add the choices that we have so we just call Dot choices and we can set that equal to the list that we've just created simple as that and now if you were to open that drop down you would see this list of strings being displayed there next we're going to do a resolution selection dot register value change callback so then anytime that that value has changed your going to call a function and I'm just going to set this to something called to it to a new method which I will call set resolution and I'm going to pass into there the value dot new value so this value here is actually a change event which will give you both the new value and the old value so this can be useful if you need to know what the old value is before you go to the new one and now I'm just going to use intellisense to generate that method for me this is going to be new resolution and then the last thing that we want to do here is set the index to be zero now this will trigger this register value callback so you might want to put this on the other side if you don't want to immediately set the resolution to whatever is at index 0. and the last thing is I'm just going to populate this with a method to actually change the resolution of my game okay and now that I've finished that as you can see I'm just splitting these strings turning them into integers and then assigning them to the screen.set resolution and the final Boolean of full screen being set dependent on the full screen toggle now if we just jump back into Unity one more time and now if I go into these settings and look at the resolution you can see that it is populated with 3840 by 2 160 and if I do the drop down you can see we're populated with all the drop downs that we have set up previous to this obviously this won't work well in the editor but if we do an actual build then we'll see this functioning thank you for watching my second video on unity's UI toolkit I hope this has been useful like I said in my last video if there's anything else that you'd like to see me cover then please leave a comment down below and I will cover that sometime towards the end of this series in the next tutorial I will be covering how to create a custom control which we will be using in the settings menu to toggle the full screen instead of using this toggle here we're going to create our own okay thanks very much bye

Channel: Bunny Coding

Views: 9,392

Keywords: Unity3D, Programming, Coding, Unity UI Toolkit, Tutorial, UI Toolkit, GameDev, Game Development, Game Dev

Id: XWScKbnc8xo

Length: 39min 36sec (2376 seconds)

Published: Fri Dec 09 2022