Create Game Menu like a PRO using UI Toolkit

hello fantastic people today we will learn how to create this awesome menu with multiple functional buttons including play settings exit and mute all of them with nice and sexy animations many of course after splash screen will be the first thing the player will see so make sure it is nice and memorable in order to achieve that i am creating and placing a set of military assets on a table like surface and adjusting the camera to have them all in the right half of the screen in the meantime i also add a small animation to the camera's rotation and position to make it less static if you would like to learn more about animations check this tutorial out using the post processing i adjust the colors slightly and add a significant amount of limit time to create the first element of our ui i click the right mouse button go to create ui toolkit and select ui document this creates a new uxml file i call it many i open it by double clicking which makes us landed directly in the ui builder i focus the file by clicking on it and make sure the checkbox match game view is checked i added visual element that will serve us as the left section wrapper i change its color to black and make it 550 pixels white and 100 percent high using pixels is tempting that will not be very responsive you will see what i mean in a second i add a little bit of margin from its left and then adjust the colors alpha let's see it in the scene i add an empty game object and add a ui document component to it i drag the menu file to source asset input and for panel settings i just create default settings they usually work pretty well oh our 550 pixels white panel is definitely too narrow to support a wide range of screen sizes it is much better to change the pixels to person awesome now i add another visual element this time for our game logo i change its background to the image and then adjust alignment on the left section element to have it nicely centered another visual element this time for wrapping the menu buttons by the way pay close attention to how you name the elements we will need those names later when we write the script ok time to add our first button i drag and drop it into the buttons element then adjust its label and add the menu button class this will allow us to create a shareable style for this button which we will be able to apply to all other ones rather than style them all individually i copy and paste this button twice then adjust both names and labels i make the buttons wrapper grow to the full height by changing the setting in the flex section and then adjust the alignment i also add a little bit of padding at the bottom to move the buttons up time to create our first stylesheet we do it by pressing the plus button in the right top corner and selecting create new uss i am going to name the file menu styles now i'm clicking on the file and adding a new class to it in the top right corner the class name is manual dash button make sure you prefix it with the dot character this is the way we identify classes if you would like to learn more about different selectors i will leave a link in the description i click the class name and adjust some settings text size background and border i am also going to change default to do that i first go to the project window where i already imported a font i like i click on it and then in the inspector i click on the three dots and select create font asset in the new pop-up i click generate font atlas which will create for me a file that i can use in the ui builder once again i select my class and in the text section i change the font asset ok let's make a hoover effect to do that i am creating another selector this time dot menu dash button colon hoover the colon hoover is a so called sodo class that is applied additionally to the element when the mouse is hovering over it i click the selector and again adjust some settings this time text color size and rotation in the transform section in order to test it i click a small preview button in the top right corner looks alright but it could use some animations i open the transition animations section and adjust the duration that's how long it takes to change the settings to those of a new class i will need to add that also on the regular menu button class time to create another section you see when i dropped the visual element it landed under the left section it's because the flexbox is placing the items vertically by default to change that i need another visual element wrapping both sections with the correct setting okay i'll add one more element call it the right section and inside of it i place a new button our mute button i add our class to it so the icon rotates slightly when i hover over it i also give it the right name select the image and adjust its size then i simply change the alignment settings for this section and add a little bit of padding to have it nicely separated from the screen edge i will need a script let's call it menucontroller and drag and drop it on the ui menu object let the magic begin we'll need a reference to our ui document and as expected we can grab and store it in the awake method time to work on the play button we'll need a button type variable and then using the dock field first we want to access the root visual element and then use the generic queue method to query the actual button element it requires us to pass the type of the element we want to get in our case button and optionally name i recommend always using names as this is a little bit more extensible and prevents you from nasty bugs once you add a new button and forget that the previous one also didn't have a name and of course we repeat that for all the buttons we have now let's handle clicking on the play button to keep the code clean and hopefully more understandable i am going to keep only the things directly related to what we create now for example here we have the reference 2d button and a query to get it notice that i skipped even the part that grabs the ui document component in order to handle clicks we simply subscribe to the clicked event on the button we'll need a method let's create one as you see the clicked event does not require us to provide any parameters so this is quite easy we simply use the scene manager to load the first scene this is all we need to have a working play button the exit button is equally easy you see we only use different variables different button name and our exit button on clicked simply quits the application mute button time we need references to the icon sprites and one bull variable to know if we are muted or not then of course we also need the mute button and as previously we want to subscribe to the clicked event in the mute button on the clicked we reverse the value of muted variable and now this is where it gets a little bit more complicated we first grab the reference to background image style from the button style then we assign a new sprite using the background dot from sprite method the value depends of course on the muted variable then we simply reassign the background image styles oh and of course this wouldn't be mute button if it wasn't muting anything right well this won't mute anything besides the menu but sooner or later we'll learn how to mute everything everywhere properly so why not subscribe to my channel and wait for it now we just need to drag this sprite and whoa the magic is happening and when it comes to magic it would be great if you could cast this little like spell on this video and maybe even leave a scroll with a comment i am sure the algorithm gods would like that okay we are getting into a bit more fun territory changing the menu content dynamically first we need some references besides the button as usually we also need one for the buttons wrapper then as previously we subscribe to the clicked event on the button as a first step in our settings button on clicked we simply clear the section that will remove all existing buttons we'll need a little bit more space so let me hide some code one more time we need two more variables one for the uxml file with the template of the buttons and then another one to keep the actual buttons created from that template in the oak method we set the settings buttons variable to clone 3 of the template this literally will just create for us visual element with all the settings buttons inside let's quickly create them new uxml file named settings template and nothing fancy inside wrapper with three fake buttons and a single actual one called back button of course all of them have our nice and sexy meno button class in order to use the existing style sheet you simply click on our friend little plus icon and then select add existing qss let's save it and assign it to our script now there are two more things we need to add in the script first after we clear the wrapper we need to add to it the setting buttons easy of course in our awake method we also need to subscribe to the back buttons clicked event and then whenever it is clicked once again clear the rubber and add the regular menu buttons to it okay here's the whole relevant coat in case you would like to have a look here's the whole menu code i hope you found it useful if you enjoyed this tutorial like this video and subscribe to my channel and of course have a fantastic day love you and bye bye

Channel: PitiIT

Views: 26,404

Keywords: unity 3d, unity 2d, unity tutorial, ui toolkit, unity menu, menu ui toolkit, unity ui, how to create ui unity, how to create menu, 3d menu unity, 2d menu unity, game menu unity, play button unity, exit button unity, mute button unity, create menu unity, creating menu in unity, menu, menus, game menu, game menus, game dev, ui design, ui unity, unity ui toolkit, ui toolkit tutorial, menu toolkit, how to make menu, unity, unity 3d tutorial, unity 2d tutorial

Id: 8w0qvO4Vumc

Length: 11min 45sec (705 seconds)

Published: Mon Jul 18 2022