ImGui | Game Engine series

Hey look guys my name is trying to welcome back to my game engine series so last time we took a look at glad if you guys haven't seen that video check it out up there glad was just a way for us to load kind of the modern OpenGL functions that we need in order to use modern OpenGL as part of our rendering which is gonna be very important now today it's finally time to get I am going in to our engines this is the first major thing that we'll actually see on the screen which is really cool it's gonna be the first kind of finger we render I guess and also the basis for a lot of our future development because this is going to be absolutely vital for us to be able to debug things properly just display information on the screen and even you eyes and there's all of that stuff so I'm really excited about getting this in its gonna feel a lot more like an engine as soon as we can get this in there I also we're gonna see a lot of really critical things that we need to maybe do in the future to make this implementation more proper because today what we're going to do something called a hack now if you guys aren't familiar with how kind of software development works I mean I'm sure you watch through some extent is I might even link an article below about kind of a few different ways of I guess how you can write software particularly there's one way of writing software which is the first thing is kind of make it work the second one is kind of make it like correct right make it bright and then the second last one the last step is kind of just to make it fast okay so I'm gonna be kind of just making it work but you can the hack everything in because I want to see how I'm going on the screen that's not gold by the interstate it's pretty simple we're gonna by any means to get there but it's gonna hack it in we're gonna make it work and I'm gonna obviously make it horrible but we're gonna make it kind of usable okay now they're making it right step is kind of abstracting everything properly so that instead of using raw OpenGL function calls which is what we're gonna do we're gonna do today the entire I'm glorianne Durer goes through Hazel's renderer which means that it tells hazel how I render a triangle heroin ready text I want to render this one run at that right instead of actually relying on OpenGL that's gonna be way later because we don't have a renderer yeah right we need to have around refers we can do that but I want I'm going in before we have a renderer so that we actually can debug our renderer as we write it and do all of that good stuff it's gonna be a lot easier to do that this way I mean the last time I get fast I mean no it should just be fast anyway but the point is that's kind of where we're at right now this is gonna be a hack but it's we're gonna get I'm going to hazel by the end of this video so I'm pretty excited let's pop over and start making this happen okay so the first thing is I have forked I'm GUI quite a while ago and I made a pre make file for us is the same kind of thing as with gfw you can see there is my pre make file it is pretty simple as always because pre make is great there's a few problems with indentation as usual because of tabs and spaces whatever but I need to fix that I think the GLW thing has the same issue as well and also I think it still has this vision light it's good I like W anyway we have this we're gonna add this as a sub Marshall to out get repository serve it here inside C dev hazel which is where hazel is for me I'm just gonna do get sub module add now I actually don't remember the syntax I think it's it's the the repository and in the past so that's the thing and then the path which will put this is hazel slash govinda slash i'm going just like that i don't know if i should know we weren't to any capitalization let's just do that okay and then once that is done we should be able to go into hazel and open our pre make file and i'm just gonna add i'm going into that so just like we have with all of our other include directories I'm gonna make one farm GUI which will be hazel venda I am GUI and we actually should probably look at this yeah that's probably all we need to be honest and then we need just do I'm go to H and that'll include that because this is not inside an include directory at all so that's fine I'm gonna go grab this and chuck it on the end of include directories I am doing and then also we need to link it and of course I've got if we actually look at the ayam GUI pre make file you can see that of course we've got it as a static library like everything else okay fantastic so now if we go back we should just be able to oops generate our projects done reload the solution and of course we don't actually have I'm GUI in here because I forgot one of the most important parts wishes to actually include it like at this so now generate our projects again there we go everything is done we now have I'm GUI over here let's try and build it okay so of course that's succeeded and hey little should reference it as it does ok fantastic everything is done so now the biggest thing we need to do is set up to the I'm gooey layer now to do that we're gonna have to make a new file so let's come into sandbox I'm sorry I don't sandbox in to hazel and then what we've got is at the moment we've kind of got everything it's like hazel that's cool but what I want to do is if I show all files here um inside hazel I've been testing out whether or not to do this whether or not we want to actually put this into a folder called debug I think in the hazel development branch I did actually put it into a folder called debug because I'm go is kind of I guess like a debug thing for now though I'm actually going to just make it fall to cold I'm giving for it and then make a header file and a savory thing fall I guess cold I'm GUI layout now the thing is I don't really think that it is something that's just going to be used for debug for example I mean since hazel is quite a it's really like an application framework I don't even know if we will end up kind of creating our own UI library because that's a lot of work and if what I'm doing you know like why why why would we kind of voice all of all of that time kind of trying to do that so that's kind of my line of thinking because again if we were making like this was like a professional kind of game engine I guess and we're like we probably wouldn't want our own UI thing but because like I feel like maybe for now at least unless someone really wants it you can probably just configure I'm going pretty well to do pretty much anything you want because it's quite a nice it really is quite a nice little UI library okay so I'm going lay out pretty simple we're gonna have a constructor and a destructor and then we're going to probably override a bunch of stuff that we have inside layer so the cool thing about this is that we already have we really probably need in these two we already have an event system which is really useful because of course I'm going to use a lot of events so that's part of the reason why I just love doing this let's include our PCH and include I am GUI layout name space hazel and we're going to just create method implementations for on everything okay cool so it's filling up I'm going to just call the basic constructor here with a name so the name that we'll use is I am go away out so this is more or less going to be the kind of I'm GUI layer that comes with hazel so you can obviously just start rendering I'm going probably on any layer I don't know I don't know how we'll set that up but this is like a specific layout where we're going to render kind of debug things it's like our debug drawer layer this will always be drawing kind of last or rather on top of our 3d scene and all that um so yes it's gonna be a specific layer in which we probably will end up calling I am GUI kind of code or at least being able to draw any I'm GUI kind of windows on this so we might even end up adding like an online GUI draw or whatever to like other layers I don't know how we're gonna set that up we can talk about that later okay so what I actually do want to do is set an initialization code but I think it's going to probably rely on OpenGL so what I'm going to do what was a few things that I wanna do the first thing I want to do is actually probably end up taking on attachment on detach because I know that obviously when a layer is attached it will already it definitely should already have the renderer set up so on attached on detach will create method implementations for those as well did it end up creating one more yet did much more why did that okay so inside on attachment on beach ash when you do a few really important things so to know what we actually need to do what I'm going to do is go into hazel bender I'm gooey and then we're gonna look at some of the examples so there's two examples that I want to focus on one is kind of the OpenGL 3 implementation which is this so we'll grab that and we'll keep that around and then the other thing is the GL of w1 so this one okay so that's kind of gonna be the basis for what we're actually going to do today now this opengl 3 thing which does all of this GL stuff we're basically going to copy this completely ok so I'm gonna put it into platform inside platform I'm gonna make a new item sorry a new folder called OpenGL called OpenGL and then what I'm gonna do is I'm actually going to end up copying and pasting these files just directly but I'm probably not even going to rename them just that we really do reinforce the fact that they are temporary and I'm gonna put them in here and include them in our project now we probably will have to change a few things but we'll kind of see how we go so this is like our direct implementation so I'm gooood RH I mean I think that actually should be fine I'm not sure why that's not it ok so this this stuff look I mean I'm just going to strip this out because it's our own file we will rename this just that we have there's no there's no kind of confusion so I am GUI OpenGL renderer all this and that as well and we will see what we do here so clearly defined I'm that's weird will include I am GUI H in here I'm not sure why I'm not I don't like that it's not happy with this anyway and then we also have to before we include anything else we also need to include our PCH we'll probably have to regenerate projects as well in a minute and this actually should be fine I think that might just be middle studio I know it really can't include it huh well that's weird because it should be an include directory and it is inside hazel so that's a little bit weird let's just quickly check what the include directory is actually our vendor I am GUI include our well that's wrong because it's just fandom GUI so if we go back to hazel and grab that przemek file but it's gonna make sure that this is not saying that and then we'll generate our projects again ok done reload okay cool so um now that we've done that let's try and build our our render again we'll see what we get alright a few errors here okay this I can include obviously because we've changed this to be I'm GUI OpenGL renderer and then it's not happy with a bunch of other things because of course we're not including collides so we'll include glad okay I said it fantastic so that's done now back in I am GUI Leyland we're going to be able to on attach do a bunch of things that we need so I'm gonna include two things into here I'm gonna include the OpenGL renderer which is actually in hazel platform and I think that actually includes I'm GUI itself as well but I probably should just include go to H as well okay so it's not happy with this and that's a bit weird on hey let's just a performance platform open GL okay great sorry on attach there's a few I'm GUI things we have to do such as you know credit context now this stuff should be written by the way in here they're all gone that's great I don't know why they disappeared I was just clicking on the minute was closing the tab so that's great but if we go into examples again and we'll look at G of W [Music] so we have all these callbacks that we probably care about as well as old éand initialization cards such as create context which I don't even know where that is I guess that's probably in yeah so the other thing that I'm GUI does is a bunch of this stuff is actually probably in like example job Soviet and gel three inside this main file yeah so you can see it does create contacts and all of this stuff now I already know what I'm doing because I've implemented this before but just so you know that's kind of what I'm referencing so there's the main file that's inside the example you're using this the two example files which is like example Jeff wh1 CBP and there's also the render of the OpenGL kind of implementation example as well so I've measured all three so that's kind of the idea and based on that what it's gonna write all this stuff so when I create the context we're gonna use dark colors yeah and then what we need to do is have some flags so I'll say I'm GUI I or equals and give a get IR we're gonna send we're gonna set some back-end flags this is just like pretty standard I'm GUI setup hard so it has Mouse trousers yes we have to add a bunch of mouse cursors as well eventually probably not today because like the hack implementation and has set a mouse position okay and then what we actually need to do if we want keys to work is setup a key map now I think that this is something that is inside here so that I don't have to write everything out where is it that's the OpenGL implementation I'm looking for the jobs are you one okay there's that came out we're gonna steal this now this is extremely temporary and I'm actually gonna add temporary should eventually use hazel key codes and we might actually take a look at hazel key code stuff in the next video because that's important it needs to be done as well like an input kind of polling system as well because right now we have an event system but if I want to actually ask the input hey is this key down we can't do that right now so we need to be able to do that okay so Jeff ww3 of course this is also temporary we should not be including gel type III here but as I said this is a hack video this stuff clip or text I think you won't worry about from now and then the other thing way to do is actually once we've done that is initialize this happen jail thing which in it for OpenGL I think there's a different one there yeah reppin jail 3 name I think that's one one and then the version that we want and the world views from now is probably going to be shortened all right cool so hopefully that actually ends up initializing with the correct yellow cell version which is what we want and I pretty sure that should be yet so as far as updating goes and what we want to actually do every frame the important one is of course I'm doing Brenda as well as I think so new frame and also rendered raw data so we need to do new frame I think we do that first followed by an GUI new frame and then we do render and then we also we need to do the rendered raw data and then from there we'll actually get the draw data for mind going okay cool that's it what we will do is I'll just quickly write this static called true this was wait I want to show this demo window with for about a shirt and a my window so we'll show a demo window which shall be kind of just a it's a ninth-grader my window that has everything we might want and then we usually say the delta time as well so we can get that from shelf W I think that returns a double get time yes it does return a double and then we'll set i or delta time so i'm going are what is this I'm giving our I are equals I am going that I are and this will be IR Delta time equals we'll have to keep track about time so it will say m time time - end time otherwise we'll do 1 by 60 so just in case our time is not set yet and then we'll do floats and time equals 0 so the first frame it will just do it'll just do 1 over 60 ok cool anyway that's just a very basically to implementation anyway as I said we'll probably rewrite this that's like lunchtime ok great so that should be everything that we need oh we also need to set the display size now application I think doesn't have a window and what we need is a window I think has a get width get height okay so what we'll do is what we'll return this window here so what we'll do is it's an inline window reference get window reporter turn window just like that and then over here we will because the primary thing that we want to set is the link will display size which just tells I'm going how big our display is so to make that happen we'll need to get our application on there and have that at the moment I thought we did ok so application is on a single sentiment that's kind of an issue so what we want to do is basically have application I'll add s instance here this should be private this should be something that we have because application this is only going to be one application and wherever we are steps out wherever we are in our code base we will probably want to access the application because it has important information so what this will basically do is hold a single turn to our application books which gets set when we construct our application and we should only have one anyway so we could even have set to make sure that you know that we only have one application so we'll just say instance needs to be null application already exists we also have s instance to this so that then wherever we are in our code base such as here we can just say application get and that will kind of give us our application so let's include hazel slash application and application gets get needs to be static okay cool so now that we have this we can into here just put app dock yet window dots get with an app get window don't get high all right cool so there we go anything else about it so we have to do events as well of course but I think that should be that should be pretty much all that we need to actually get this running so I'm interested to see if it'll work because of course it's got a lot of just hacking stuff in so if we go into our sandbox app at the moment we only have our example layer being pushed in but what I'm gonna do is I'm going to into into hazel H I'm just going to add in hazel I'm Gillian go away oh and then in our sandbox app I'm going to be push an overlay which is going to be a lime GUI layout okay so that is for some reason not there Aleya that should be legit oh yeah that's means that hazel I thought we were inside the night space okay cool so now I'm kind of scared but let's hit f5 and see what happens I'm just gonna put a breakpoint maybe here because I want to check out certain things to see if they were set correctly okay so it's not happy with a son we got a linking error because we're missing I'm GUI I'll show you guys because we're missing it seems we're missing the constructor that has no parameters that's a bit weird because is that not it GUI layout we're missing this only how other be missing that oh well I mean we actually forgot to explore tit so what is it Havel API so that's kind of important let's not forget that okay so we have a debugger a board has been called these are the best ones so I'm go he's not happy if I hit retract and see I'm going not happy because we didn't call correct context or anything like that I actually think that maybe that's because yeah when we attach lie is they don't and then I don't actually uh you know cold so layout Oh Natasha is what should happen yeah and in push our way so yes let's try that again okay it's not happy again this time invalid display size value okay cool so I have a feeling let's just look at the call stack quickly to see where this is coming from on update get I oh okay all right okay I think that maybe we should have done that before so before we begin the frame we actually need to set a size so we'll do that like that and actually we'll even do the timing first so we'll need to move this down okay so there we go this place lives have been set 1280 by 720 that's great delts time is 16 milliseconds let's see yeah oh okay okay fantastic so we have I'm doing here we can't move anything with my interact with anything because we have no events but how cool is this we have I'm going rendering inside our window that's pretty awesome okay so the next step would be to set up all of the events now I'm gonna leave this as a bit of an exercise to you guys to see if you guys can figure it out by yourselves we're going to do this in the next video because this videos already like 30 minutes but I will say this if you just reference this in this implementation that shelf W has you can see that what actually happens is if we look at some kind of you know key callback function you can see what actually happens right so what we call this previous call back which is doesn't mat spawn a callback where's that key callback yeah you can see that that's IO stuff since I'm GUI I or we restfulness at certain variables so you know when we press a key it set it sets Keys down with the relevant key to true right or it for modifiers it sets directly whether or not they're pressed right for the mouse position for example there's a mouse button callback which actually this gets done inside a loop I believe yeah so IO mouse down gets set inside the update Mouse position and buttons so if you refer to this I'm GUI in full shelf W file you should be able to get everything set up really easy really easily right so that's kind of an exercise for you guys to see if you can do but otherwise next week of course I will show you guys how I do it and we'll get I'm going fully kind of interactive and working and we'll probably do things like Mouse cursors as well because there's there's quite a lot of stuff in this file that needs to be done and I definitely want to rush it in this video I hope you guys enjoyed this video if you did it hit the like button huge thank you as always to all the patrons that make this series possible if you guys aren't supporting me on patreon deftly check it out there it really does help support the series also you'll get to see the next video right now because it's already up and also also all of this stuff all the some gooey stuff will occurred has already been written in the development branch that you will get access to as well because I've got like much more of hazel actually written there so if you interested in kind of just leaving ahead and you don't want to wait then check out check out patron or compost after dinner hope you guys enjoy this video if you did please hit the like button it's really exciting to see actual stuff on the screen now even though this is a bit of a hack and we'll have to refactor a lot of it in the future the actual layer stuff ending is mostly okay it's the the renderer is a really big thing that we'll need to work on once hazel actually does have its own renderer anyway I'll see you guys next time good bye you [Music]

Channel: The Cherno

Views: 69,360

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: st4lgNI6_F4

Length: 27min 57sec (1677 seconds)

Published: Sun Jan 13 2019