Making the Hazelnut Editor Look Good! | Game Engine series

hey what's up guys my name is jono welcome back to my game engine series day three of game engine series week and today we're gonna be all about style which let's be honest this whole series is always about that anyway but we're finally going to be taking some time to polish up our hazelnut editor and make it look as beautiful as possible so over yesterday's live stream i believe me and the stream basically had a little bit of a chat and we decided we played around with some colors and we decided what the theme would be for hazelnut and this is going to be like the default kind of a dark theme obviously it's possible to just go into the source code and change everything yourself and make some weird pink colorful rainbow theme if you really want to but in terms of what hazel is going to ship with we're going to have like a dark theme and a light theme light theme will do away later because it's low priority but today we're going to be talking about how we can implement a nice looking dark theme with some nice beautiful colors and a good kind of color palette some better usability features as well such as having like the entire kind of header of each component and also each entity in the scene hierarchy clickable because at the moment you actually have to click over the label and it's a bit annoying and we'll also be uh using a much more beautiful font so without further ado let's dive into the code and take a look at how this is all gonna work so as mentioned um i have already written this code uh this is um in fact let me show you guys how i how i operate because i know that a few people i think were asking about you know what exactly it is that i do here on my special super secret secondary monitor um i have a patch this is called a patch file um basically what this is is instead of committing my changes when i modify it i can save them as a patch and then i can revert everything else and this is basically the code that i have written and these are pretty much all the changes that i'm now going to implement in front of you guys whilst also explaining what i'm doing so that's kind of the idea this is basically all the code is going in and obviously if i come up with some stuff on the spot that i feel like doing then well i'll do that as well but usually it's pretty much just whatever's in the patch and that's the beauty of this um the point that i uh well that i can work out this stuff on a live stream and take my time because this took hours honestly to tweak all of these colors and get them perfect took hours and having to do that in front of you guys on this video would be a lot of pressure and also i think fairly boring to watch so we can be a lot more condensed here if we want to which we do so let's dive into this the first thing i want to talk about is the font and in fact the first thing really the first thing that i want to do is actually open up this editor to just have a look at what it looks like so this font is fairly rubbish i don't really like it i mean i don't want to call it rubbish because some poor person probably made this font and they're probably not poor but anyway the point is it's a fine font it's like the i'm going default font it's very simple it's monospaced it looks kind of all you know programmy i don't want this i want to have more of a normal font like visual studio as font right so the font for visual studio ui and all of that stuff we want to have something just a little bit nicer a little bit more aesthetic you know um aside from the font though let's talk about this other kind of styling uh stuff that we probably don't want to have so first of all these kind of blue panels i'm not hugely into that i want to have more of like a monochrome kind of feel we can have like a little bit of color um i want to change this background so it's a little bit more i don't know about if it's going to be darker or not but i want to add a touch of blue into it like a very very uh low amount of blue there just to give it a little bit of that you know spice um if we click on one of these we can see what this looks like this to me is the worst part though this looks like a disaster i mean we've got like the trend the beautiful transform component but first of all it's very unclear what is what like you can see that we've got a transform component sure but there's no kind of i guess frame around this header here so if we hover our mouse over it we can see the kind of extent of it but we have to actually be hovering over the label we can't collapse it by hovering here these buttons as well like you know this kind of overlaps the button you can see the different sizes there's no padding really between the like the sprite renderer and then the end of this scale thing so it looks a bit weird the add component button is just misaligned over here so what we're going to do is we're going to pop this add component button over here into the top right corner because i think it looks good there tag i mean we don't need a label for this tag it's pretty obvious that this is the name and it's pretty obvious that it's a text field that you can modify i also want to change the background colors of all of these things here and then finally one of the things that i also want to do is um set a minimum size for these panels so you can see that at the moment we can make them this small now realistically probably wouldn't make them this small but even if they're this small you can see that nothing really fits it just looks kind of bad and like i don't really like that i think there should be a minimum size that'll be maybe about this much and then we can obviously apply that to potentially all the panels that are inside this entire dock space so that is the plan that's what we're gonna do let's start off with the font so as i mentioned uh i have um already picked a font and i've decided all this for the stream but basically if we take a look at google fonts which is a really good place where you can just test out different fonts there's a lot of different fonts here that you can check out i think they're pretty much all apache license which means that as long as you like you know ship the license with the software it's fine um and yeah i mean you could spend a long time here looking through all the fonts but the one that i really like is called open sans so if we click on open sounds we can also download it this is also available on github if you prefer you can download it from there it doesn't really matter so i'm going to download this i've actually already downloaded it before but doesn't matter download it again for you guys we'll grab all of the files in here including the license and we want to put them somewhere so if i go into assets inside the hazelnut project here i'm going to go into a new folder actually that i'll call fonts and then we'll call this open sans and then inside here i'll paste everything okay so now we have all of these font files now using them with imgui is extremely easy if we go into our imgui layer all we really need to do is add the font so and and set the default font to be that font so over here inside style or in fact it's it's in io if we if we go i o fonts let me zoom in for you guys so i o fonts and then add font from file ttf we just need to give the file path which is assets fonts and then let's pick a font so we're going to use the i guess we'll use the regular one for regular things and then the size that i liked was 18 okay that's it that's now been added let's do dot that's not been added this actually returns an iron font so what we can do is just directly set the default font or font default uh equal to that now that's like pretty much all we need to set the font to that font so let's launch this and see what it looks like it looks like an error uh asset fonts open sound uh i forgot open sams there you go and there you go suddenly this looks really nice i think and we're obviously using a different font looks a bit more like a program and not like a little i am gui uh widget uh which is good and um yeah that's it now while we're in the excuse me while we're on the topic of fonts let's talk about these things right they're kind of looking thin and i want them to look kind of thick so what i'm going to do is use a bold font uh for these kind of x y and z just because i think it looks nice right so what we'll do is we'll also add a bold font now how are we going to manage more than one font you ask well it's not really a huge problem what i'm going to do is uh you know obviously uh load the other font like like a normal person so let's go and load um open sans bold i could have just let's just type the word world uh except what i want to do now right is obviously like the way that the fonts are stored if you actually look at the way that the fonts are stored um inside iron font atlas there's actually another uh little uh field here remember called fonts which is an i'm a vector of iron font pointers so inside here we basically have all the fonts so font zero is kind of like the first font and then we add this one essentially as as font one i guess they're stored in order so if we remember that the last font in this collection is the regular font right that's our default font then we can say that the first one is on number zero is bold you probably want realistically a slightly better system for managing this like in in other words instead of having to keep track of the fact that the first font inside the collection is our bold one which is kind of dodgy especially if we add more fonts later you probably want to just have like some kind of font library maybe yourself or build something on top of imgui so you can get them by name or by like some kind of enum or i'm not sure it's up to you i'm going to leave it as is because it's not a big deal and we only have two fonts for now so what i'll do is inside the scene hierarchy panel if we go to drawback 3 control all i'm gonna do is first of all i want to retrieve the uh font right so um we need to get access to all the fonts so i'll do i am gui i o i o equals i'm going get i o so this gets us our font data that we want i'll do autobot auto bold font equals io fonts and then fonts zero right that's the first one so one would be the regular one our default font and zero of course being the bold one and then it's as simple as just pushing the font so whenever i lay whenever i render this button right the x button for example i just want to do i am gui push font bold font and then when i'm done with it i pop it now you can see why first of all i want to make this a function this whole uh control but also um why it's probably a good idea to make some kind of library from i'm gui that actually has a lot of the kind of um you know standard kind of ui controls that you're going to use because you know it can be very verbose but it's not even about the fact that maybe you don't want that much code and it's too verbose and it's hard to read it's not even about that it's about the fact that if you obviously copy and paste similar groups of code and you don't define a proper style for your ui you're going to wind up with little inconsistencies because there might be an area where you accidentally set the padding or the spacing to like two instead of three or four and then suddenly things don't quite look right and it's very difficult to go on and find it whereas if you have a nice library that has like a certain style defined very clearly and then you have to reuse your own library's controls and constraints and all that stuff then obviously it leads to something a bit more consistent more bug free and just something that's just easier to work with which is always good okay let's test that out while i drink some water very hot day today surprising all right um so yeah there you go x y z look bold i think that looks a lot better than what it did before a little bit of a subtle change obviously but i think it looks nice okay the next thing that i want to do is address these silly like header things that look terrible and possibly the button as well so as you can see if i'm going over all of these entities here and selecting them i can't select them over here right that actually deselects everything i want this to be the entire width luckily that's very easy to do in i'm gui it's actually just one little flag for our tree node so let me find where we do our scene hierarchy which is draw entity node um we have our flags here what i want to do is to the flags i want to add another flag i'll just do it on a different line so it's not like you know overwhelmingly complicated here and it's going to be called i'm going tree node flags span available with okay simple as that so what that will do is now basically span the entire available width and i can now as you can see select it like that really easy right whereas before it was kind of like this because we haven't added it to this one yet see so that's the difference i think that looks a lot better and it's not even a looks thing it's more of a usability thing as well so we'll also uh this has its own kind of flags we'll also add it to this did that that is kind of temporary code because you know that's kind of like before we have parenting properly working we just have this like little weird trino that has the same name as the other one and it's just like simulating that but we'll add it there for fun just so that we don't forget to add it to our actual um you know parented things so now you can see all of these are done properly okay so we want to do the same thing obviously to the um to all of our components now this brings me to my next point the whole component situation it's getting a little bit out of hand right i mean it's not that bad yet but if you look at sprite renderer component which by the way might i add is the only component that actually has a proper plus button that can actually remove the component if you look at this look at this little blob of code right you might see a problem it's not really a huge problem but it is a problem and the problem is that exactly two lines two lines which could actually be in fact one line of code are actually specific to the spry renderer component and that's literally this the whole sprite renderer component the whole ui for it is just this one little color edit control that's all that we see there the rest of this is just basically boilerplate code that is that should be reused for every single other component so when you have what looks like about 30 lines of code and one line of that is is all you need for the entire component it's probably time to maybe write your code a bit differently which is what we're going to do so what we'll be doing is writing another little static function that you guys love called draw component now this is going to obviously be a template um with the component type and also uh i'm going to make a little another um template here called ui function right or another template parameter i should say which is going to be our ui function so we're going to have a label for the ui control because um if we look at if we look at this right we like what what out of all of this code needs to be different per component the type that's what our template type name t is it's the component type we could probably name it component type but for me t is fine um and then also the name sprite renderer right those two things everything else like the frame padding this plus button to open component settings and be able to remove the component all of that you can see is obviously specific to the sprite render component which is our t template argument now but everything else is the same across all components now whether or not we have a remove component can also be kind of unique uh because obviously like the transform component you shouldn't be able to remove a transform component um i mean maybe we will allow that i'm not sure but ultimately you could either pass that in as a boolean or maybe even have an additional lambda that we can take in that will specify like what is in exactly inside this component settings menu because what we're going to do is basically copy and paste all of this code well excuse me [Music] something over my words here i'm too excited about this lambda stuff and like this kind of drawing component function what we're going gonna do here is uh take all of this code put it into our draw component function and then the one line of code that we need which is the color edit for we're going to take that in as a lambda so that way what we can do is basically specify a function that will draw our component ui and then we also have a parameter there where we can drop in any custom ui code that we want anything and that's how it's obviously going to work for something like the camera component which has a lot more code so going back up to the top i'm going to um where is this not to the top here it is draw component so we'll have to take in a name right um we'll have to take in the current entity because we need to be able to like access certain things from the entity potentially as well as remove the component from the entity so we need to be aware of what entities component we're actually rendering here or we're drawing and then finally the ui function okay that's what our draw component function looks like so if we go back down here into the um uh into our original like spray render component let's just copy this entire blob here and uh going back up to i keep losing it going back up to here let's paste it in and now sprite render component obviously becomes t so we need to make sure that everywhere we see spriter under a component which i think is two more places we replace it with t uh name is what our label becomes so name dot c string and then finally instead of calling this kind of color edit you know whatever we're going to actually call a ui function right oh sorry it's just called function i'll call it ui function ui function and then we can optionally optionally take in a parameter we can do whatever we want here it's really i mean it is a lambda but we're just taking it as a template so it generally could be anything you just have to make sure that it executes with one parameter that's going to be correct here we're going to take in the actual component right so we have a entity get component and this is kind of like our um uh like i guess it's our component which i'm gonna change a little bit i'm actually gonna probably so we have the empty component let's bring this up here and i'll call this component so that the whole function has access to it and then this component is what we'll pass in so that that just saves us having to you know retrieve the component from the nc or anything like that since we've already kind of got it here and we're inside this you know function that's supposed to be drawing it we'll do that so there we go that's it that is it you can see how little code we actually needed to change to adapt this to be basically modular for everything else so or generic i should say for everything else so basically if we compare the before and after draw component sprite renderer component now we need to give it a name which is going to be sprite renderer like that needs to take in the entity as well and then finally our lambda which is going to take in a component our renderer component and i'll just drop it down here so that it's a little bit cleaner and it's literally just going to do this one line of code right slc is replaced with component that's it this is the before and this is the after how nice is that and the even nicer part is that for something more complicated like this camera component right the actual stuff that we need is basically from this line onwards so if we grab all of this code right um and then write a draw component function for our camera component uh then okay let's see so camera entity and then auto components let's drop that down here okay uh camera component is just replaced with component you could call a camera component but i'm just going to be a little bit cleaner here um i guess that's it no surely not all right so we had it here as well and here okay and that's it so we still have all of our ui code obviously because this is the the stuff that's specific to our camera component but we don't care about anything else because everything else should be generic every single component kind of the header and you know the remove component button should all be identical so we don't need to repeat that code so all of this goes bye-bye and then finally the transform component which again is a bit of a special case because it doesn't have a remove thing but it doesn't matter we don't really care about that let's copy this once again um i will add a transform component over here and transform um and stop fighting mutual studio and then we'll grab all of these draw vector3 controls tc just becomes component like that and i think that's it all right trina flax doesn't need to be here either so let's uh oh and also we have the tag component but that really is a special case i mean that's like you know an input text and it doesn't have like a proper header it's rendered differently because it's obviously not really like a real component like a real modular component like the rest of our components are okay so yes veg lobster i do remember the high dpi uh request thing i will get to that um okay so tree node flags uh we deleted that didn't we um wait no this doesn't need to be here so we just have our draw components now if we collapse these they're nice and simple look like that great let's just control f7 that file to make sure everything compiles inside this file it does not because yes we did delete our tree node flags i don't even remember what they are let's quickly undo and get back to it because i remember i deleted it recently there it is i'll copy that and then redo everything um and then we'll just paste them up here but yeah okay good let's take a look at this so we should have the same result as before obviously but now with the added uh bonus of having way less code there we go right now everything has the little plus you can see we can remove our sprite renderer component that should work fine we can even remove the transform component and it should work fine okay everything is good no matter what component we have we have this little plus button that doesn't work properly we'll fix all this stuff today um but that is the gist of it okay really cool now let's talk about the whole kind of header and what other tree node flags we may want because turns out we want quite a lot so aside from default open we want something called um framed right what this is going to do is actually provide a frame for our entire header and that's going to be really nice so if we launch that we should be able to see what that looks like we also wanted to respect frame padding and then also span the available width like we did with the other thing so you can see now this is like kind of a full uh a full kind of like the header actually has like a background color which is nice um so let's do frames we might not even need span available width but let's do it anyway span available width and then i also want we have our overlap and i'll also add the frame padding so that way it's just gonna um take into account the frame padding by the way one of the ways that i discovered all these flags is not simply just by going through all this because this is kind of i don't know there are comments but it is a little bit difficult to read is um simply going to the trinode ex function trino behavior and then just seeing what it does so like for example you can see padding is calculated based on whether or not this flag is present if this flag is present it will use style frame padding otherwise it will use some other calculation right so that's kind of um i mean it's going to take into account some other things as well so just know that like one of the best ways that i've found over this game engine series week to kind of get to know i'm going better is just by reading the source code right so you can see like again with this display frame the frame kind of in fact how do we even do that display frame so display frame will work if framed is present if it's not then it's not going to work but then there's also like you know span available width and span full width and some other things to let you interact with it for example so yeah just a few different things that um you might not pick up from i'm going just by writing comments and by reading the header files but if you look at the implementation it's not too difficult to find out what else you can actually do with it so if we launch this yeah i feel like if we have framed we probably don't need span available with um and you can actually i think we you can see that let's go back quickly um so uh yeah so um if so if display frame is false and flags and one of these uh is present yeah so this actually has to be present actually because if this isn't present then it's to be zero and they're not going to be both true so i guess you it does need to be present for interaction but anyway point is reading the source code a plus plus really good way to actually uh figure out how you want to do something and how like certain paddings and bounding boxes are calculated because i've had to do a lot of that over these past few days of styling okay so um yeah did we launch this uh yeah so this now looks pretty good um we have our plus button that looks terrible let's figure out what we can actually do with the plus button to make it look a little bit better so i think what i did um so we've got our frame padding that's why we enabled this like frame padding uh flag here so the next thing that i did was um so actually before open after i pushed the frame padding um i figured out the line height so float line height is g i am gui font font size this is just a better way of doing this because you can actually calculate instead of hard coding it style frame padding dot y times two now this is a pretty generic padding calculation um i think i'm gooey actually even has comments about this but if you if you again if you dive through the source code you can see how it calculates certain things this is needed for us to work out the actual height of the button and the size of the button um so we'll need that we'll need that in a minute in a minute and it probably doesn't have to happen like here exactly um but you do have to do it after you set the frame so then we'll add a separator just to keep everything nicely organized um and then we do our tree note open thing which we um did and then i'll pop the style var over here and then on same line instead of advancing get window with minus 25 we're actually going to advance by um we'll say i'm gui get content uh region available right yes dot x minus the line height times 0.5 so half of the line height so this is us basically seeing what the rest of the content available region is the reason we use this not the window size is because i found that using the window size doesn't take into account the scroll bar so if the scroll bar appears we obviously want to move everything to the left otherwise it'll be behind the scroll bar potentially and then we'll the scroll bar will obscure our button so we can get the content region available x which is better and then we'll subtract half of the line height just to get it into the perfect uh spot here um okay and then finally when we draw our button we can just draw it as line height by line height and i think that should already look pretty good so let's hit f5 and see if our plus buttons look beautiful now obviously we still need to play with the colors but um almost beautiful they look a little bit too too far the other way i wonder what that is maybe that's to do with uh certain other things that we haven't set yet um but we did make that like the separator i didn't look at the separator that's all right um what i do line height times point five oh it's looking uh that does in fact look like what i did so i did i also did push item width that might be why so one other thing that i did was inside draw components no but that was in a different place oh that was the add component button never mind okay hmm yeah that should have put a button into the right spot i wonder why that didn't work font size frame padding y times two content oh sorry um we need the content region available before we actually start the control stuff so what what this will do uh so let's move this over here basically if we get the content region available here obviously the content region that's available has decreased because we've just rendered a trianodx so or a tree node so we need to actually get the full width of the content region available before we start adding widgets to it because as we add more widgets to the same line obviously that's going to decrease so this should now be perfect all right there we go you can see that it's perfectly at the end and more importantly if i kind of make a little room here so there's a scroll bar you can see it all shifts to the left which is perfect and exactly what we want okay cool so those buttons are a plus plus now um i guess the next thing we can do is probably move that add component button right so what did i end up doing for that so uh the add component button at the moment i think we're doing it here add component okay here it is oh and we also need to fix a bug where um what this is supposed to do is only give you the list of components that you don't already have so that you can add those because at the moment you can add you know a camera component twice which is just going to crash with an asset inside and so we'll draw the components here i think that's what i did and then what we'll do is uh if i find this um because i want to get this right obviously unfortunately i had it before but i lost everything all right here we go um so what i'll do is right after we draw the right after we draw the um tag component which is up here i'll do i'm going same line so that we continue on we'll push item width minus one which should basically take up the rest of the width as far as i'm aware because i'll go the width all the way to the right border minus one um and then we'll basically paste all this stuff so we have our component now and then we can um there's always flies flying around here it's really annoying because we've got like a plant over there worst anyway uh and then we just do this i think as usual so let's just take a look at this and make sure it's all good we probably need to pop item words as well oops pop item width uh and then yeah so there we go so we now have an add component button uh let's get rid of the tag because that's annoying and it's taking up space i'll just add a little hash to hide it and now we have a much nicer looking add component button that we can use to add a component now i also want to make the size a bit different because i don't want the minimum size to be too small so i'm going doesn't actually explicitly allow you to set size constraints for docked panels as far as i'm aware uh that doesn't exist so a little workaround that i found for that is basically um [Music] setting the size setting the entire minimum window size just for this dock space right so the way that we can do that is we'll get the style i'm going style equals i am gooey get style style dot window minimum size equals and we'll set it to 370 right for the x so you can't make a window less so if if the window is docked it has to be at least 370 pixels wide which i found is the perfect amount for our properties panel and then we'll reset it back to what it was which was 32. if you were really cool i guess you could probably get this first so like um min win size you could probably get this and then reset it back to that that way if we change it later we don't have to worry about setting it here as well um and then 370 is what it's going to be and then for the rest of our windows it will be fine so let's check that out ideally what i'm going would do is probably take into account the maximum minimum size of all of the windows that we have here and whatever that highest number is that becomes the new minimum for all of the windows that are in the panel but they don't do that so and that's probably what i would do um in the future maybe i'll even add that change into our fork of i'm gui uh if we kind of uh get there but there's other stuff that i want to do before that so now you can see i can't make the panel less than um the minimum width same for this one and same for the viewport so that's nice because we have a nice little balance for everything but if we do take this out then i can make it the minimum width which is 32 by 32 okay so that works as expected when you dock it it doesn't immediately snap like that but then you can resize and you can't size it back so that's also a little bit of a thing that you can do okay cool so there we go now that does uh kind of limit us a little bit because if we launch this you can see that it's kind of um there's not much space here really if i move this back to the way it is it doesn't look like there's much space that is because we're launching and that doesn't actually look perfect maybe our style will change a little bit odds because of the um scroll bar but anyway um you can see that's pretty much the perfect amount here if we don't have a scroll bar uh but anyway um what was i saying yeah so there's not much space here so i think what i'll do and this really should be exposed somewhere else but i might set the default width and height to be 600 1600 by 900 i think that's a probably more accurate size i mean hazel dev just launches full-on like maximized full screen um so i think that this is probably okay and you can see that it provides plenty of space here for us to actually uh work with if we want to work windowed and not full screen which would be kind of weird i think that working full screen is probably what you want and you can see that we have definitely have plenty of size definitely have plenty of space if we um work on something like this okay how much time do we have left 35 minutes wow this is taking a while haven't done the colors yet let me just slap in the colors because there's really not much to it and it's kind of the last thing that i want to do so the way that you can set your colors in i am gui is pretty easy um if we go to i am gui layer then we are actually already kind of setting some certain colors but basically what you can do is um set dark theme colors i'm just going to make a little function for this uh i guess i'll make it a member function instead of a static one because we might want we might um want to maybe i'll make it public we might want to like uh expose that later to the ui so we can flip between light theme and dark theme um so let's maybe implement this i'll just do this whoops through visual assist okay and now uh we'll get the style which is like this and in fact i think it's just style.colors so dot colors and what is that exactly it's probably a i am veg4 okay sure so we have the colors and then now i just need to set certain colors so obviously i'm not going to pretend that i don't have them in front of me i'm just going to copy and paste them in hopefully you guys will forgive me for that and i'll get rid of these pluses from the patch turns out i wasn't as cool i was cool enough to use it this way so i'll have to quickly adjust like all of this but basically these are the colors that i've worked out over the course of probably an hour or two during the stream i think they look pretty good and they're gonna be our um default colors for the time being and of course if there's an issue with something yeah i think this one i wasn't sure this one was so i just set it to pink just so that if it would show up i would um see it but in all seriousness let's uh probably replace that with something that at least isn't going to look terrible and now you are about to see the new hazelnut there it is that's what it looks like okay so we have um if we kind of collapse this we have uh different like tab highlights and different tab colors based on what viewport is currently active as well i left this thing as blue and also i think the other thing that still is blue because we haven't changed it from the default i like check boxes so if checkboxes are on you can see they still appear blue but that looks kind of nice so i've left it as is anyway there you go that's what hazelnut looks like now let me know what you think of this new theme this is how the kind of components look we can remove that component and then add a new component i haven't changed the background of this nor the file menu just yet i'm not sure even what to set it to we'll see this is obviously subject to change as we go along with this but i think it looks pretty cool um and yeah that's what our theme looks like so you can obviously check this out and clone this from github and take a look at it on your own computer and let me know what you think of the theme because i i think it's pretty cool anyway that is going to wrap up this episode i'll probably tackle high dpi changes and all that stuff possibly next time um or i think what i'll actually end up doing is like a bit of a maintenance episode but anyway i hope you guys enjoyed this video if you did please don't forget to hit the like button you can help support uh hazel and everything that's going on by going to patreon.com huge thank you to everyone who does help uh support this project and everything that i'm doing here on youtube wouldn't be possible without you guys so i really do appreciate all of your help um this whole game industry is week you'll be able to catch all the past live streams over there on patreon as well as see hazeldev which is like the 3d c-sharp scripting full-on editor version of hazel that is progressing much more quickly than this thank you guys for watching next time i think we're gonna make a start on serialization which is gonna be pretty exciting so that we can actually construct a scene and then save it so exciting stuff coming soon see you guys later goodbye [Music] you

Channel: The Cherno

Views: 28,850

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, hazelnut, imgui, editor, style, theme, ui

Id: oESRecjuLNY

Length: 40min 12sec (2412 seconds)

Published: Thu Oct 22 2020