Easy Editor Windows in Unity with Serialized Properties

one of my favorite things about the unity engine is the flexibility involved in presenting data to the user in the editor unity make it very easy to design tools and windows to help make parts of your project easier to manage or to do entirely new things with this is something I'm quite fond of as I like to build quite a lot of editor tools for projects I work on not only because there's something satisfying about presenting the data from a scriptable object in a more visually pleasing way than well this but also because it's often something that saves me a lot of time in the long run if I can invest a small amount of time building a tool or system in the editor that's going to make my work flow easier on a project I'll often try to budget that into my schedule you might have noticed a theme in the videos on this channel focusing around building flexible systems and how I try to focus on ways we can automate things in our code well that's true even when I'm building tools now it's worth mentioning that a lot of what I present on this channel comes from things I've accomplished or created in my own projects I mean the first two videos on the channel about localization were more or less pulled directly from my current indie game as well as things like the UI tweening controller one of the issues with this however is that I found myself repeating a lot of work especially when I'm dealing with building custom editors for classes the way a lot of us build editors to access properties in our scripts probably looks something like this always defining the types of field to draw and structuring it around different lines of layout code this gets repetitive really fast especially if you just want to edit a window to draw the default properties for an object or class like it would in the inspector and in a custom inspector you've got the privilege of the drawer default inspector class which is great but it also doesn't allow you to mess around with things between specific fields what if I want to add a separator between these two properties well I'm going to have to write out the entire inspector myself great that sucks but it doesn't have to hi there I'm Matt and welcome to game to have guide in this video we're going to take a look at how to use the see realized object and serialize property classes to automatically and easily draw editor windows for our custom classes so you can pretty much ignore the scene itself here as we go to mostly be working in the editor rather than anything in the scene but I just wanted something that looked better than the default skybox and overall grayness so I picked a nice calming forests in a quarter scriptable object here that's holding a list of game data classes the game data is a serialized class that's full of other various options and settings I want to be able to edit as I'm developing my game the problem is there's a list of them here and as you can see it's pretty much a nightmare to read and manage so it's the perfect candidate for an editor let's create a new folder called editor and let's create two new scripts game data object custom editor and game data object editor window in our game data object editor window script let's create a static method to open the editor window and it will take a reference to our game data object which will need a bit later then in our custom editor script let's extend from the editor class and give it the attribute as a custom editor for a game data object class then let's override the GUI and create a button that opens the editor window while we're here let's also make a script that opens the editor window if our asset is double clicked at the top here let's create another class to handle these events and using a static method and the on open asset attribute we can read the selection and determine how to handle it so here if the object is selected is a game data object will create an editor window otherwise we'll tell unity that we didn't handle the open now back in unity when we select our object we can see that we have a button instead of the list and if we double click it it now opens an editor window for us so the next thing we want to do here is display a list of all of our items and then when one of them is selected we want to draw the properties of our game data class now usually we'd go in here and start building out an editor but this video is all about automating the editor process so let's look at how we can do that we're actually going to write a script that will agnostically draw properties just like the inspector would without any input from us so let's create a new class in the editor folder and we'll call it extended editor window in here let's extend from the editor window class essentially the unity editor itself draws all of the properties using serialized objects and serialize properties which is sort of a wrapper class that unity can figure out and then draw from so the idea here is that we're going to use our editor window to take a serializable object and draw all of its properties out like it would in the inspector so let's create a reference to a see realized object and then also a reference to a current property then we'll create a class could draw properties here we're going to iterate through everything and draw it out using the edited GUI layout property field method first we check if the property is an array item and if the item is expanded we'll then loop through the method and draw its properties out essentially due to how unity stores data this just acts as a recursive way to draw out the depths of an object now because the for each loop goes through every single property we use this last prop path check here to stop child properties from being drawn over iteration so now back in our editor window let's have this extend from our extended editor window will then also assign our data object as the serialized object to use and finally in our own GUI method we'll assign the current property as the list in our data object using the find property method and then we'll tell the window to draw that property and its children now if we take a look at our editor window it's essentially drawing everything as it would have done in the inspector brilliant in fact one of the major benefits of drawing your editors using sterilized properties is that unity will also draw any of your custom properties automatically for instance our localized string drawer here would be quite an annoying property to work with if we're building a custom editor the editor QE layout class doesn't contain any way to draw this so I'd have to either do more work and write another drawer or somehow or extend the one I've used for the property drawer in the inspector but thanks to serialize properties unity is instead just drawing the field the same way it would in the inspector so this is a great start we've managed to handle all this data in a window with one line in our editor script however it would still be nice to clean this up a bit so let's make a button for each of these array elements and then have our tool set the selected property when one of these is pressed at the top let's create a string code selected property path and a serialize property code selected property now let's write a method could draw sidebar which will assign a serialize property if a button is selected then back in our editor will draw the sidebar and just check if a property is returned if it is will draw all of its properties like that now if we look back in unity and open our editor we have a dynamic viewer for our data asset which is a little bit nicer to read than how it was in the inspector now you're probably thinking that's great map but what if I don't want to have everything drawn I just want individual elements without all of the work well I've got you covered friend we can do that too let's extend our editor even further so we can just draw individual properties instead and our editor window script let's write a new method could draw a field this will take in a property name and either find it relative to the current property path or base it off of the base serialized object path and in our editor window let's replace this method with a new method called draw selected property panel and then let's set the current property as our selected property here we'll write some logic for drawing our panel using the draw a field tool we've just created and we can continue to fill this out however we like with just a few lines we've built a much nicer looking editor for our object and we can easily repeat this for various editor windows across our project simply by extending from our extended editor window class the final thing that we need to do is add an apply method to make sure that any changes we made get stored back onto our sterilized object so let's write that and then add it to our GUI in our editor window as you can see with just a few lines we now have a much cleaner and much more readable way to build editors in unity and that's about all there is to it obviously this is just scratching the surface of some of the ways you can automate editor properties but I found myself often just wanting to focus on the layout and function of my editor tools rather than worrying about how the fields were being drawn or how the data was being handled so this system lets you do just that anyway if you've enjoyed this video and found the guide helpful be sure to hit the like button and leave a comment let me know what you think I was actually planning on building a basic traffic demo for you all this week but due to some time constraints I've had the past few weeks I haven't managed to get around to it yet but that's very much in the pipeline so if you're new to the channel be sure to subscribe to be able to know when that's out and available also feel free to check out some of the other videos on the channel I'm really pleased with the last video it was all about building a pseudo isometric camera for a simulation strategy game there are lots of things covered in it so if you're looking for something meaty or something about cameras be sure to watch that if you haven't already because there's a lot of information there for you otherwise as always thank you very much for watching and I'll see you again next time you

Channel: Game Dev Guide

Views: 59,344

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games, unity editor, editor window, serialization, draw dynamic editor, draw, property draw

Id: c_3DXBrH-Is

Length: 10min 57sec (657 seconds)

Published: Mon Jul 08 2019

Reddit Comments

[u/Freak_ey]

The quality of your tutorials are consistently good and you're quickly becoming my favourite tutorial channel for Unity - most channels don't really dwell much on the inspector side of things and you've done a good job of making original content rather than rehashing the same basic "Move a ball tutorials" that other channels have done. (Not that they don't have their place - they were really useful for learning Unity when I started out - but it's good to see some more advanced tutorials).

[u/cemleme]

very nice tutorial, just subscribed to youtube channel

​

how about diving into the UIElements?