How To Use Unity's New UI BUILDER

okay so hello and welcome back to another unity tutorial in this video we'll be looking at unity's new ui builder and ui toolkit packages i'll be covering unity's own sample project where they show some different use cases and you can actually go and look into the code and how it's all set up and then after you've watched the video in the comments you can let me know whether you want to see me show you how to make from scratch either some menu screens or health bars or whatever and with all that said 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 i'll put a link down below so you guys can go download this project and have a look around it starts off with a menu screen obviously it's got this logo here it's got background we've got these buttons which have the like on hover the text goes gray we'll have a look at that in a minute we've got the different buttons where we click about and it then switches to this screen and it actually scrolls up so it animates it has all that it's different description we've got the scroll here we can hit back options you have this back start we go to the scene now i could make it wider but this is designed for mobile so the ui will look a bit odd if i put it in widescreen because as i said it is designed for mobile but we can try it like this it's not ideal when we when we try dragging sometimes but you drag your units over the board release and all this ui here is using the new ui system same with health bars in here and if when when i win the uh end game screen will also do the same so let's just try and win obviously this game is very easy you can just spam drag in all the units and you'll you'll win very quickly let's just give it a second i win it plays the outro kind of animation because i won and then the screen pops up match over the winner is team red then main menu fades in and we go back to the main menu which as i said it's designed for mobile so let's just put it back like this okay now we can put this to the side and let's have a look at how this works so the first thing is if you're making your own project uh using this new system uh you need to be using i think you can use 20 20.1 i mean this is in 2020.1 so yes you can it's also in 2020.2 and onwards and if we go into the project assets um uh sorry back from assets and go to the packages if we look in the manifest json by opening that notepad the two packages you need is uh community ui and ui builder and these are the versions if you just put in these versions and there just happens to be that so happens to be new versions from when you're watching this then if you actually once you've got them go into the package manager it will automatically tell you when there's new versions available so we just give this a second and you see here yeah there's a new version of ui builder so i could go ahead now and download that if i wanted to so once you've got the packages how does it actually work if we look in this scene this is the title screen we have the camera the light and the ui and the ui is just one game object with no children and this is the entire ui if we turn it off and on it goes off and on but we have two components we have the event system which allows input to the ui that's kind of standard but for this you have to use the ui toolkit event system as opposed to the built-in event system and the ui document this is what links your actual ui to the game because the ui is actually stored in your project now so we have these settings which they have here and these settings are like global settings for your ui you can right-click create ui toolkit panel settings and i when i tested this myself i just left it on default settings and i think these might also be the default settings so just make one of those and drag it in and then you have the source asset which is the actual document for the ui and these are just dot uxml files and in this project uh i can't actually seem to create one if i create ui toolkit it doesn't show up uh when i tested in my own project it did so maybe when you check it will also you know be on this create menu if it isn't you could just make a ux ml file so just you know go into your text editor like so go into your file explorer you can just make a new file and just end it in uxml and it should work just fine and once you've made it we can then open it up so uxml open and you get the new ui builder window like this and this is the menu screen and if we look over here this is the kind of hierarchy of the ui so we've got the title screen manager which is the um route itself which has three different screens it's got the title screen which is what we're looking at here and then it's also got this options and this about screen and the options and about screen obviously come on when you click options and about and go back and the way it's actually managed for clicking the buttons and showing one hiding the other it's actually done in a script so this title screen manager you see it's got a little hashtag for sharp c sharp uh there's actually a c sharp script in this project so let's go to the project and if we go to scripts ui there's this title screen manager and the code here is quite complicated obviously i i would imagine this code's going to get a lot simpler over time this is in preview and this is inheriting from visual element which is what allows you to use it in the ui and i'm not going to go into every line here but what they do is they use this thing here and this is like jquery if any of you have done web development you can refer to a particular component so here they're referring to these different screens the title options and about screen using the names and if you look back in unity sorry for jumping around a lot but i kind of have to for this uh they've given these names title screen option screen and about screen so you can actually refer to those in the code here and then if you look for example down here they can set the style display to be non and this is very this is very familiar if you have done web development because this actually uses css to do the ui and if you don't know css you can do most of this pretty much all actually by just changing stuff in the editor they give you tools for it here so what i'll do is i'll close the route and i'll go into the actual title screen um which is in let me try and find this title screen like this and you see this has the screen then it has the panel of buttons then it has the start options and about button and if i click preview you can actually see this working where i mouse over the start button and the text goes grey so how this kind of works is you have classes so if we look right now on the the button it has these different classes it has button unity dash button and unity dash text element and if we look up here at the top left we've uh well not we but unity have written their own logic their own uh styles here so that if something has the button class then it has these properties it aligns like this it has this size this merging and padding you can set all this up it has this text so size 32 obviously if i change that you'll see it change so all of these have the button class so anything that's button class has this text but then notice how they say button here hover so this means simply when you're hovering something with the button class this happens the style changes now these little um white little lines on the side show you which things are affected so for example when i mouse over it notice how the size doesn't change what the color does even though on button hover the size is smaller but that's because it's not got this white line it's not an actual modified thing if i said when you hover the size goes to 77 then obviously that's what's going to happen but because if i go back i can right click size and unset it the only thing that changes is the color goes gray so that's how that works for the hovering of the buttons and if we look down at the bottom left you've got the standard and this project thing in the library so standards are the built-in components that you can build your ui up from so you can drag in a visual element is kind of just like an empty game object i guess it's what the screen is in the button panel you've got obviously scroll view which they use in the about list view for i guess listing different things beneath it imgu container i don't know much about this but i think this is how you can mix old and new ui because i if i'm not mistaken i think this is the old ui system well it's called maybe i'm wrong there um and then down here you've got very common things you can add a label button toggle scroll bar text field fold out slider min max slider and i'm sure they're going to add more and more things to this so it's really easy for me now to just drag in a toggle here and then i've got a toggle obviously i'd have to mess with the actual positioning scaling margin padding to have it go somewhere useful but i've got a little a toggle bar down here and what they've actually done is they've taken this entire page this title screen and they've made it because it's uh its own asset you can actually add that into other ones just like how you can have prefabs in prefabs so that's how in their title screen manager what they've done is let's not say in the title screen manager they've clicked project here and this shows you all your assets in your project you can actually mouse over to preview them like the health ui the different options and settings and they could mouse over their title screen and that's what they did they dragged that in here and that's how they have their title options and about screen in here so they've made them all these screens separately and drag them all in to here and then they simply just enable and disable their styles when they click on the different buttons if you remember in the code it was changing the style from flex to none so if we look over here we could actually do it ourselves manually so if you mouse over display it says flex and none so it's dot display dot flex or none so title is currently on but i can put it to flex and i can go to options and then put that on i could also turn them all on but obviously that wouldn't be ideal now this one overlays the other one uh i can put them all on but obviously as i said this one overlays so if i turn off the about screen then it goes back to this turn off the option screen goes back to this uh i accidentally dragged that as a child uh that should be a child there and to be honest the actual designing of the ui doesn't get much much more complicated than that it's just a case of adding the components you want and just positioning them doing all the classes for styling and yeah again you don't have to write any actual css you can simply do it all in the editor over here with these different toolbars or different options the main other thing to cover is how you actually have for example the start menu go to a different scene because uh it's in the here but i didn't really cover it much so when you get something using the query here so for example you can get the start button you can then also call register callback on it and with that you can then pass in a different a type of event so you have here a click event obviously there's going to be plenty of others and the click event you can simply then say when it happens what to do well i want to call the start game method which is down here and then they've got something saying like if we're in the editor then make sure we're actually playing to load the scene uh if we're not in the editor then we just load the scene um and if we're in the editor and we're not playing then we just log saying that's what we would be doing so it's very easy just to say on to a particular element register for a particular callback so you could query any element and just listen for a click event on the element to do something whatever you like and if i go back to the project close this if we have a quick look at the card ui or the let's go to the script ui card element the card oh that's not the right one which is the one i'm on about so yeah what i meant was the card manager and this handles actually giving the player the cards and registering their events so there's a lot of code here but the important part here is when we have a card we subscribe to the mouse down mouse up and mouse move event so when the mouse goes down on a card it simply changes the render order so the hierarchy order it enables that little area where it shows us that we can't place our units stores which card we're dragging and also where we clicked and then simply for a card dragged it will just figure out where we're moving move the card to our mouse position it'll then raycast on the ground to see if we hit the ground then hide the card and spawn in the preview of the card that we're actually dragging as a like physical model and it'll then um parent that as it says parents it to the card preview so as we move the card around it will move with us and if it already exists then it will just move it instead of you know spawning in every frame and then when we release our mouse button it will obviously then see you know did we um raycast in a valid area if we did then we actually we raised an event say this card was used and we spawn in the the unit itself and get rid of the card so you can actually do quite sophisticated stuff right now and you know i'm not saying this is how it's going to be on release they might make the code a lot simpler to do the same thing they'll add a lot more tools for sure and they'll just make it a bit less buggy because right now it is a little buggy so as i mentioned this isn't a video to necessarily make you use it right now but if you're interested in it and it's exciting to you and you you like the idea of you know using css and all that fun stuff then sure have a go and try using the new system but as i said this is what unity is moving towards so i'm not sure how long it will be before this is going to be the norm i don't know how long it'll be before they remove the old ui system or if they even will maybe they'll try and keep both active at the same time but i'll definitely be doing more videos on this so if you want to see me make anything in particular from scratch because this is more of an overview let me know down below whether you want to see health bars main menu screens whatever and i'll be sure to cover that in the next few videos thanks as always for watching and i'll see you in the next one goodbye but of course before we go i've got to thank my patreon special thanks to taylor rustio francisco lira liz kimber louis ramos jake nixon benjamin hilde sam marcus matt freya malvin john salig david mcdermott exit voodoo vidi dustin miller wreck and uris letter if anyone else is able to help support the channel monetarily link to my patreon is down below as well as links to other social media such as twitch twitter and discord if you guys help us out by following on any of those or checking any of those out that'd be greatly appreciated and i'll see you in the next one goodbye

Channel: Dapper Dino

Views: 66,595

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: EVXFWXaZtjw

Length: 14min 47sec (887 seconds)

Published: Fri Sep 25 2020

Reddit Comments

[u/pmurph0305]

As someone with web development experience, I really hope UI Builder (and the underlying UI Elements) keeps moving forward, and gets sufficient documentation. UI is pretty much my biggest pain point in unity right now.

[u/nixarn]

Not worth it. It’s too early with too many issues and limitations. But shows promise!

[u/FelipeQuevici]

I hope that it gets released soon, looks waay better than the current system