UI TOOLKIT || Beginner Unity Tutorial

UI toolkit is a new and better way for building uis for your games and apps the process is similar to building web uis and the whole system is a lot more flexible it also allows you to create Styles and much more I'm in an empty scene and We Begin by creating the UI document so right click in the project create UI toolkit and create the UI document this asset will be storing all of the info about how the UI should look like the main difference in UI toolkit is that the UI is not actually living in the game World scene now we'll need to apply the UI to the world so that the player can see it so we'll create new empty object add the UI document component on it and we can select that the source asset is the ux ml file that we have just created you can see that we also need to create panel settings so right click create UI toolkit and create the panel settings asset in here we can specify all of the information about the UI but the main thing that you should pretty much always change is the scale mode so we want to set it to scale with screen size so that the UI is adapting to the screen size I will set it to match width or height and input full HD assign the panel settings to the UI document on the menu UI object that we have created and we should be good to go now we can just double click the ux SML file and it will open the UI builder for you so we'll be building all of the UI in the UI Builder and not in the game World in the top left part we'll have all of our stuff files under it we have the hierarchy of all of the objects that are in the UI and then we have some stuff that we can create for example some visual elements labels buttons and more and then we have the viewport and the inspector of those elements the first thing that we need to change is the resolution so select the uxl file in the hierarchy which is the parent of all of the UI and just say that you want to match the game view but because currently the game view is not full HD and we want to create full HD UI I will just untick that and set the size to full HD and if you want to see the background as transparent make sure that you select the unity default runtime team we'll Begin by adding some buttons for our menu so we can just take them from the control step drag it to the hierarchy or to the menu itself it doesn't matter and you can see that we have created a button you can see that the button is really thin and wide so we can just change its size but you will notice that you are not able to move it down and this is because from default all of the elements are sorted from up to down so if you'll try adding another button you can see that they are just stacking on top of each other and we can't move with them so what we'll do instead is create a parent container in which we'll set that we want to align all of the buttons to the middle and we'll set some spacing between them so instead of button We'll add new visual element and we'll scale it across the whole screen you can also do so in the inspector so just go under the size and set it whatever you want up here in the inspector I will also give it some name which we'll later use in the script to reference all of the elements under the buttons container I will just add few buttons sizes of the buttons are all different but we'll create style later for that I will select the buttons container go to the flex and right now we just want to order them from top to down so this option is correct we also go to the Align section and we will say that we want to align them to the middle so they are in the Middle top part of the screen and I will select one of these other options that will bring them to the middle of the screen also don't forget to give names to your buttons and now I will just select one of these that I will customize as I want it to look in the final game so we can change the size of the button go to the text change the text and its size we can also go to the background part and change the color of the background and another thing that I like to do is to go to the border and set it some radius so that it is rounded and to make sure that there is some space space between those buttons as we can move them we need to go to the marging and padding settings and give it some paddings and margin currently I'm just giving it some margin which is the space that is outside of the button the orange that you can see here now we'll create style for the button so that we can easily apply it to all of the other buttons so I will go to the top left part of the screen and create new USS file the file is not holding any Styles just yet so I will select the button go to the stylesheet part style class list and we can either add the style class to the list or extract inline styles to a new class the first option means that it will create new empty style for the button and the second option means that it will take all of the options that we set for the button now and it will create style from them so I will select the second option and don't forget to give it some name so now we can see name of the class here and we can just easily drag it and put it to our other buttons we can see that this size is not matching even though we set the correct style this is because on those two other buttons we have already set some inline Styles the inline styles are basically properties that you define individually without setting any style so the way that we can fix this is just right click and hit unset all and do it also for the third button but we obviously want to set the text in the inline style because if we would have the text in the style class then all of the buttons would have the same text the buttons look all right now I will just give it some background so I will select the buttons container I will set some background color for that we also need to select some image texture so I will just select Square texture give it some color and in the marging and pening section I will just give it some margin and if you don't want to be setting it in pixels you can also select percentage here this looks nice for the buttons so don't forget to save it and go to back to Unity in the game we can see all of the buttons as they should be we can try clicking them but nothing happens because we we haven't coded anything yet so we will need to create new C script for that I will add using unityengine.ui elements and create variables for all of the buttons this way of getting references for all of the buttons inside the script based on the name of the object is not the most optimal but the only other way that I know of is just instantiating all of the UI through the code in the void start we'll need to get the root of the UI so later from it we can get all of these buttons and other elements the root is a visual element so first we need to get the component containing the UI document and from it we can get the root visual element and from it we can get all of these buttons like this pretty simple I will just make sure that all of these names are corresponding to the names that we have in the UI Builder so just go back to Unity UI Builder and the name that we need is the name that we can see in the hierarchy so the play button you can always just copy the name and put it into the script next I have I will just create a function for each of the buttons so that we can then do something after we click it so we have those functions and don't forget to add the click event as a parameter now we can easily register the callbacks on the button so when we click the play button we'll just run this function we can register the callbacks on the button just like this and now we can check if anything happens and last thing to make this work don't forget to add the menu UI C screen script to the object where you have the UI document component so you'll press the play button yep it says that is playing the game go to settings and quit the game so everything is working now we can create some settings panel so I will go back to the UI Builder and first I will just add visual element that will be parent of the settings at a first glance it may seem that we can't fit the settings parent and the buttons at the same time because you can see they just don't fit in here the way to fix this is to select the settings parent go to the position and set it to Absolute position and now we can overlay as many elements as we want we have some bluish background for the settings but now we can't see the menu so if you want to see that just s the settings parent go to the display and set display to none in these settings I would like to have a button on the left and on the right have the text saying settings so under the settings background I will create label container that will be containing the button as well as the text next to it so we have the settings button as well as a text but we can see they are not on the same level so the way to fix that is to select the label container go to the flex section and I will say that I want to align them from left to right and lastly we can also give some pedding and mergin to the text yep that seems fine now I will just create some settings container that will be containing some sliders toggles and any other stuff related to these settings and for rest of these settings we could use the same principles that we have been using till now so like this we could create the whole settings really quickly now let's go to the script and just set up so that we can close and open the settings menu in the script I have just added a reference for the close settings button as well as for the visual element which is the settings parent I'm getting all of this in the start and we also have a function on close settings button clicked which gets fired when we click the close settings button we want the settings to be closed from the start so we can just say settings parent. style. display equals display style. none so like this we can just turn off the settings which we'll do on start and also when we press the close settings button and when we press the settings button we'll set the style to flex this is just the normal style when you can actually see it in the code we obviously have to first get a reference for settings part and then set it so I will just put this later in the start as we start the game we can see the settings is off I can try pressing the settings button we can see the settings we can move the sliders take these toles and do anything else that we have in here and if we press this button yep we can close the settings so this is how you can create a simple menu using new UI Builder if you would want to access some data from the sliders toggles and so on you could do the same way just create a reference for the slider and then grab the value from it don't forget to check out my Discord patreon I hope that this video was useful if you have any questions or suggestions drop them down to the comments don't forget to like subscribe and I will see you in next videos bye thanks for watching this video till the end if you are looking for a Unity searp or bold tutor then I am here for you so feel free to send me a message to my Gmail and take a look at my website for more info I can help you with your personal projects or teach you anything about game development you would want to know you are welcome

Channel: Freedom Coding

Views: 2,707

Keywords: Unity, Unity2D, UnityEngine, GameDevelopement, IndieGameDev, PCGames, Coding, C#, Easy, Tutorial, Education, Unity3D, Programming, Bolt, UnityTurorials

Id: TgOT3n9xues

Length: 11min 2sec (662 seconds)

Published: Mon Feb 05 2024