Next Steps + Dockspace | Game Engine series

hey what's up guys my name is the churno welcome back to the game engine series specifically to this first episode of a new format feels good to be mixing this series up and introducing something new because to be honest as as i mentioned in the video that i put up yesterday which i'll have a link to over there i was getting a little bit uh well a little bit burnt out i guess with a series and just didn't really like the way that i was actually making the videos so in practice i think for you people watching not too much is actually going to change we're still going to be doing the same thing i'm still obviously going to try and keep it as high quality as possible the only difference is that this is now going to be more or less live by live i don't mean live streamed i just mean that this is going to be like the way i'm even recording this is actually the same way as my like patreon live stream setup uh it's just gonna be me working on hazel i am still going to edit these videos down a little bit so if there's like just stupid moments where i don't know what i'm doing and there's just gaps and stuff like that i still am going to edit it a little bit but it's just going to be like i have not like rehearsed this at all i don't know what i'm going to say i don't know what i want to do it's just going to be me working on hazel and obviously trying to teach you as much as possible as i'm working on it which to me is really exciting because i think that if i was in your shoes and i was watching someone make a game engine this is probably the format that i would want now i've got my uh matcha here which is like a different type of green tea because i've been trying to cut down on my caffeine intake trying to cut down to one coffee a day from two so so there we go i've got that that's just to show you how chill how chill this all is so what are we gonna be doing today um i really want you guys to watch the video that i put up yesterday which was about the whole kind of game engine series but also the future of this because this is going to be the first video in which we basically take strides towards our goal which i have written on the whiteboard up there which is our priority which is a full 2d workflow on all platforms what i mean by that is we want to be able to make 2d games in hazel we've picked 2d because i ran a poll a while ago 51 voted for 2d but even if you didn't um it's important to establish i think a 2d workflow first because it's it's easier uh meaning that like you'll get it done faster and especially since i don't have a team backing me um i will be able to just physically program program a 2d workflow a lot faster than 3d because 3d is something that is ever evolving it's something that you know unity and unreal are still working on whereas 2d is a lot more achievable and it will give us basically the ability to use hazel to create some kind of interactive uh game it's just that it will be likely be 2d now that's what our priority is to create some to make hazel into a standalone tool that we can open we'll open like the hazel engine and then we'll be able to basically set up a scene put some sprites on the screen make some entities add some behaviors to them via scripting language add some components and then export that into some kind of game that we can run standalone outside of the editor as well as probably preview the game inside the editor and like some kind of game view much like unity something like that um and i haven't figured this out all the way because even though hazel dev which is available for patrons even though that is a lot more advanced than this version of hazel and it is 3d um it still hasn't it doesn't have everything figured out it's it's got an editor tool but it still doesn't have everything figured out so the strides that i want to take to make this stuff happen and these videos um i'm not going to be too stressed on how long they are i'm definitely going to keep them under an hour and i'm going to aim for about half an hour to 40 minutes at a maximum just because i don't want to dump hours of footage on new people uh often because that's a little bit unwatchable i think and um i'm sure a few of you would enjoy that but i think the majority would much rather something a bit more condensed and something that they don't have to allocate hours like every week or every day or whatever to watch so that's why i'm still going to try and keep these as concise as possible even though i'm blabbling on a lot but the reason is that it's the first episode and i want to just give a little bit of i want to formulate a plan because this is this isn't just me show like sharing this plan with you guys it's also me formulating the plan for myself because i don't know what i'm doing yet and that's the whole point to do everything on camera and in front of you um so what i want to do is like there are many things that we need to do to achieve that 2d workflow as i've mentioned the first thing is we need some kind of tool chain like we need a tool an editor tool that we can use to actually basically you know if you think about it set up the scene position everything visually because that's a lot easier to do than through code add like a few entities add uh components to them add some scripts for behaviors and then uh you know use the ui to like maybe set different textures on different meshes and all of that stuff i mean we have two it's 2d so it's not really meshes but we still have obviously sprites and and and by the way when i say 2d i think ultimately at the end of this maybe we will be moving the 2d workflow to a 3d editor so in other words you'll still be able to possibly position things in 3d space but maybe the camera will be locked to a 2d i i'm not sure we'll see what happens um because i think that if i was making a 2d game i would maybe try and make it like 2.5 d meaning that like you know in the sense that we'd have like um maybe you know a bunch of huge matte paintings or something like that but in varying kind of zed planes uh so that we have like basically like a natural parallax effect and all these all this other stuff so that we're not actually confined to working in two dimensions because that can be a little bit difficult even if your final game is supposed to be 3d but anyway we'll see i don't want to talk too much um let's get into it and let's take a look and i mean this is so live that i need to actually hit this button to transition to my screen so let me know first of all what you think of this little like face cam because i can get rid of that i can move it um if it's covering important information i might move it this is literally being recorded like in obs i'm not recording into the camera and then editing later so it's all very much live and like a live stream which is part of the reason why it's so um i don't know i'm enjoying myself so far let's dive into this and take a look at what we have now also it's worth noting that um i'm not going to be recording things i'm not going to be zooming in and out of things so really the best way to watch this is going to be full screen when i'm editing code in visual studio i'll try and zoom in as much as possible so you can actually see the code but things like this you know if you can't read this then uh please zoom in or watch on a computer or something like that because this is meant to be obviously a view of me developing this and it's not really realistic for me to be zooming in all the time okay so first of all uh let's hide the hidden items because i don't want to see them um i've basically reverted everything i did in the little tile based game adventure that we were working on now i think most of the stuff is committed this is fork this is my favorite git client i think recently it became it became paid it's like 50 bucks or something now it used to be free i have not paid for it i've still got a version that i guess you don't need to pay for um but to be honest i probably would pay for it um and just to be clear this is not sponsored or anything um but uh it's just a really good sorry i just had to sneeze there i'll edit that out probably um fork is a very good get client i really like it uh i think that it's yeah it's just really nice and it has a dark mode for those of you who are obsessed with that kind of stuff um okay so this is um basically i think where we were up to but then ah no it's not my last commit is all the way down here and you guys can't really see the authors here but that's okay it's not really necessary to see them i think um or maybe i can get around my face cam by doing this anyway so these are all the um different commits that have gone in and that's obviously thanks a lot to lovely santa because he is a hazel contributor as i've marked him on my discord server i don't actually know him but he's done a lot of really good work so shout out to lovely santa for helping out with hazel um he's been merging in various pull requests and i've basically given him access and permission to do stuff like that so a lot of stuff has gone in here um i'm not exactly going to go through all these commits i think i might i might do that and if you guys want to see that in a video i guess i will show that i guess i should show that um but looking through all of this stuff um you know there has been a lot of changes i wanted to focus on one of them which i think was specifically uh the branching instead of it indexing the texture sampler so um as far as i'm aware uh you know what we were doing before which was basically we had a texture index which used to be and you guys might really have to zoom in here but um uh we had a texture index that we were passing in which was a float we were passing it to an in here and using it as an index into this sampler 2d array called u textures inside our fragment shader to actually sample from the from the appropriate texture based on what texture the quad wanted to use this uh does not work on all gpus and all drivers um as far as i'm concerned it works fine with nvidia but i think people were saying that for amd cards it does not work um now i don't have any amd hardware like graphics cards i mean i've got an amd cpu but i've got no amd graphics cards in my house so not because i hate them just to be clear but i just don't have them so because of that um i have no way of testing this but people have told me that doesn't compile so uh we've switched it to this which is uh i think in sparky that's what i did in i think opengl es because sparky was a game engine i made in the past that ran on android and because i ran on android i think i had to do something like this so this is my preferred strategy for dealing with this yes it looks a little bit uh disgusting but um i mean you know apparently this is what needs to happen we have to basically switch on vtech's index and then uh you know manually put this stuff in which is probably not like the best thing in the world but that's just a change that i wanted to kind of uh you know shout out i guess and just uh bring to your attention um yeah so core has been renamed to base i'm not sure why it's called base in hazel dev i believe um for no apparent for no particular reason just because they're different code bases but anyway um so so basically my point is there's a lot of really helpful stuff going on in github um on the repository so thank you to everyone who's contributing uh you know the the engine is obviously better because of the community so i just wanted to kind of thank you guys for that let's open up hazel and talk about what we're going to do today so what i want to do today is i basically want to begin this editor workflow now the reason is our major kind of goals are going to be to put in an entity component system set up a scene system set up a serialization system set up a bunch of components and then connect up c sharp that is basically what we need to do and for that to happen it would be very useful to have less temporary ui than we have right now because at the moment our user interface is very much just floating windows everywhere and when we want something we just bring up an im gui window like this called settings and it's just it's very temporary and we'll have to rewrite it anyway when we make more of an editor so i figured why not why not move into an editor like now you know why not kind of do that first and then when we actually for example start to work on the entity component system and we want to see all of the entities that are in the scene all the components attached to a certain entity we'll just be able to make the ui for that like be more permanent because that's part of the editor so that's my that's my my thought process here um and that's ultimately what i want to do so to set that up what we need to do is we need to transition to an imgui dock space so i am gui um has and this doesn't even build so i'm ah it's because i it's because i got rid of i reverted some code sub texture to 2d doesn't exist i'm pretty sure i pushed that anyway let's run this again so this is what i mean like this is completely live and um you get to watch me fix problems so oh and one thing that i didn't mention let me switch this to a full screen um one of the things that i didn't mention that i really want to to mention was uh feedback right so this is the first episode of a new format please let me know what you think of this by the end of this episode if you don't like it let me know if you like it let me know um obviously you know this series is ultimately made for you so if there's something you want me to change then i would really appreciate you telling me um because the other thing is like um you know a while ago we tried a different format where i think i just basically wrote the code offline and then i showed the diff of what i've done and i walked through that people did not like that whatsoever and i think within two or three episodes we went back to writing all the code live so you know i do care what you think and i would like to know um in general you know uh if you're happy with this format if you think it's better but not quite there yeah just yeah just let me know and i will uh fix it up okay so um let's try and compile this code that's gonna be our goal for today too okay that was quick um so now we have this stuff up up and running and i'm going to be looking over here on my other monitor sometimes just to make sure the face caps are in the way and yeah regarding the face cam let me know i'm happy to get rid of it um so but i guess this builds more of a connection and sometimes when i'm talking and not actually doing anything it probably is better anyway so we have floating windows which is good floating windows means that we can render windows i'm going windows outside of the main area so in other words this actually creates like a new window on the fly and renders stuff into there that's really good that means that we're obviously using the imgui docking branch because that's something that exists there now that should mean that if we look at imgui demo this actually should have and this is a very good file to consult when you're working with i'm gui because this has like basically this is like a full test suite for i am gui everything that i'm gooey is capable of this should basically support so what that means is that and it's very easy to deal with all you really have to do is say i am gui show demo window um if you want to you know uh if you actually want to look at something so i'll just you know say show equals true and put show into this and then if we run this then we should be able to see the show demo window and i'm bringing that up on purpose for something as you'll see in a minute if i click on examples and dock space this is what i'm interested in so this is the i'm gui dock space um and you can see that it's really been here all along this i'm gui dock space you can see first of all our scene has completely disappeared okay that's step one because i'm gooey has taken over our entire window step two is if i drag windows around we have these wonderful docking indicators here that let us dock this what that means is i can easily dock this into here i can take this settings window this actually isn't part of the dock space so i can't do anything with this that's okay if i spawn like another window i think i can see i can put this like over here or over here and you can see pretty eas pretty quickly here that what i'm actually doing is let's go console is i'm actually setting up basically a tool here that could be like a level editor we've got like you know this example over here we've got this dim gui demo panel over here you know i can uh sport i think you guys get the point but i'll show you one more thing i don't know if simple overlays is what i necessarily wanted to do i think i just ruined everything right click to change position close that's what position i want not present okay i opened it again what is wrong with me okay main menu bar and you can see we have file and open and i mean we quit which doesn't do anything luckily um you know we have like this whole there's a property editor example here where this is very similar to the property grid that i kind of designed i guess in um like for hazel dev you can you basically see the point like we have um we have uh something that more or less could be a tool so we need to transition um hazel and in the current format to using basically this kind of view now it's not very hard to do but it is something that i haven't done in like probably over a year because that's when i did it to hazeldev so what we're going to do is we're going to actually show this demo i'm going to go to this demo window and then in here i guess i'm just going to search for dock space so show example app dock space so this is kind of what i want um i'm going to this should be more or less self-contained so i can literally copy this hopefully um and we can analyze this code because this is the example code i'm going to kind of analyze this code and figure out how we can put it in here now obviously right now we're inside sandbox just to be clear sandbox is intended to be the runtime this is not intended to be like the editor tool we're going to make another tool called hazelnut um i don't know if i'm actually going to keep that name um maybe we'll just call it hazel editor or something a little bit like more like that but in the dev branch i've got hazelnut which is like the hazel editor and then hazel is obviously the runtime and then you know like the sandbox project is the run time but what we're ultimately going to do is create a new project called hazelnut i don't want to do that today i'll probably do that next time because right now my priority is just to set up this dock space so uh that being said what i want to do is probably paste that code in like here to begin with see if we get any errors so open we get open as an error um but i think now we've got a few other errors help marker we don't need the help marker uh show docking disabled message we don't need because docking will not be disabled um because we'll start that we'll start that up as part of the i'm going state and then finally uh docking being open i mean i don't know what i did for hazel dev but i'm sure this could probably just be like true or something i mean we need to pass in an actual uh optical screen because persistent so opt full screen i'm not sure exactly what this is again we'll have to like look at this in more detail but doc space open i'll set to true and then this will be something that i pass in here so now we've okay we've got a few other things here so close dock space it sets dock space open to false which could be like a cool thing to do um what's dock space open that that's that why are we dereferencing that though what used to happen here doc space open used to be a i used to be p open and what p open used to be a oh p open was a ball that we passed in i see okay so now this has changed um let's see enabled will always be enabled and then we can just say dock space open uh is false alright so if we launch this now then we should probably just see the dock space and we do right so we've lost our scene which is good um now we can't dock this settings panel why is that so we need to uh talk about that so as far as i'm concerned in order to be able to dock things um i think we need to so this is a i'm going to begin dock space demo um i think we need to we basically need need to i don't think they okay here's a little test i guess i'm fairly sure that maybe all the windows that we create have to be inside the dock space but i'm not really sure if that's the case um but maybe it is yeah i think it is so this window settings now we've we've basically moved it to be before the dock space ends which is this end this is the end for the dock space so what that means is that this window now you can see if i drag it around it's dockable so i can just put it here and it's now part of this i can put it make it full screen like this i can put it on the top i can do whatever i want with it because it's now kind of a dockable uh panel so that that's an important thing to do and obviously we can still kind of just pull that out and put it into like somewhere else put onto like our other monitor if we're dealing with a multiple monitor setup so it's really useful and obviously kind of what we expect and if we hit close dock space okay that didn't really work i thought that would work but anyway it doesn't matter we're not gonna have a button called closed dock space and we're not gonna to be honest we're not gonna have like this whole like begin menu bar end menu bar we're not actually gonna have this here um we can probably begin a menu called file and then have like one menu item here called like quit or exit or something like that um and then uh okay let's see menu item exit okay no shortcut selected uh so what is this we don't really need anything we can just write exit i guess and then if it's pressed we can just you know how do we okay i don't think we can actually close hazel at the moment cleanly um because what happens is application we have a running basically on window closed that's running to false so what we could do is application like shutdown or application close um let's just add that in right now why not so avoid close so this will shut down a hazel application i don't want to call it shutdown because shutdown sounds very serious and it sounds like um it basically just sounds like a system shutdown or something whereas close is like the user wants to close it that's how i see that at least so now what we should be able to do is on exit we can just do application get dot close all right and then this will obviously be hazel we won't have to deal with this hazelname space everywhere because hazelnuts or the editor will be part of the hazel namespace so i'm not too worried about that um this is just me checking to see if this will work just for fun really so now we have a file menu and we have an exit button and we can press the exit button okay fantastic the other thing i wanted to briefly talk about was the font um i don't think we're going to spend too much time on that now but um this default i am going theme and i'm going font i'm not the biggest fan of so i will be changing that to something that doesn't look like a monos based font just because like there's no need for it to look like this and i'm again i'm just not the biggest fan of this um but uh yeah probably something we can talk about next time um okay so now that we've done that the next big stage in this whole kind of uh i guess dock space thing is we want to be able to create a viewport and and that viewport needs to be able to um basically we need to render our scene to that viewport and then that viewport itself is going to be an i'm going window that we can then put in now to do something like that um we basically do need to extend the renderer a little bit i think because we don't support frame buffers at the moment the idea is and this is how viewports work in i'm gui um well not really an i'm gui in anything really what we want to do is render our entire scene into a frame buffer and thus into a texture and then once we have that texture we can use imgui's image view to actually render that so as an example because i know we have textures like checkerboard texture for example we can actually as part of this i think we can just do i am gui image and then we need a user texture id so we can say what's the renderer how do we get the render id from a texture is that something that our api doesn't support because it should no it doesn't okay let's add something we'll have it as a un-32t for now but it's probably worth creating maybe a like you know some kind of renderer id um type there for like a using that basically will well not maybe not using but maybe some kind of struct that basically will contain um the render id no matter what uh rendering api we're dealing with but basically uh get render id here and it'll be virtual obviously so this function if we go into text gl texture and we only have the 2d one then this will be override this will return m renderer id so now we can just do get renderer renderer id and then for the size um what size should we use i am back to let's do like let's do like 64 by 64 or something that might be a little slow i mean a little small um this is incompatible with i am texture id uh that's fine what is iron texture id iron texture id is a void pointer okay that's fine that's just because i'm going also supports various apis so we can just say um 32t uh texture id um and this texture id so it wants a void pointer now i'm fairly sure that what it actually wants is that it does not want us to give it like the memory address of this or something like that so if we if we run this we should hopefully be able to see our checkerboard texture as part of our um like settings panel i guess and there it is so there's that checkerboard texture we were drawing it quite small let's just do to like 256 or something so you can see it better but basically that's the idea right so what we want to do is we want to draw um this but this is going to be our scene view so this is going to be our scene um it's not going to be a checkerboard texture it's going to be our scene and we're going to draw it on it on it's like in its own panel and the size also is going to be dependent on the size of the panel so that's a few things that we need to set up but i think i will leave that for next time so to summarize and i will be pushing all this code of course to github what we've done is we've set up a dock space and our plan right now is to set up like an editor um i guess workflow so what we're going to do next time is we're going to probably construct like a frame buffer class and we're going to um once we have a frame buffer class we're going to have a texture attachment onto that frame buffer which we could then take and then use as that kind of iron gui image that we can render as part of like a panel so that is the plan um now regarding as well these videos one more thing that i wanted to add was i do still want to keep them fairly like uh i guess based on a particular topic so every video should be based on like one or two topics it shouldn't be like you know a video that's 40 minutes long in which we do five completely different things so i do still want to split up the videos based on what they're about so this was kind of about the imgui dock space but then the next video will probably be about creating frame buffers and then the video after that will be about um you know basically creating that i'm blue viewport now that we have a frame buffer class set up and all of that stuff just so that people can obviously find what they're looking for and they don't need to like you know we can keep the videos more bite-sized and more kind of i guess tailored to specific features that we add into hazel so that does not mean that i'm definitely gonna stick to like one video per week schedule if it's a smaller video like this one i will probably release another one fairly soon because at the moment as i mentioned my priorities to get this working as soon as possible so hopefully i will uh have time to make more of these throughout the week instead of just the one kind of every thursday as i've been doing but i hope you guys enjoyed this video if you did please hit that like button don't forget thank you that you can help support uh hazel hazel dev everything that i'm doing here on youtube i'm going to patreon for the cherno uh you'll get access to live streams which look basically exactly the same as this except it's more or less me uh working on hazel dev the 3d version and obviously it's live streams i'm interacting with chat and all of that stuff and you'll also get access to uh the hazel dev code where i have basically built like a 3d version of hazel with like a level editor and it's a lot more advanced than this and you can take it and take a look at that and obviously that will help support this series as well thank you all for watching i enjoyed this i will see you next time goodbye [Music] you

Channel: The Cherno

Views: 31,180

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series

Id: UljMVrQ_zYY

Length: 29min 26sec (1766 seconds)

Published: Thu Jun 04 2020