Properties Panel | Game Engine series

hey what's up guys my name is the channel welcome back to my game engine series so last time we took a look at the scene hierarchy panel basically some kind of way of displaying all of our entities on the screen so that we can actually like you know select them and see what's up and today another video's to be linked up there by the way today we're going to continue on with that and now when we select our entities our goal is going to be to actually display information about what components our entities have in a separate panel which we're going to call the properties panel which is basically very similar to the inspector inside unity okay let's just dive in and is my hair cut off so unprofessional okay so uh let's hit f5 we'll see what we had last time so last time we had this uh beginnings of a scene hierarchy panel which we could keep over here it displays every single entity that we actually have actually i really wanted to change fonts as well but we'll we'll talk about fonts in a different um episode because we probably want to actually add one to the repository uh but basically we had our clip space entity uh our camera entity and this green square um and then the camera entity we could also control by the script and all of that so my point is we obviously have three entities here it would be really good to be able to see what i don't remember what what is clip space entity stream can you help me out what is what does clip space see clip space did i make that was that merged or something what is this clip space and i remember making why would i name it that it's a camera all right anyway back to the profession i'm gonna have to do some editing on this video i hate doing that whatever clip space entity what why is it it's a camera that we can switch to well so the scene hierarchy panel here displays all of the entities in our entire scene i think we even added some uh loose ui support for parenting which is pretty cool but now it would be it would be really good for us to be able to select these entities and view some more information about them such as what components they have because of course that would be uh useful because not only could we see what we've actually added programmatically we also want to eventually have the a have the ui to be able to add new components to any entities and also like create new entities and essentially build up scenes so what we're going to be doing today is creating another panel which is going to be called our properties panel very similar to like the unity inspector panel and this is going to be something that we will we'll probably end up using this for more than just the scene hierarchy panel and its selection context when we have things like assets that we might want to change like the import settings then it'll probably also show the properties for basically anything that is selected and has properties in our entire like hazelnut editor here but for now i want to be able to take the currently selected entity and display some information about it and that's going to be our goal for today so let's take a look at how we can do that now i think the first thing if we're going to see a hierarchy panel it's pretty easy to get this up and running last time when we actually created this um uh all of the like this like this scene hierarchy panel with the uh you know selection context and all these i am gui tree node uh thingies tree nodes trainer like tree nodes i guess that that makes sense um we we had the we we also added this support to actually select a particular entity right so if i'm going is item selected i'll zoom in um then we actually set our selection context that was important so that we can actually display you know which tree node is selected and that's why you see it highlighted so since we've already got the selection context which by the way is of course an entity we've already got information about the entity that's currently selected so once we select something it's just a matter of seeing you know what the entity is which is just selection context and actually retrieving its components and also when we add the ui to be able to add a component such as like a camera component or a transform component transform component probably already exists but things like mesh components or script components then obviously we'll be adding it to the current selection context now i also want to be able to deselect things which we'll talk about in a minute as well so to do this let's let's go up here now we have our scene hierarchy panel i'm actually going to add this properties panel right over here inside our scene hierarchy panel uh file just because first of all at the moment it is completely just used for the scene hierarchy panel in the future when we do have it across more of the engine and we'll probably refactor this out into its own class but to keep things nice and simple i'll keep it here we'll call it properties i'm going and now it's just a matter of seeing hey is there anything in the selection context so if selection context we could actually draw our components um so whether or not you want to uh label this uh as so i guess that's probably fine um avoid draw components i'm just going to bring it out into a function just to keep things a little bit more simple no i want to create implementation uh and then over here we're actually going to draw all of the component ui so we've got the selection context um now it's probably worth actually passing in the selection context here just because uh that way you know if we for whatever reason wanted to draw you know something else um then we can actually easily just pass in a different entity um and then what this is going to do is actually ask the entity hey do you have certain components and if so let's draw some ui for it so let's start with like probably the tag component realistically is what we want to start with but we basically want to go through all of these um tag should be the first one because we also want to have some kind of editable text box that will let us rename that stuff so let's go with the tag component and then if we go back to editor layer we were already doing something similar i think oh actually no sorry we are doing something similar inside the scene hierarchy panel because of course we are drawing the actual uh where is it the actual here it is this right we're actually you know the name of the uh tree node inside the scene hierarchy panel is of course the name of the entity so we can retrieve that tag component if it's got it i mean it's going to have it but we'll still leave the f check in here uh and then we just need to we just need to actually display it somewhere now i've already done this in hazel dev so i'm going to steal some code from there of course but basically uh what i did was i just added a i am gui input text now i didn't give this a name and we'll talk about why later but i will call a tag for now uh but in hazeldev i basically did a little bit more with the ui to make it look prettier because i don't like for example the fact that imgui labels are always on the right like that's a bit weird i like to have the label on the left so the way that you usually achieve that in iron gui because it doesn't have support for that is you basically just don't you don't display any kind of text as the actual label instead what you do is you actually just do like an im gui text display here you split up your actual window into like two columns and then you can actually draw like the text or and and then like the label and then the actual control on the right side as well which we might do in the future again not really too worried about polish at this point in time we're just trying to get functionality down so we'll have the um we'll have the tag here and then obviously what this does is actually takes in a buffer pointer and a buffer size so to get this to work um there's a few different ways you could do that uh you know i'm just thinking about it now actually i think that the best way probably to do this is just to have some kind of local buffer the pro one of the one of the issues with having a local buffer and by this i just mean literally having like a buffer like this is that 256 bytes on the stack this isn't a recursive function so i don't think that's going to be too much of a problem we could of course just make it static or even like static to this translation unit out here and use it kind of like a scratch buffer maybe make it a little bit bigger you can make this bigger of course but basically what this is going to be is this is going to be our string that is our tag all of the characters there but also we need to provide it with some more room than is actually inside this tag because obviously we could potentially rename the entity and make the name be longer than what is currently stored inside this string inside the tag component and that would obviously overflow that buffer so because of that we need to we need to have some kind of temporary buffer here now this by by temporary i just mean we literally just need it for this scope but it's also perfectly reasonable to have it as a just a global scratch buffer or something like that that you can constantly reuse having it like local to the stack though might be nice but again it doesn't really matter i'm not too fussed with it but now we can leave it in here so we're basically going to pass in this buffer and then the size of course is going to be well it's on the stack so we can just write the size of buffer and that's it now we've got um and i think that wants the size in bytes i'm pretty sure uh and that's it right so now we can obviously handle it changing and if it does change we're not actually passing in the the source string yeah but we'll get to that um if it does actually change then guess what we need to take this tag and just basically assign it to a new sd string potentially with this actual buffer and i think that's fine because there's a constructor obviously that takes in a construct pointer it should be null terminated and i think everything will be fine so to actually make it null terminated first of all i'm going to set uh everything to zero right so i'm gonna just mem set it to zero and then i'm actually going to mem copy probably do a string copy i don't really know see the thing is this may break if like you're dealing with wide strings or white chars for example i don't know i don't know if we want to support wide chars in the future usually usually i would be all about that but i think that like for game engine entities do we want to support like you know extended character sets like for different languages maybe uh if we do obviously this code has to be rewritten but for now we'll ignore that stuff and we'll do things the simple way so now we'll do a little bit of a mem copy to go from uh to go from well into buffer we're just going to um we're just going to grab the c string of tag i guess i'll do a string copy uh and then that's it right uh and then so now what we should have done is if we had an entity called camera then obviously uh you know that's what the memory looks like for it camera followed by like is an actual zero not just not a ascii character zero um and then what we're doing here is allocating enough room for it uh well enough room for it and as well as what we could potentially edit it into and then uh which 256 again if we technically go over that yes everything will crash probably not a great example of this although i don't think it will happen but i don't think everything anything will crash because that's probably why we're providing i'm going with the size that's the maximum size we're just not going to be able to enter any more characters than 256 which i think is reasonable for now at least um then we're setting every single byte of this buffer to be zero and then we're copying this camera uh probably without was the string copy copy the zero i don't know if it does anyway we're copying just basically the entire string into this now into this buffer that we've got here then we're giving that in to i'm gui and that's what we're editing when we actually input text into this ui control so that's what's going on here and again if it changes we do that that's pretty much it you know what let's just let's grab that for now and let's just give it a run so if there's a selection context we should be able to draw the name and we should be able to change the name of our entities now which is pretty cool i mean that didn't take too long but we've done something nice and powerful and i guess which we we probably like the compiler there was actually telling us that uh they were doing something wrong well it was warning us about where's my output it was warning us uh because we if we look at the build because string cup uh string copy function may be unsafe and that we should use string copy underscore s or crt secure no warnings so i guess we will use underscore s the only real difference between uh underscore s is that this actually takes in some kind of size um and the size is actually a uh a compile time thing that's a bit weird i didn't know what was that no size in bytes and then source and then size and by supposedly the destination size so this would be 256 right or size of buffer that was weird so i guess there was a templated version but anyway so that that basically lets us um that basically protects against overflows because obviously now there's actually validation for how big destination is um obviously we know how big source is because it's going to be up until the null termination character but destination no clue if that will fit or not but now we do because we're actually validating that all right let's take let's take another look um and we should be able to see our properties panel which is over here all right let's grab that and dock it into here now it should stay here as long as that i'm going to ini file gets written too and now if we click on these various things you can see that we see our tag and again i really don't like the level being on the right but we'll change that eventually and now we should be able to take this clip space and it's here no idea why it's called that i believe that's our second camera camera b let's rename it to camera b so if i get rid of that and type in camera b obviously as i type like the a key and stuff it actually moves the camera but you can see that now we've renamed it to camera b which is pretty cool so up here it shows up as camera b and we also see it here awesome now let's continue on with this stuff let's go into the transform component now the transform component is a little bit tricky um because there's a lot of different controls that we likely want for this translation rotation scale stuff like that let's just deal with the translation for today and then we might actually dedicate an episode to transform components because they are they can be very very confusing um so to do this what i want to do is uh basically just have a little bit of a like a float three uh like a drag float three or something um that goes over drag flow three that just goes over um we'll call this uh translation or position i guess that goes over the last column of the matrix so get component transform component dot transform and then if we actually just do glm value pointer transform and it's just gonna want is it's not gonna be fine i guess should be right um yeah it's gonna be fine because it is a vec 4 technology but again we're just doing value pointer and we probably need to include that include glm gtc type pointer um and then oops and then we'll do so we'll do a drag float and then we'll do speed of one yeah we'll do maybe speed at 0.5 um min and max we won't touch obviously and then that's it all right so now we can basically and we can check to see if that's been modified i don't know if i've talked about this this but i'm going with pretty much any widget that i'm gui has it returns a boolean right so that bullet is whether or not it's been used whether or not it's been modified so that's obviously very useful because instead of constantly like well actually we don't need it for this but uh in the case of like rotation you know rotation inside a matrix you probably want to decompose the matrix get the rotation possibly as a quaternion maybe give it to like euler angles or something like that um and then modify that and then reconstruct the matrix instead of doing that every single like frame essentially every single ui rendering uh instead of doing that you can actually detect whether or not that rotation or translation or the matrix has been changed or not and then if it has then you can update it and like you know recalculate it um which which is obviously a lot better for performance so in general just keep an eye out for things like this you don't want to be doing stuff if you don't need to just do a little if check and then then that way you can respond to your ui controls actually being tinkered with so um in this case though we actually don't need to do anything because it's just going to modify the matrix in place since we it's just it's just the translation we don't need to actually uh rebuild the matrix or anything like that okay so now if we hit f5 um we should hopefully see uh the transform okay so there's our camera entity clip space empty obviously it didn't save the name um but you can see it's got a position here uh oh we need headings for all these components don't we we'll do that in a minute um so we have all of these things and then we can obviously uh shift this around 0.5 might even be too much here um maybe i'll make it 0.25 it's kind of difficult to set a value like that obviously i don't know what like unity does um maybe i should investigate but maybe it's up to your zoom level as well i'm not sure but obviously it's hard because you don't know how big the scene is going to be um although i guess moving by like what is what's that going to be like 25 centimeters or something every um you know every uh yeah might be harsh you know maybe something like point one would be a little bit more reasonable for dragging these things around but anyway the point is we can now obviously um move around uh you know we can grab like this green square for example and then shift it around we can grab the camera and then we can like shift the camera around and we can we can control that now using our properties panel which is pretty cool now i want to um uh i want to have some kind of heading for this right so we should have an actual like it's actually some kind i think what the what i did in hazel dev was i basically had like a little bit of a tree node uh header for it right the same way the same thing that we saw inside the scene hierarchy panel and all of those uh various entities there um just so that we can essentially collapse components that we don't care about and organize things a little bit better so the way that i did that was basically i had um if it's got a transform component we don't need to display it if we don't have it but if it's got it then i basically just made a tree node here which uh needs to take some kind of unique identifier for this now what i use here i basically use entity um this doesn't really matter too much what this is as long as it's unique i think what i did in hazel dev was i just basically got the type id of transom component because obviously that's going to be unique across all of these components so if you just use siebels as type id with transform with transform component and then you get the hash code for it that will that should give you a unique uh integer that will basically represent that particular type um and that way you won't get conflicts with any other ones i don't know if that will actually conflict with this trainer no i mean it shouldn't because it's in a completely different um it's in a completely different window however we will talk a little bit more about i'm goi's like identifies and stuff in the future because we'll be like pushing and popping ids and handling ui a little bit differently than we are now because obviously right now we're just doing i'm gooey stuff and crazy stuff like this but in the future we want to be a little bit more um i guess abstract with how we how we actually handle our ui as we begin to develop our actual style for our editor ui and that way we want to obviously reuse our kind of style library instead of continually just using imgui's raw stuff um anyway so we'll have the hash code uh we'll do um i also did default open right so i am going tree note flags default open because we want all of our components to be open by default we don't want to have to go through each of them and open them that's a bit weird um and then uh we'll call this the transform component obviously all right so if it is in fact open which should be by default then we'll display all of this stuff if it's not then it's not and then obviously at the end of this we need to do a tree pop there we go so now if we take a look at the difference between uh what we had and what we just added then as you should be able to see um we now have a header for this called transform that we can collapse and it should be expanded by default and again we'll we'll deal with like padding and stuff like that later but we're just getting the base kind of layout down we also want to have some kind of like plus button potentially or some kind of extra button here that we can click to remove um like this component uh maybe even like to copy the component so that we can paste it to a different entity stuff like that but we'll leave that as is for now what other components do we have that are useful um i think we've got i just look at components oh i wanted to do this deselecting as well now script component at this point no point displaying that um camera spy render transform uh i guess the camera component is something we could talk about but this this is like one of those things that's going to take like half an hour to implement properly so i'm tempted to just leave that for a different episode because it's more of an overview but what i want to do is talk about this deselecting as well so at the moment we actually have no way to deselect nfc so once we've selected this and the properties panel has this that's kind of it right the properties panel is always going to display this because we are always we will we always have this empty as our selection context and we've got no way to clear it however um we can obviously make it so that when we click on a blank space inside the scene hierarchy or in the scene even we're not doing picking through the scene yet but when we do then that will just deselect everything so to make the blank space inside the scene hierarchy panel work we basically want to go into um where we render it and then after we've done all of our entity node stuff we can actually just check to see if uh well it'd be great to use something called is item clicked however that doesn't work with windows that works with actual items inside windows so for this we can just do if the window is hovered right and uh the mouse button is pressed so if mouse is mouse pressed is mouse down here's mouse down uh button zero i guess which is left mouse button i don't know if there's actually an enum for it um i guess we might be able to check left is that a thing zero equals left well they've just got a documentation here that says to use zero so i assume zero is fine so if we press the left mouse button and this window is in fact hovered um uh then uh we're going to set selection context to nothing right we're going to clear it like that now it's worth noting that this mouse down is window hovered situation this actually has this thing called i'm gooey hovered flags which we can set and you can see that by default um allow when blocked by popup so return true even if a pop-up window is normally blocking it or if um uh i think that's if blocked by active item so basically by default what that's saying because you need a special flag to allow it even when it's blocked by an active item items will actually block this so if an item in like if an item before we get to this point in the window has already handled our click then it's not gonna it's not gonna respond here so what that means is that um when we actually draw the entity nodes here like which is the rest of everything else when we do our selection here that's going to happen first and thus it's not going to filter all the way down to here so this will truly be if you click on a blank space not if you click on something and then the other other entity as well so you can see i can still select them as normal but if i click here that's it they're gone and in fact i can even click in between and they'll go away as well which is pretty cool so now i can deselect entities which is pretty amazing okay that's going to wrap up this video hope you guys enjoyed uh i'm all over the place with this hope you guys enjoyed this is this episode of the game engine series don't forget to hit the like button if you did you can also help support the series by going to patreon.com where you will find all of the hazel dev code which i've mostly been stealing code from throughout this entire episode as well as just a much more advanced version of hazel with like a full-on like level editor and like 3d graphics and vulcan support now and c-sharp scripting and just it's it's amazing you need to check it out and also help support everything uh that you're seeing in front of you anyway hope you guys enjoyed as always stream is over here to say goodbye as well bye youtube workstream and next time we're gonna probably continue on with this stuff again i don't want to focus too much on ui for components just yet i want to get everything kind of up and running and then we'll start actually refining it and going over it making our editor and hazelnut look pretty with like different fonts and stuff like that and just generally polishing it into what should be hopefully an amazing engine anyway i'll see you guys later [Music] goodbye [Music] you

Channel: The Cherno

Views: 14,187

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, properties panel, properties, panel, hazelnut, level editor, UI, imgui

Id: NBpB0qscF3E

Length: 25min 24sec (1524 seconds)

Published: Thu Sep 17 2020