Unite Berlin 2018 - Editor Scripting the Scene View

hello welcome to my talk editor scripting the scene view I am Oliver Emily and I I'm going to present you some some ways where you can improve your productivity or where you can create tools for your team or for yourself so your level design might get go smoother so yeah scripting is really one of my favorites the talks topics to talk about it's a huge huge area in unity there are so many different different ways you can script the editor and change the editor to your will and we're going to talk about a specific one so first things first and the assets the project that I am the demo project that I made for this talk will be available next week on let's cut Gamescom and just so you know and you can get all the code and look at it later so what is editor scripting and the unity manual quiet cryptically says unity lets you extend the editor with your own custom inspectors and editor windows and you can define how properties are displayed in the inspector with custom property drawers which is I think not a very good explanation but it's what it actually means is so custom inspectors means in the inspector your components can have a custom view like in the top left for example in this example script you have you have damage in an almost crypt and you have these these knives visualizations of the damage and and are more values there and it's it's easier to visualize stuff it's easier to make the editors in such a way so it's you can edit your own control your data better you can create your own windows just like the project window or the the scene view window or any other window in unity you can create your own so for example I often have a window in my projects that has kind of a game prefs set up so so I can can set up some basic game variables for it really depends on the project but yeah you can have your own windows and there they are dockable just like any the unity window itself so it's very easy to position them in such a way so you can work very very easily with them custom property drawers are a super interesting thing where you can if you have a data type that you use very often in this case for example at the very bottom here you can see the return rate the turn rate is just the float value and this script you see it on the left side that's that's before the the property drawers were applied but the turn rate sometimes these float values have a specific meaning they can they can only be between 0 and 100 for example or they mean something to your game that unity cannot decipher on its own so you can create a custom property drawer so so whatever is drawn in the inspector fits much better the the the data that you have and you can and can edit them much more easily and you can also work with handles handles are really stuff that you can draw on the scene view so there the position and the rotation handle the default handles by unity you know them quite well but you can also do your own so and that's what we're going to talk about today so editor scripting is sometimes really hard to learn because the resources so there's them there's the manual by unity and the scripting API of course but that's pretty scattered and and and hard to get through or it's it's hard to know where to start and you have a bunch of tutorials online you have actually a bunch of tutorials on the unity YouTube channel so if you if you search for editor scripting on the on the unit YouTube channel you see a bunch of videos and the top two videos actually our talks that I did over the last last four years so as you as I said before editor scripting is my favorite topic to talk about so I talk about it every other year it seems at unite so if you enter you and if you want to learn about how to write custom inspectors and stuff like that the 2016 talk is pretty good for that and if you want to get an overview of what editor scripting can do in the 2014 talk I show you basically my game projects my actually game projects and what kind of editor scripts I did in them so that's basically just a pile of nuggets and hopefully there's something there that you can take home yeah so but as I said I talked about editor scripting a lot so about me I'm Oliver and I'm using unity since 3.5 so for over eight years now I'm an indie developer since 2011 it was nice to do Hamill ups I do unity tutorials on and off on YouTube the channel let's code games and I am a VR developer since 2015 and you can see it on the photo actually of my wife pre there I was able to work on it on a launch title for the wife and if you just indulge me for a minute here and the the Holika Fey that I'm working on right now my current project that's actually a VR arcade and also we develop our own games so I just just want to show you a minute what we do there and then we can jump into editor scripts and so the holography as I said is a VR arcade we develop our own location-based VR games but what makes a specialist their local multiplayer VR games so we have four people using the live at the same time [Music] [Music] [Music] [Music] [Applause] [Music] [Applause] so yes so it's it's quite frantic it's quite fun to have four players in VR at the same time and we have multiple occasions in Germany and we're expanding in the future as well so if you into VR and and multiplayer stuff you can also come talk to me later it's quite fun okay back to editor scripting let's talk about handles handles like the as I said before like the position handle and the the rotation handle and everything that unity provides us are those are the basic methods that we can interact with objects but interaction can be so much more complex than that so for example if you if you work with the unity to unity terrain before you have this and you can draw on the terrain you can draw the Atlas Methodist blood maps and so you have different textures blended together on the terrain and that's also done using using handles and the way you can you can draw on the terrain and I mean now with the 2018 and we have pro builder for free in unity and pro builders basically just an explosion of editor scripting so everything done there is in its editor scripting and the the cool part is that unities editor scripts are actually open for us to read so back in I'm not quite sure well a couple months ago a month ago unity actually open sourced all their c-sharp source code and you can look at it on on github and see how all the editors that they wrote how they work and how they wrote them and that's actually one of the best resources to learn about this stuff because everything that you can do in unity everything that's possible in the editor is actually done with the same tools that you have available so you could if you wanted to recreate the whole unity editor interface at least and functionality by yourself and rewriting everything and maybe improving upon it and the I have a link to the the github repository at the at the last slide so that is a super useful resource okay so a couple of weeks ago I was thinking about how to do this talk and and and how to show what handles can do and how powerful they are and I think it was a week or two weeks back and there was this this awesome tweet that I saw by by someone who said I made a pong and the unity editor so that's the unity inspector custom inspector that plays pong and I like everything about this this video I mean especially I mean it's using editor scripting as in a very useless way and I like that the actual script is called procrastinate which is amazing so I thought okay great this is actually a cool idea to show off what editor scripts can do so I made a small let's call it the handles game jams and and try to make make a game that's only done using handles so this is unity you know it quite well this is an empty scene so I want you to note that what I'm about to show you I'm not touching the play buttons and also the hierarchy on the left side is completely empty right so there are no game objects no particle systems community whatsoever in this scene so it looks like a quite like the default view of unity but in the top left corner here you see the small small buttons and once I press this my editor scripting game is being shown and actually what I'm what I try to recreate was the game missile command from the old arcades and so again nothing in the hierarchy we haven't pressed play at all and we have a couple of different things we can see here so the green circle is basically the play space where everything is going to happen the the Scion cylinders here are supposed to represent buildings and I mean I'm a coder so this is program art obviously and on the the RET the four red cubes here are actually our turrets and what we can do with our turrets is before I start the game so we have this this fancy arc handle that I'm going to show you how to do a little bit later and so we can have and have an angle that we can set up we can also rotate the cubes using this disk handle here and then when I press the cube a missile is firing with a nice little particle effect there I mean whenever you don't have a particle system and you're a coder you're you'll have the urge of writing your own particle system so that's what I did using handles this is this is a handle particle system not very useful obviously but it looks cool yeah and when I press Start game actually my my city is being attacked by all these by all these missiles and I have to try to line up my turrets in such a way so I can shoot them down before they before they touch the ground yeah again super useless but fun and you can you can learn quite a lot about more actually I learned quite a lot about handles and what they are able to do oops okay well I'm going to lose here but but that's fine so let's talk about all the different aspects that went into into making this game so I try to for for every component in this game I try to use a different handle a different a different way to achieve this so in the end I ended up with all these different tools that I can show you and hopefully teach you something new that you didn't know before ok let's start with the simplest simples handle that we can that we can have so handles are actually being used so I am I will I will talk about how I made this game later if we have them sometime but here I'm going to show you how you're actually supposed to use handles so this is a capsule and when I click on it it actually says the the position of the capture below it this is one of the most basic sway basic ways you can you can use handles to just have a text in this 3d scene view so you have some some some game data there that you need visible at all times and stuff like that for example the the script for this is actually completely empty because it's a narrative group but we need a component in to to actually draw handles right so just like just like editor scripts in you you have like four for the inspector the the handles are also scripts that are drawn for a component so if you go on the editor folder here the other two folders actually quite special the name is special because everything that is in the editor folder is being compiled into a different assembly that unity only accesses when you are using the editor so everything you do in here will not be available to you at runtime which is helpful if you have editor scripts you can have debug stuff in there hacking stuff in there just so you can make a game more quickly and you don't have to worry about this code ending up in your runtime okay so let's go so the script is the label demo so let's go to the label demo editor here and oops I wanted to change the font let's make this a little bit bigger all right okay I have no idea why visual studios is marking everything here but it works we saw before so fine and we just deal with it so this is this is the the editor script for and for the for the label and basically instead of when you if you know how to do regular inspectors you basically have this function on inspector GUI here and you can you can draw stuff like this and then basically basically for my for my oh well I'm I'm sure I'm mispronouncing like that you're going to need to to have your your scripts show up here and be in the inspector but to have something show up in the scene view you actually in use the callback on scene GUI and this is to handle scene view events and you can not only I handle repaint events in here to draw stuff you can also handle mousedown events or keyboard events and so if you want your your your script to be able to have some shortcuts something you can do that here as well okay the handles actually quite annoyed that their assemblies are not loading here one second let's restart very studio so to draw a handle you are you're using the handles class that's in the unity editor assembly so the first thing that you do is you're at the very top you are importing the the unity editor assembly and then you can use the the handles class in this case we're using the label component it asked us for a position where it where it's supposed to draw the the label and then it asks us for string whatever we need to draw so in this case we simply passing the position in here there and and casting it to a string and to draw this so one of the simplest ways to have a code or any debug data show up in the in the scene view so let's go on a little bit and see how we can make GUI elements so in the scene view we can actually have all the regular GUI elements that you can draw on the inspector you can have them show up here as well so as you can see here when I click down on the on the script and my GUI demo component is attached it actually draws this little GUI here and when I change the change the slider you can see here that the test value that I have here is actually changing from 0 to 10 and when I press hello walls it it prints out I had a world statement so whatever you are able to do in the with-with-with GUI components you can also do that in in the scene view quite simply by by declaring that you want to draw a GUI and using handles dot begin GUI and then you can use all the GUI or GUI layout components that you know or even add a GUI layout and that you that you know from inspector or classes and other GUI classes so I use the horizontal slider here for example and I have the button here so quite simple stuff but it is useful to sometimes have have gooey stuff in the scene view right next to your object so you can really see and compare what what happens when you change values and stuff like that okay moving on so in this scene I have well you have to use your imagination here but this is supposed to be a door right and and when I click on this door I have these two and two shapes show up and they only show up when the door is active of course and they have a hover stage so it seems like I can press on them and they are actually they are actually buttons so in this case I can press the green button to open the door and the red button to close the door so that's obviously quite useful if you if you have a bigger level and you have certain states that you need to check out for for your objects you can simply have these these labels these buttons here and and switch between the different states of your objects and see how they how they change within your company within your scene so for this the the script itself the component actually has simply has two two simple methods the open door and closed door and basically what the only thing that I do is rotate the door in this case but you can imagine much more complex behavior in here and then for the for the editor script I simply use the handles button the button class this also takes position where it's supposed to supposed to be drawn you can also have a rotation since these are 3d objects this function takes the size how big is supposed to draw and then also a clique size so you can have a bigger object and also only have it be able to only you're only able to click on it in the in the center for example I'm actually not quite sure why you want that but there you go you can have that and then also you can pass on a cap function and cap functions are something that uh that they come up in in editor scripts quite often and basically in this case this is a cube handle cap and you can you can imagine the caps if you think about the default the the default handle here so the the movement tool for example they have arrow caps right if I switch over to the scale tool now I have cube caps so that's basically just what is the the end point the thing that you click that's that's a cap and a handle and you and you can pass on you can create a movement handle but have a different cap in there so it looks differently okay so in this case we use the cube handle cap we don't have any lines around that so basically that just means draw a cube and since this is passed into the into the handles button method here basically the cube is now clickable and we can simply have an an if condition around it so if this button is clicked then we want to open the door and if the rat in this case we use a red sphere if if we click this then we we call the closed door method right that's the next thing is sometimes we want to draw a debug data into the scene maybe you know about gizmos you can use those as well but handles is also a way to draw the back data into the scene so in this case we have a capsule again and the capsule in the hierarchy has four different way pounds points as as children and when I click on the capsule the waypoints are actually visualized so I have a line drawn here and then the area the the waypoints make is also being highlighted so this is obviously useful if you want to have different areas in your scene where where maybe you can maybe you want to highlight your your trigger trigger volumes or you have an area where there's where's danger like a lava area and that player always takes takes damage when when they're in that in that area this way you can visualize that area and it's easier for you to see if everything is is where it's supposed to be when I when I click on the different weight points here it disappears though because the component is actually only on the lines lines demo component here which is on the parent of the waypoints so that's that's a little bit annoying so let's find a way but we can we can move the waypoints like this and then go back that is not very helpful so let's see how we can make how we can improve upon that a little bit the next scene I have basically the same scene but in addition to the oh wait no I want to show you how I actually did the lines first which is helpful so the lines itself again an empty script but the lines edit well script is being done like this so first of all I iterate over all of the children of the target that I have selected and so in our case the four waypoints I always get the the previous one and the current one in this iteration cycle and then I use handles dot draw dotted line it takes two positions and then it takes a float value that basically determines how how big the dots the dashes are of of the of the line and so this is how the the dotted dotted lines are being drawn and then the the yellow transparent area is being drawn by using the draw a a convex polygon function so it draws an anti aliased convex polygon and this simply takes a parameter like a vector three array of all the points and then it draws it draws a convex polygon between and between those points another thing that you can see here handles has a color property that's basically a static property of fall handles that come after that so in this case I made the the line color yellow and then for the convex polygon also making that yellow but mooting multiplying that by 0.2 for the alpha value so it's a little bit transparent okay so let's improve on our script a little bit so we don't don't have to go into the waypoints every time we want to change the area here so what's this this one so again same scene but when I click on the capture now I have the lines demo scripts just like before on this component but I also have the position handles demo script here and the position handles demo basically draws a movement tool on each of the waypoints so now I don't have to access the waypoints to change the position of the of these waypoints I can simply do that for all waypoints that are that are visible here so that's obviously much much easier to use and an edit so it's it's quite simple to use the default Unity handles in a new way so let's look at how we did that so for the position handle script this is it's a really really simple handle script basically we have handled stop position handle you can give it a position any rotation so how the how the three arrow handles being drawn in which direction and where it's being drawn and then it outputs the new vector from its position so when I simply pass this on back into the child position I can now move the child's the children without having to select them so that is that is quite handy okay so let's go into some more more complex handles let's open the arc handle the arc handle a class by unity that is what they call it an intermediate control basically and I'll show you in a second how you can wait that's great one second this is actually supposed to be the next scene and this supposed okay so this isn't our candle and our candle visualize is in arc and also it allows you to to edit that arc so you have an angle angle component that you can there you can modify and you can see here in the in the inspector it actually modifies the value and and also you have these these radius handles that you can click and drag to actually change the radius of this so you can imagine this for example if you have a stealth game and you use this to to define the area where a camera can see the player this is a quite quite visual way to do that for example okay so the app handle basically the script itself simply stores the values the radius and the angle and and then the editor script has first of all it's using the intermediate GUI controls so that's basically the intermediate GUI controls it's basically just a pile of helper classes that unity provided for you to use if you want to do some some more advanced stuff that but that's also quite common that you must for so for example if you imagine for if we use working with a Collider the sphere Collider or capsule Collider rather and you press shift you see the handles so you can change the capsule Collider quite easily that is an intermediate GUI control so you can use that for your scripts as well and to easily change change vehicle itis or three sphere objects yeah and the arc handle is one as well so our candle is simply a class that we instantiate on enable and then we set up some default values so basic it would just say that it's a red it's supposed to be drawn in red and then the center part has 0.2 opacity so it's it's quite quite transparent and then in the unseen GUI we need to do just a few things but it's not not too bad so first of all we set up the angle and the radius and so we from the from our object we get the values that we have stored in our objects and pass them on into the arc handle so it's been drawn correctly then we using a new drawing scope I will talk about that in a second and in that drawing scope we call draw handle and so now draw handle does everything for us and it also saves the new values back in the arc handle angle and radius values so after we've we are done with everything we can save them back into our object and so these values are stored the the drawing scope is actually a helper method for handles if you have much more complex handles that that use parenting and and different positioning and stuff like that a drawing scope basically takes a matrix in this case position rotation scale matrix and so so like this one so you can create a position rotation scale matrix simply by using the TRS so translate rotate scale methods and passing on the position rotation and scale that you want to use and then we pass that onto into our drawing scope so now everything in these brackets is using this matrix as a base matrix so if I draw let's say handles we draw a line and then we say the line starts at vector zero and this should end at vector three up so basically just a line that has one unit all and ends being drawn from from zero to two one once this compiles you can see all the colors not quite good but you can see this white line being drawn here but since we set up set up this matrix here to the position and the rotation of our object once the object moves this line moves with the object and once the object rotates the line rotates as well right so this is how a drawing scope gets useful if you have chains of children and you need to use them to to draw your handles and in relation to your object rotation and position so you can simply use drawing scopes all right so this is how you can use the arc handle again just a helper class that unity provided but it's actually quite hidden in these iron and intermediate GUI controls so I was quite surprised to find this actually in preparing this talk and because it's it's a very useful handle okay so these are all the default or I mean they're plenty more but these is that that's basically an overview how you use the default handles that unity provides you but you can obviously also write your own so if we go into the next scene here so we have the disc rotator handle and the disc rotator handle is something that I coded myself it's basically basically mimicking the rotate tool but you can only wrote around 1x rotate around one axis you don't have just like the rotate tool life and open right now here you have for the rotate tool you have all the all three different axes but for oops go back to 0 but for my tool this circle here we simply have the one axis and when I click on this I can I can rotate this script this cube around this one axis for my turrets in the first game quite useful because they only needed to rotate around this one axis and so I don't have this the visual clutter of all the other axis that I actually don't want to have but that is not a tool that unity Pro provides by default so we have to write this ourselves so let's let's see how this is done again the script has nothing we we are just using the handle scripts here and in the handle script it starts off quite simple it gets a little bit more complex once I go into here but it starts off quite simple first of all we create a control ID and control IDs a unities way to to identify the different handles so it knows which one is which if you have multiple ones in the scene so for this you you create a new control you tell unity I have this new control that I that needs an ID you give it a random random value so every class has this get hash code value so that's that's basically a random value well random is not the right word you need random data but it needs to be the same data every time so the get hash code function of any script actually is quite useful for that and then you tell it what type of control it is in this case it's a passive control which means basically the focus type is only useful for keyboard components so can it take keyboard focus if you press tab couple of times should it be able to to focus that control so you can see here it has a keyboard one the passive passive type is usually the one you go with when you have visual handles like our our rotator handle okay so the disk rotator handle gets this ID so so we know which one it is and we can also we need that ID to be able to interact with the with the with the handle so clicking on it and stuff like that unity needs an ID to know which object have I clicked on and stuff like that so that's the control ID then we pass on a position and a rotation so we draw it at the correct position and then the size the radius of the the disk so let's look at what this method is doing okay so this is like 90 short lines is basically our whole rotator handle and okay so so there are multiple steps here and we can go through it one by one i I said in the beginning that the unseen GUI function handles GUI events and GUI events are for example repaint events so every time the scene view is redrawn on seeing GUI is called with with the event type repaint so we know now we need to draw stuff but unit is intermediate GUI is set up in such a way that the same like on GUI is the same thing the the method has been called multiple different times and each time it's supposed to do something else so it's it's it's kind of a weird hacky system that unity built there I mean it works quite well you don't have to write five different functions and for everything but that's basically some hidden knowledge that you need to know in order to not get lost in in in GUI stuff so let's let's start with the repaint event so so basically when you an angry or or unseen GUI on inspector GUI anything on XYZ GUI you always have the event current property and this current event tells you what is going on at the moment is this a mousedown event is this a repaint event this is the later layouting event so we can use the event current and then we get the then we get the event type for our control ID that we created previously so we only want to know what type event types we have for own control and not for everything else that's going on so let's start with the repent event because that's similar to those that we did before first of all GUI has the property hot control and that's basically just an ID just like the control ID that we have before and it tells us which control is currently being used which control is active so we check if our control is active then we want to draw our stuff in a slightly like a different way and basically we just want to change the color a little bit so you can see here it's not active right now and once once we in there it's been drawn in yellow and yeah so we just draw the the arc here we going into these variables in a second and and then basically you we also have a different color if we if we are close to the event so basically if we if you over the handle and not not clicked yet so we have a light nice little mouse over effect and then we and here we simply draw a circle of CAP so that's the circle that we have here with whatever color we set up in before in these these handles color assignments here okay so this is the repaint event we basically just draw the circle depending on if we are new neared with our mouse or not we change the color a little bit so nothing nothing too specific here yet then we have the Mouse down mouse drag and mouse up up events we also have a layout event and layout is usually for you to set up stuff and if you're using on GUI then it can calculate the GUI layout method for example calculates the layout where the different elements are supposed to be positioned in the in the layout event we don't we don't need to do anything in the layout event so we simply simply draw we we simply pass on the layout event into the circle handle cap because unities cap functions they can handle layout events as well so we simply pass that on so the circle cap can do its stuff and then we also handle the Mouse down mouse drag and mouse up events that is something I mean we can just quickly go through here I mean this is very specific to this component that we have so basically let's start on Mouse down and most time we simply save what the current Mouse position is and we save what the current rotation of the object at the start is so we can use these two values in Mouse move to to calculate the new values okay so in Mouse track we're also using the the current mouse position we we are adding the the Delta position from the mouse on top of that and then we calculate the the angle between the between the stop rotation or not calculate basically we use to start rotation and we add the new rotation that we that we created from the mouse movement on top of that so basically we just take the difference of the start Mouse position and the current Mouse position and the distance between those is the is the angle that we want to rotate the component so very very simple calculation here and then on Mouse up we simply set up some default stuff that every component does so we we release our hot controls we say we're not using we are no longer using using the events we use the current Mouse up event so the mouse up event is not being passed on to the scene view and other scripts are using it as well and this is an interesting one I actually have no idea what it does but it's it needs to be there I found this because I actually browsed through the these scripts how unity does their their handles and they use it and I haven't figured out because it's not documented in the API yet so I I haven't found out yet what it does but it just needs to be there and so no harm no foul I guess and I will figure that out in the next week and actually put a comment in the coach here that you can download so so you don't have to look it up yourself maybe I just ask someone in the in the sessions over here right and that's actually the whole component so we're drawing our stuff we're we are handling the mouse mouse events here and passing them on to pass and passing them on to the component and applying our rotation for this for for this disk rotator so this is a rather rather simple handle of course but you can imagine these being much much much more complex as I said before the terrain editor has a handle and you can you can edit mesh' data with handles and stuff like that ok so these are the handles that I wanted to show you and there's there's one more thing that is not really a handle but it's it's so useful that I just wanted to share this with you and that's something that is also in the and just like the arc handle this is intermediate GUI control and this control is the tree view the the simplest way to use a tree view is is basically I mean you see it if you if you make a public array like here this materials array that's basically what they have here so that's what the tree view is right and unity provides you a way to to do that quite quite easily and also there's a way to to search in here so you can you can filter these events so so this is it's quite useful for for smaller lists but there's another control component called the multi column header that you can use with this tree view together and then you get something like this and this is amazing this is I mean this does so much stuff for you if you ever had had a list a complex list of stuff that you needed to sort in anyway this is the component for you I mean you can you can sort you have them the columns up here you can set these up so you can sort them and you can sort by name or by value whatever and just like the tree view you can have children of elements you can drag and drop elements around so you can simply click and drag and move it over here and then you reparent them and this is all functionality that unity just provides you you don't have to write that yourself you can you can draw the the the handles here the icons and stuff like that and everything is completely custom so each of these columns and you can define what is being drawn how it's being drawn so yeah that is just basically a little nugget that I wanted to share with you that I found and the treeview components it's explained quite well in the manual actually it is super complex but the this window that I have right here and another example for an editor window actually is basically these are the tree view examples so when you when you search for a tree view and you go to the manual side it actually gives you an example project with different tree and tree view examples here and these are these are the ones that are just shown you so so you can look how how they're being done the manual explains it quite well it is too complex I mean you can basically just have a whole session just on the tree view because it's super super complex but it's also very very powerful so just in case you ever needed to have a list and you need to be able to reorder it the tree view component and multi had a component component is there for you okay so here are some learning resources if you want to learn more about handles so first of all as I said before unity release there C sharp source code which means all the handles the terrain editor scripts and stuff like that everything is open for us to see and see how unity has done it and that is the best way to learn about editor scripting because the documentation is actually quite sparse so simply going into the unity source code see how it's done especially in the subfolder editor mono editor handles you can see all the editor handles and how unity did their own handles they're the YouTube channel as I said before very useful resource there many many talks about ultra scripting there and then the scripting API itself gives you an overview of all the functions that you have and that is my talk thank you for listening [Applause]

Channel: Unity

Views: 13,085

Keywords: Unity3d, Unity, Unity Technologies, Games, Game Development, Game Dev, Game Engine

Id: Ah9CuzGa2vw

Length: 48min 7sec (2887 seconds)

Published: Thu Jul 26 2018