Unity UIToolkit and Custom Editors in our 2D MMORPG

hello everyone we will look today like we promised in the last video how to make our own editor for for example the text in which are displayed in our tooltip let me first show you what are what we will implement today when you remember in the last video there was this feature with the tooltip and so i was able to send items via the chat and this is still possible but i want to show you first of all there are two items flower and test which are currently defined test is in legendary item with the text we see here and flower is a common item that we also have in our game and if you enter an item that doesn't exist there is just question marks how to show the tooltip and everything we already discussed in the last video but today we want to make it configurable so that we can add items or text for those items in the unity editor what we want to build is an item editor which looks something like that we where we can click on the items and we can fill out the text that the the game will use to display those items and this editor is written with the ui toolkit and that's what we look into but first of all let's let's check some things out first of all how is this saved and these are scriptable objects scriptable objects are pretty much like mono behaviors but they don't need to be on a game object but they are an object for itself they can contain code and everything but for us it's enough to for for them to describe the data that we want to serialize and deserialize and unity gives this great feature that that you can edit them like a mono behavior when when you add fields then you need the unity editor will make them display and you can also overwrite of the fields with your own code and everything that's pretty much the same as the default unity editor for mono behavior but for objects that are basically serialized deserialized there are many ways to use this object and this the way we use it here is one way and the way it works for scriptable objects is let me open it real fast we have here scripts scriptable objects and then and then we have item data and in item data we say we have a display name we have a tooltip content with which is multiline 10 so at 10 lines multi-line by default and we have our variety anim that we can choose from how where this item is and if you click on one or if we see it here then we have our display name tool tip content which is 10 lines and our validity we can enter more than 10 lines it's just how big unity will make the box and if we click on the item below here you see on the right side that is pretty much the same editor so also one thing that you can do which which makes it pretty easy to work with scriptable objects you can create asset menu um file name is basically the default file name and kds best slash create item is where we get to so when i press right click i have create kds best and then create item and then this will create a new item i can rename the item the the name of the item is actually the item id so when we want to have coin then we will add coin also that is possible but let me remove that so one way to make files loadable in unity on one time is to put those files in this resources folder this resources folder is at one time available to load the data from and when let's take a look how we will load the data because currently you could just click here and edit the data in the normal editor and we want to load this data and if you remember our item provider was pretty empty in the last video but we prepared the item provider to get the name and everything and what we want to have now is basically a dictionary with the id of the item and the item data as value this is where we can really really fast access and then our functions get name will check if an item with that id exist if that's not the case we returned question marks and it's better to return something than to return an empty string for debug purposes empty string always looks a little bit broken if you ask me and then we will return the display name and for rarity same deal it's common if it doesn't exist else we return the gravity and here also question marks for the content or we return the tooltip content and we do our replacing stuff for variety color and everything that's what we had in the last video also but the tricky part is how to load the item data and unity api makes it really easy we have resources dot load all which basically loads all you have to check if that might be too slow if there are too many items but we will deal with that when that's the case because honestly i don't know how how many items we we can have till it becomes a problem and then we have to give the the path in the resource folder and our path is items so we have resource items and everything is in there and then we unity does the the heavy lifting of loading all the files that we have and items will contain all files then we clear our dictionary we we go through the items and add them to our dictionary by dot name is actually the the file name which is our id so flower and test and then we add the item and that's how the item provider works that's pretty much it now you will be wondering why i returned the items here but that we will get you because uh item provider itself doesn't need that but i was a little bit lazy so how do you write an editor like this we already did that we have this behavior graph editor if if you remember that one it's a long time ago but we did an editor but for for this editor we just inherited from unity graph editor which gives us the whole graph capabilities but this one is is a little bit different first of all we want to use ui toolkit the great thing about ui 2 kilt is that if you go to window ui 2 kit debugger you have a debugger and if you used to web development then the debugger is pretty close to what the browser gives you in that development we can select for example editor item editor window which is basically our window and then you can do pick element and you can pick the element that you want to modify or find out and then it will show you on the right side all properties that you could change for for this element and if if you change them then it should change them on the fly yeah maybe the property field is not the best example so now the text is red and and you know the the name of of the properties which is quite important there's one important thing when it's in line then it's defined by code and it's pretty hard to override that via a css which we will look into now but for the other ones which are unity style sheet or inherited it's quite easy to modify that so defining these properties you like i said inline is defined in code which makes it hard for example to change the height for for one object let's say we want to have a 10 which is too small but just maybe 50. maybe if we want to have it smaller than this field can't be overwritten by by style sheet so how does a style sheet work in in unity for this editor so we can modify those files uh we have an editor folder it's really important that we name the folder editor because this will not be in the runtime of the game this is just compiled in the editor with the editor assembly the advantage of that is that we can leverage the editor namespace and that's what we do there we have three files and those three files is what we talk about now first of all we have a style sheet this one is the style sheet and if we open the style sheet it's pretty much like css so we have box here and box defines an object type so every box that is in our layout will have flex core one the same goes for template container and the same goes for list view those items could also have class names which is basically like css classes and then you can have here class name and then right here the properties like hide and something like that and it also can define by id with the hashtag which is pretty much the same like css and to have to apply the style sheet on objects what we need is sometime some kind of layout definition which is pretty much like html and this is what the other object here is and this is the html of the unity editor so when you create a new one the top one is given and then i added a list view with the name item list and the box with the name item and then another box with the name item info this is everything we need and the code will render in item info our unity editor basically what what we can do with that is then this box here applies to every box because it applies to the type we could also do a hashtag item then it just applies to this box and we could also do command hashtag item info then it will apply to both because the comma will be multiple but since we have so little of them we can just do box which is fine and this will modify the the properties that we see here with the debugger and there we have the box and the box will have flex pro 1 which comes from our style sheet and here at the top you see the style sheet and also what you see here are the matching selectors since this has the class unity box a dot unity box would also apply for that and our box which is in our in our uss which is the style sheet to create those files you can just right click create ui toolkit ui 2k then you have style sheet and you have ui document those are the two files one is the style sheet one is the ui document now the question is how how does unity know that it has to use this style sheet and that you want to use this document in your editor window that's where our editor window css will come in handy sometimes you you have problems like like i have now which is good to to show for example when when i'm in visual studio he has some issues with compiling the code so that's why some things are red when i use unity stuff and i don't see a attached to unity button that means visual studio is not really sure if this is a unity project so if you're missing the button and you want to debug it's really annoying and some sometimes we just should has this problem especially if we use visual studio without unity like we use for our back end to fix this really easy what you can do is you can go to edit put preference to edit preferences and then you just press regenerate project files what unity does is it regenerates the project files like the bottom fast and when you re-open your project and everything should be back to normal so we have the attach to unity button again and our code doesn't have everything read in it because visual studio now understands that this is a unity project don't ask me why it's broken but this is one way to fix it so first of all in our editor we inhabit from editor window this is what makes this an editor window and then we create a mean menu item kds best item editor and this has to be a static function because it's a menu item then we get the window with get window item editor window which is the reference to to our in instantiated window unity will instantiate that if there is known since we don't want to have 20 editor windows one is enough for us then i set the title and i set the min size to 800 600 to 800 to 600 so that we see the the window and after that the window is created if none doesn't exist and then the title and size is set so when i press item editor right okay is best then the item will be set it didn't do it because we did we use get window and there was already one so that's what it does and then we we can show the editor and it it's empty let's let's remove this code real fast so when when you just do those lines then it's empty even though we have to find those files but we need to tell unity how to use those files and the first one is loading the uxml which is basically the unity html if you want to call that way so you load it with asset database load asset at path visual tree and then you can give the full path you could also load it with resource load and and so on if it's in a resource folder but usually we don't want to send those to to decline those html files because this is an editor anyway so it's not client displayed but you load the visual tree asset which is this html file and then you have to clone it so we we clone it and if it's cloned then it's a template container and then we can add this template container to our root visual element which is basically the root html tag if we want to stay with html and then this html or uxml that we defined is displayed let me show you how this looks like you see nothing but a trained eye will see here some some kind of lines and the reason for that is if we look into the debugger that there are our items but our layout is not defined and if our layout is not defined it will pretty much display everything depending on its inner content and since we don't have any inner content it will display it like that and that's not how we want to lay out our things so in our style sheet we have defined our layout and then we load the style sheet the same way the side style sheet doesn't need to be cloned then root visual element dot style sheets and we can add our style sheet pretty simple and when we do that then our layout is defined we didn't even had to close now we have on the left side the list and on the right side we have our editor but nothing is in here so let's really first look at the style sheet again so our list view is has a width of 250 pixel and the text inside the list view is middle center this is inherited below so items within the list view will inherit that from the outside object and then we have our box and template container flex grow with the flex direction row what this means edit it means that objects we add will will be on a horizontal manner so the first one is on the left side the second one is right next to it and if we add more then more will be added right next to it and since the box is flex grow one it means it will try to get the full space that is available to it and our list view is 250 pixels so if we look into our layout here now with the ui toolkit debugger then we can see that our template container is flex grow and it's flex direction row so first thing added is on the on the left most side that's our list view and second thing added is on the right side next to it and if we add more it will be on the right side pretty much like a horizontal layout in in unity and since the list view is 250 pixels in width and the box is growth the box will take the rest so 250 pixels for the list view and the box will take to rest it doesn't matter how i scale it the box will take the rest of the space because of flex scroll one and the template container is also flexible one so the the outside template container will take the whole space and that's our layout done so now what is missing is first of all on the left side the list view so we have also called create item list view in on enable where we do everything and first of all we need to find all items that we want to display and there are multiple ways to to load all resources of one scriptable object type but since we have already our item provider which loads them i could reuse this function and just return the data for us the great thing if this function finds the data then we know and one time the game will also find the data but there are two different ways which i want to show one is an asset database you can use find assets and then you can do t double dot for type and then the type for us the descriptible object type with item data and then you get all goo ids of all items the asset database knows for item data then we can create an array or a list it doesn't matter whatever you like and then we traverse the gu ids and there's the asset database guide to asset path which turns the gu id to the path where the asset is is available and then when we have the path we can do as a database those asset paths so this is another way to do the same thing another way also would be resources load all which is basically what our item provider does and i like this more because this is how the game in in the end will load that so when the editor displays it we know for sure that it will be also displayed in the game so let's ignore those lines for now and just do the top line so we get all items then we get our root visual element and we query for a list view with the name item list which is exactly our list since we only have one we just get the first one that's how we get our list view from our html object or you xml or whatever you want to call it and the listview has a make item this one could also load a new xml file and everything but since we just want to display a label with the name of the item in it we just return new label and when an item is binded to this object then bind item is called and it will give us the the element which is basically what we return here at make item and it gives us the index of the item source where which item this label or this item should be displayed and since we just return a label we can do element as label because we know this is a label and then we do text to show to modify the text of the label and then we set it to items then i which is the index and then the dot name so we want the from this items the index i and then we want to name of it and that's what we display what we also could do we could here do item list dot item source but then we also have to convert that again because this is a non-typed list we have to convert it again to to an item data which is not a big deal but sometimes it it would be cleaner to just use item list stuff in where item list is used because they could desync so this variable could be not not set to item source if you have a more complex source code but for our case it's always the case so we go to easyroot here and if we have that then we will have flower and test in our list view so now when i select them nothing happens so let let's do that first of all we want to have selection type single because the listview will support multiline multi selection but we don't support that and what happens when something is selected then item list on select change is called we traverse through the items which since this single select is just one item so this is called only once and then we query again this time for a box with with the name item info then we clear everything that is in the box so it gets emptied and then we do some unity magic which i want to explain first of all we create a serialized object of our item data item is our item data so when i change the serialize object unity will save this information back to descriptible object which is great for us and the with this we can create the default unity editor properties if we want to and that's what we want to do for now so we get an iterator which iterates through all properties and it works like that you get the serialized property and then you can via next or next visible you can traverse through the objects interesting enough is that we do next through and the reason for that is it's not obvious so let's debug this code real fast so when we select this is called with one item let's just start at the top why not and press attach unity so debug is attached so when when something happens here then it will trigger the debugger you can actually debug unity code i founded some some streamers and help them in the on twitch where they're developing for unity which that didn't know that you can't actually debug your id code then we get an enumerable like i said that single select so there's only one object and we got our i our scriptable object here and we get our box which is just just a box we clear it and then we create a serialized object from our scriptable object and then we get our property iterator and the first property this displays or this is bound to is the base object and what item property next shoe does the two is means go into the children um then it goes one property down into the property tree into the children and after base it is m hidden object flags and since we don't care for that we directly skip this one and after we skipped the object flags we will be at m script and m script we display but we set enable to false and then we we bind that property so this creates the property default the unity editor property field we disable it in this case because it is equal to m script and then we bind this to this here last object what this does is it creates the the field and if the field is changed then it will write back to the serialized item that the field has changed and we disable it in this field and then we add the field to our our box which with the name item info and then we go to the next field and vice versa and do that and we don't go into children if you don't go into children unity will render the fields the children feels rough and we don't have any children's anyway and that's how how those items are displayed this is the m script one which is disabled and then we have the other ones in the default unity editor if you compare that it is the same so we basically have written code which switch the editor also does but we could modify it for example we could make at the bottom to the right here and display test or display this tooltip value but we will later in in the way future which is not interesting for now if we want to implement multi language it would be great to have a bottom here where we can select the english text the english text is displayed but but the language text is actually serialized into the object and later in our game we can convert this language text back to the actual text that is displayed and then it will look up into english german or whatever language we want to implement file to what this tag means in this language and this is our capabilities that we will be able to add to to this editor window this is that doesn't mean that this is always the best idea to do because we could also add this capabilities here but we will be able to to have way more features in this editor window and i really wanted to show how how to write those editor windows because normally when i wouldn't do an editor window like that uh for me an excel file would be great enough but still i wanted to show you how this new ui api from unity works i wish you all a great weekend and i really want to thank my patreon julian have a good day bye

Channel: 2D MMORPG with Unity and Kubernetes (K8s)

Views: 99

Keywords: GameDev, Unity, MMORPG, 2D MMORPG, Game Development, Unity3D, OpenSource, MadeWithUnity, K8s, Kubernetes, IndieGame, IndieDev

Id: 262ixWIzli4

Length: 34min 58sec (2098 seconds)

Published: Mon Nov 01 2021