Making a custom inspector using UI Builder (Easy) | Unity Tutorial

UI toolkit is now the recommended way to create editor scripts for things like custom inspectors in unity as of unity version 20222 I believe Unity actually switched from IM GUI and now all their default inspectors are drawn using UI toolkit which you can see is being confirmed with our UI debugger here this video is for you if you don't know much or anything about editor scripting and you want to get your feet wet and learn a little bit using the newer easier editor scripting methods that UI toolkit gives you what we're going to create from scratch is a custom inspector for this script here I will show you how to style it very easily so that you can organize your data better I'll show you how to make use of Rich Text how to add and assign functions to buttons and how to hide certain objects based on the value of a bu variable ready let's go so I have this little player attack stats script and you can see there's really nothing to it it just holds some data so to get started we first need to create an editor script and it needs to be inside a folder called editor otherwise you're going to get errors when you try to build your game the editor folder does not need to be in the rout it can be anywhere in your project so I'm going to create a player attack stats editor and open it up now right off the bat there are three name spaces we're going to need to add Unity editor Unity editor. UI elements and unityengine.ui elements and we're not inheriting from mono Behavior we want to inherit from editor as this is an editor script and now we need to connect this editor script to our player attack stats script cuz this editor script is going to tell unity's UI how to draw the inspector basically so we can add a custom editor attribute type of player attack stats up here perfect now we need to call the method that actually draws the inspector if you type override we're looking for the create inspector goey function you'll notice right now if we save nothing has changed it looks exactly like it did this base here is a entially doing the default drawing for us but we don't want to do that so let's get rid of it and now to show you that this is working you'll notice that this method needs to return a visual element so let's create a new one called root and return it okay now it doesn't show anything which is perfect because now we can build it from the ground up like we want and you can do this completely with code if you want which would be very similar to the old I am gooey way however I want to show you how to do it in the UI Builder instead so in my uxl folder here I'm going to create UI toolkit UI document and I'll call it player attack stats visual tree okay now back in our editor script let's set up a public variable of type visual tree asset and in our method here we're going to call Visual tree. clone tree and pass in the root what this is essentially going to do is add everything that we build in UI Builder to our root visual element here so that it actually gets drawn and let me show you what I mean real quick let's open up our uxl file and I'm not going to explain the UI builder in this tutorial if you've never been in here before and you want to get familiarized with how it works and how to use stylesheets and all of that good stuff then you can check out this tutorial I posted last week which goes through all of that in detail now to open up more options for editor scripting we can select the rout and check the editor extension authoring here that's going to open up some editor only controls down here now for testing I'm just going to go ahead and toss in a label real quick and save now in order to actually connect our uxl or our visual tree asset file to our editor script just select our editor script and assign the visual tree up here now if we go back to our player attack stats we will see our label in there now to make this even more userfriendly let's click up here and turn on UI toolkit live reload just to remember to turn this off when you are done with your script building because apparently this is fairly expensive and it could just slow down the engine for you a little bit but now what it's going to do is if we add stuff in here it's going to update right away whether we have saved or not all right let's actually set up some proper stuff I'm going to drag in three different visual elements to act as containers I'm going to call these pane one pan two and pane three now in pane one I want to show these two variables from our actual script so in order to add those in to stay organized I'm going to add in another container or visual element and call it vs and inside there we're going to add two property Fields now we want to connect these property Fields with our actual variables so in order to actually connect them we need to type the name of the variable into our binding path here and I'm assuming this doesn't get redrawn when we bind something to it that's why it's not updating automatically but if I select something else and then select this script again it's going to trigger a redraw of the inspector and now you can actually see our variables again all right so we're getting somewhere now I'd like to add a nice big header above these so I'm going to drag in a label also if you want this to match the style of your inspector over here select this and choose active editor theme okay so we're going to make this say movement I'm going to make it bold and size 24 and actually let's add a black outline to it cuz why not and increase the letter spacing anyways you get it it's very very easy to style things okay so let's add some buttons now I'm going to add a button container here and then drag in two buttons into there now for these I'm going to add a style sheet so that we can change them both very easily I'm going to create a new player attack editor style and then create a new button selector and I'll apply that selector to both of our our buttons and you can confirm that's been done by highlighting over the selector here I'm going to change the height to 40% make sure the text wraps I'll add some margins and some padding and let's make them a little bit round as well now I gave more info about pseudo classes in my last UI toolkit video so if you don't know what I'm talking about go ahead and go back and watch that but you can use pseudo classes to make use of our transitioning animations here as well even for editor scripts I'll add a DOT button hover here and in the hover Pudo class I'll scale up the buttons and then back here in just do button I'll add a slight duration and now just like in-game UI we can animate our UI in the inspector now this would look a whole lot better if we had one section on the left and one section on the right so let's see how we can do that I'm going to create a do section selector here and apply that to to our vs and buttons containers and on that selector I'm going to add some margin and some padding let's give it a nice background color and for this instead of manually just selecting a color let's rightclick over here and let's set variable instead we're going to search for default background and choose this one what's really great about choosing a variable like this is that the color changes with our editor skin so even if we change this to light theme we're still going to have that slightly darker background but it's more appropriate for that theme and let's go ahead and slightly round the borders a bit here too and finally to get this into two sections go up to our Paine one here and change its Flex direction to row and I'll change the vs container to take up 60% of the width and the buttons can be 40% all right there we go also if you're enjoying the video then thank you if you leave a like or a comment now let's actually get those buttons doing something let's make this one say randomize move speed and we'll call it that as well and let's call this second one set to default values and we'll call it default values I'm going to set up the functions for those buttons here in our actual player attack stats script this one is going to select a random number between 0 and 100 and apply it to our move speed and this one is going to set our move and Das speed right back to their default values so to actually call those we're going to go back to our editor script so first let's set up some variables for our buttons and to actually get them we can do a query from the root and use a string to find the name that we assigned the button next we're going to want a reference to our player attack stats so here's a variable for that we say that this is equal to the Target and then cast The Script as the type the target is set once we use this attribute up here now as for the first button let's register a call back which is an event that's going to be fired when we click the mouse so let's use click event and for the call back let's call this function down here which just calls the function we set up in our attack stats script and same thing for the other button we're going to register a call back and call whatever function we want to call when that event is fired now you can see the numbers are actually changing when we click on those buttons for pain two I just want to show you how rich text works so I'm literally just going to throw a label in there this is really just about opening and closing using the right Texs it's very very simple I'll make this one bold and change its color to red and this one over here I'll add a hyperlink to it these are very easy to use I'll leave a description down below for all the supported Rich Text tags for UI tool kit and to make this section match let's actually add the section selector to our label and for pane three let's add a container with the dot section selector and inside there first I'm going to add a property field for our bu so let's set the binding path and we'll call it toggle Bull and then we'll add a visual element that's going to hold everything that we want to hide so let's call this all elements to hide now for the floats we're going to go ahead and add property Fields with their bindings and for the enum We'll add an enum and also set its binding path now in order to hide stuff based on a bull we need to register a change event call back on our toggle bull here so first let's set a variable for our property field and we'll find that in the same way as the buttons we'll query pass in the type and search by string let's set up the Callback function first we'll call this onb changed method and it will call this check for display type function which we'll fill out in just a second when we register a change event of type bu on our toggle here so we still need two more references we need our all items to hide visual element so let's grab that real quick because this is the one where we're going to change its visibility based on the value of the bu and in order to actually check the value of the bull we need to set up a serialized property variable and we can find that by using serialized object. find property and search by string the reason we need to do that is so that we can actually go down here and create our if statement and say if our toggle objects property dob value is true then we'll show it otherwise we'll hide it to show or hide we want to toggle between this Flex or none option here we can do that by saying all items to hide. style. display is equal to display style. Flex to show it and display style. none to hide it and actually we want to call this here as well so that whenever the inspector is drawn it also does a check that's either going to hide or show our variables as well and there you go you can see that's working as well now there's one more really important thing to note it's really easy to add stuff for organization and for example let's just put all of this stuff into a foldout group here and if we make these child classes of that fold out it's just going to work right but you'll notice that if we select another game object and then go back it doesn't seem to remember our last setting it was closed and now it's open which is annoying and makes this basically useless this is not happening with our other values because they all have binds on them they are bound to variables in another script so it reads from there but this fold out right now it doesn't hold or have any data attached to it so whenever we click our player it just draws the inspector and chooses whatever the default is which I guess is open so if you want it to remember the position it was in last but it's not bound to any variable anywhere all you have to do is give the view data key a name that's going to create a data key which will store its state so now you can see it actually remembers this works the same for basically anything that's Unbound Bulls even scroll lists if you wanted it to remember the scroll position you were at last this would work for that as well so as of right now there's not a lot of really great documentation on editor scripting with UI toolkit yet Unity is continuing to improve UI toolkit they have a long road map and they really want this system to be good because the UI toolkit system is is meant to be eventually completely replacing the old UI system for in-game UI as well as replace the old IM GUI system for editor scripting as well so changes are coming improvements are coming but it's now finally especially for editor scripting in a really good state where it's a lot less painful to make editor scripts than before that's all I got for you guys see you in the next one bye

Channel: Sasquatch B Studios

Views: 8,287

Keywords: unity, unity2d, unity tutorial, sasquatch b, game development, unity tips and tricks, unity tips for beginners, unity ui toolkit, unity ui tutorial, unity ui toolkit tutorial, unity ui toolkit onclick event, unity ui toolkit buttons, unity ui toolkit introduction, unity ui toolkit guide, unity custom inspector ui toolkit, unity custom inspector tutorial, unity editor scripting tutorial, unity editor scripting ui toolkit, unity custom inspector with ui builder, ui toolkit

Id: eCIv4i_i9bE

Length: 15min 22sec (922 seconds)

Published: Thu Mar 21 2024