How To Create Dynamic UI With The NEW UI Toolkit - Unity Tutorial

okay so hello and welcome back to another unity tutorial today we'll be looking at how to set up and use the new unity ui toolkit i made a video a couple of weeks ago showing you how it worked going through a demo project but a lot of you wanted me to make my own tutorials on how to use it so i hope you're looking forward to it let's get started but first i'd like to thank admix for sponsoring this video admix is a platform designed to help devs monetize their game without interrupting the player's experience by seamlessly placing ads inside the game world it takes less than one hour to get set up and with no coding required just drag and drop the ad placements into your game it's also fully integrated with unity and unreal engine there's also an online dashboard with plenty of analytics to help you optimize as you go check it out by following a link in description down below so here we are inside a new project i've just used the universal render pipeline template so i've not actually added anything to this and i'm running 2020.2 beta2 now i'll be putting a link to this down below and it's a thread on the forums which explains how to get started and they are updating this because right now if you're on a newer version than me because i'm on 2020.2 beta 2. if you're on a newer version apparently there are some problems so please use it on this version or earlier until further notice the next step is to install this package which is from the package manager so you have to add in this string com.unity.ui into the package manager so let's head back into unity so we'll go window package manager and when it lets us we'll hit the plus button and it'll add us to put in a url or a link of some kind so if we hit plus add from git url we'll paste in com.unity.ui and hit add once that's done you'll see that the ui toolkit is in here and we need one other thing which is the ui builder and that's what allows us to actually do the dragging and dropping and building of the ui and that's a preview package so to get preview packages you have to hit this little cog and go to advanced project settings and enable preview packages i understand we can close it and now if we want to look through the packages in the unity registry we can go find it in this huge list so we're looking for the ui builder so i'll imagine it's at the bottom look at ui ui builder here we go we can install that now that all the package is installed we can go back to our scene and we want to actually start setting up some ui so we can right click and we can go to ui toolkit which is now here and we can add a ui document which will set some stuff up for us it'll give us this in the scene with some components the ui document and it has this panel settings and these are like our default ui settings it's actually put it down in the scene in the assets so it has some default settings we're not really going to mess with so i'll leave it like that and then we've got this visual tree asset which is empty and that's where we'll actually make our ui and then this event system to allow for input and it only adds this if there isn't already one in the scene and it doesn't have to be on this object we could make an empty game object move it onto there and it's all fine but this is what allows us to interact with the ui so now we just need a visual tree asset so we can go down into our assets right click create a new ui toolkit ui document and we can just call this something like the testing ui or the tutorial ui or something like that so i'll say tutorial display and with that you can actually drag it in now over here and we don't have any ui currently to test it with but let's open it up and it gives us the ui builder window and you can go stick this on a second monitor you can dock it wherever you like it's up to you but for now we will just open this up in the middle and i'll make it full screen and all we're doing for now is making a simple counter ui with some a label and some text with a button so what we'll say is we'll say over here if we click on the root hierarchy this is our you know where we stick everything we can press this button at the top right match game view and then scroll out so this is showing us okay this is how our ui will look on the screen it's currently blank and what we can do is we can drag in a visual element which is kind of like an empty game object but it can also have a lot of settings on it it's nothing special we can't interact with it but it's just something to hold some other elements so what i can do here is i can say let's make this fill up half the screen so if we scroll down here there's loads and loads of settings we can say we want the size currently it's auto so we can say percentage and we can put in 50 and 50. so now it fills up half the screen width and height and then let's say position it in the center so there'll be different ways to do this but what i want to do is i want to say over here position and i'll say well if that's 50 then i want a 25 gap all the way around so it'll add up to 100 so i'll say 25 percent 25 25 and 25 so now it's in the middle with 25 on either side and then it's 50 percent width and height so for to make sure that opacity is full and that we can pick a color here so we can say pick some kind of dark gray make sure to hit save so that this asterisk goes away and if we move this we can now see we've got our our element in the ui and let's stick some text and button onto it so we can drag in a label as a child drag in a button and for now obviously they're really small we can tweak that in a second make sure we give the label and button a name so we'll set the name up here to be counter dash label and the button to be counter dash button and now we can set all these elements so we can say the size of the button i want the width to be 50 percent and if we go back over to the root this visual element we can say over here somewhere the alignment we want the children to not stretch it says here we want them to stretch but let's say to be centered and centered and now we go back to the button and it needs us to redo the whip so we'll say 50 whereas the height i'll just put in an actual value so we'll select pixels and we'll just pick some pixels i mean let's say 50 50 span and as for the button text we can scroll down here and we can tweak that to be let's say that big at 45 then we can go over to the label we can go tweak the label size and then the label will scroll up to the top and it has the text here so we can set that to say count colon zero and maybe we want some padding between the two so there's a gap so let's go down to merging padding a bottom and we'll just add on some padding sometimes it's a bit glitchy when you're changing stuff you know it's in preview like i said this is more teaching you how to use it rather than telling you to use it right now yeah i'm happy with my ui so make sure to hit ctrl s make sure it is all saved you can see it back over here if we hit play right now nothing happens so we need to write some code to make this button change this ui let's stop running this and let's close the ui builder and we'll go to our scripts we'll make a new script called counter the way i'm going to be coding this is how they do it in their documentation so it's consistent so they'll use the on enable so on enable to grab the ui elements themselves and we need to store a label and a button so i'll say private label make sure it's from ui elements and we'll call this the counter label we want to store a private button called the counter button then here we actually need to grab it and we can grab it from that ui document if we look back into unity you should remember over here we've got this ui document and it's this component here we can grab the elements from so let's say get component ui document and it has this thing called the root visual element which is where you can get all the components from and we want to store this so let's say var root visual element equals and then let's grab our label so to grab the label we can say counter label equals the root visual element dot and they have this thing called q which is query and we can query for a label a label and we then want to pass in here the name of the label so we called it the counter dash label now we can do it with the button too so we can say the counter button equals a root visual element dot query for a button with the name counter dash button then we want some function to be called whenever we click on the button so let's make a private void increment counter and for that we actually need a value so a private int count and we'll say down here we want to increase that number so account plus plus and then we also want to update the ui so the counter label dot text should now equal count colon and then the actual value of count so that'll update the string but we need something to say call this when we press the button so you can over here register some callbacks we can say for the counter button whenever it's clicked register callback click event so whenever it receives a click event we want to call increment counter and this will actually give us some data so we need to make a variable for that and they call it ev which is the event data and we can say we want that to call uh increment counter and if we needed data from this we could say ev dot and then there's all these different things you can get but we don't need that so we'll leave it blank so now we say all right when this starts existing we want to grab the root visual element grab the label in the button and for the button we want to say when we click it call this function which will increase our counter and update the ui if we head back into unity and we add on the counter component to this object let's just make sure that we got the strings right so counter dash label and counter dash button so we'll go into the builder and we'll look over here it's counter dash label and counter dash button so that should be good let's hit play and if i now hit the button we see that it updates the text and it says count colon and then the number that we're on and it works so yeah that's it for this tutorial i know it's a pretty simple introduction into how it works but i thought it's always good with this kind of thing to do a short and simple video on how to set it up and get going so now you know how to start from scratch and have this work you know feel free to look into the documentation to see how you use sliders and all the other little things but i'm sure i'll be doing some more videos on all those things soon if you found this video useful and enjoyed it then please leave a like and subscribe it will help a lot but apart from that thanks for watching and i'll see you in the next one goodbye but of course before i go i've got to thank my patrons special friends too francisco lira liz kimber ella bailordai benjamin hilde david mcdermott dustin miller farrow jake nixon john salig yaris letter katinka mum louis ramos matt fryer san marcos malvin and rank if anyone else is able to help support the channel monetarily link to my patrons down below if not there are also links down below to other social media such as twitch twitter and discord if you could help us out by following on any of those or checking any of those out that'd be greatly appreciated i'll see you in the next one and goodbye

Channel: Dapper Dino

Views: 40,149

Keywords: Get start with Unity, Get started with game development, How to make a game, What is a game engine, Unity tutorials, Game design, Game developer, Game designer, Video game developer, How to make games, Game development software, C# Game development, How to, Dapper dino, What is Unity, Animation, Animator, C#, Coding, Programming, Multiplayer, Shader, AI, ML, Scripting, Mirror, Server, Client, Unity multiplayer, Unity 2020.2, 2020.2, 2020, UI Builder, UI Toolkit, UI, Builder, Toolkit

Id: 6zR3uvLVzc4

Length: 11min 52sec (712 seconds)

Published: Sun Oct 18 2020