Let's Make Something in Hazel! // Game Engine series

so guys my name is trying to welcome to another camera angle also the game engine series today I thought that we would do something a little bit different I feel like we've just been who's been making this game engine has been all serious serious serious and I sat down today and I was like do I even want to do this and the answer was last time I was able to show you what the hazel community was able to make check out that video if you haven't already and today what I thought we would do is we will try and make something ourselves and I would show you just a few of the other things that have happened throughout the week as you can see I'm in my cozy jumper yet again and what we're gonna do is dive in and see if we can make something some sort of game some kind of rendering test let's take a look so in all seriousness the first thing that I wanted to show you guys was this little Trello board that I made this is something that will hopefully shed a little bit of light into what is happening with hazel right now stuff that we've planned issues that we know affect the engine all of that kind of stuff to go to it you can simply go to hazel engine comm slash issues and that will actually take you to this Trello board it's public you should be able to see it and you can even leave comments please read this kind of welcome section and a kind of description of what all the labels do but otherwise we just have this little list that I made just then in around five minutes so of course it's gonna I'm gonna keep adding stuff to it and it's going to change probably a lot now one more thing that I actually wanted to add before I start recording this video and totally forgot was if there are issues that you want to report I've got this kind of report section maybe write a comment over here I can make it into like an actual known issue card and stuff like that and if you have also kind of feature requests will say or something like that I'll just write ideas and I'll probably move this over into another list which I'll call I don't know maybe like community or something like that and then you guys can just go nuts and put ideas and stuff that you want to see all of that stuff just under this card here but in general you can see that we're currently working on 2d rendering the cards kind of explain what everything means and I will probably end up adding in more detailed description as well but this is kind of what we're what we're looking at everything else is obviously stuff that I've thought about or considered in one way or another and then texture atlases is kind of the next big feature that were going to be working on in 2d rendering now this point is probably worth saying that the reason why I'm making this little game slash and I don't even know what to call it but the reason why I'm making this thing in hazel today and why I decided to do this was because things like texture Alice is well they require textures we need to have some kind of I want to have something that is actually in hazel as distributed I guess as part of this hazel repository something that we've just put together really quickly that will actually be able to demonstrate all these features and whilst that kind of game that we talked about in a lot in the last episode there was made by the community is great and all I really want to keep that as like a standalone game and that'll be like a project that uses hazel but then as we're developing hazel I also want to have something kind of internal to the engine so hopefully that clears it up a little bit as for what we're going to make let's take a look at what we have right now in hazel what we have is inside the sandbox class we have this kind of demo of using these various things and that's fine I'm actually going to continue writing this stuff right here in the sandbox 2d class because the sandbox 2d class it's a 2d sandbox it's meant for that stuff but the first thing I'm going to do is probably well there's it there's a few ideas that I had just before this video began what I wanted to do was essentially make some kind of tile based like 2d top-down RPG roguelike whatever style environment so we want to probably have like some dirt textures I guess we probably want some way to also define what a level looks like rather than being completely random but I want probably like at least 10 also different textures so that we can eventually put them into a texture Atlas or just test out you know rendering ten different textures inside the batch renderer individually I also want to distress test the renderer in general and I thought what better way to do that than to use some kind of particle system now I wrote a particle system in an hour it's called one our particle system I'll link the video over there in the top right corner if you guys haven't seen that check it out now that was completely standalone to hazel it was just using my OpenGL kind of library so what we're gonna do is we're gonna copy this as best as we can we're going to implement it into the batch renderer and we're gonna see if it can actually handle that so that's the first thing that I want to do let's go ahead and do that and we gonna do it completely live so we do have some randomization here but in general I think the particle system is fairly straightforward let's go ahead and try and just copy it kind of as is and then we'll see if we can just like make it work a little bit better so in sandbox sauce I'm doing this all in sandbox because when the time comes to write a particle system in hazel is going to be very different oops I just tried to paste in the source code into the name of the file that's all good when the time actually comes to write a particle system in hazel it's obviously going to be very different than this little particle system that I wrote in one hour and I probably call a particle system instead of particle sometimes when I'm talking it's difficult to do anything all right so the CBP file we're going to go ahead and grab the entire CPP file now at the moment this kind of just deploys like a whole bunch of particles at the mouse cursor I guess that's a pretty cool way of doing things and I might actually continue to do that so let's include hazel instead of like gel core and all of that stuff we don't need to do things like load shaders we don't really need to do a lot I think we'll do hazel time step obviously on render takes in an orthographic camera sure we'll kind of keep it I don't want to spend today writing some kind of particle system so we will keep it fairly fairly like similar to the original kind of one except for the old all the places where it's different so we use some randomizations and I think yeah we probably want to grab the random class as well because I don't want to bloat the code of you know this too much I'm just going to paste the class into whoops I'm just gonna paste the class right over here into the top of this file will include random and then the we want is like some static stuff I guess we probably should grab that as well shouldn't we because we had that stuff in the original file so I'll just take this stuff and I will paste it over here all right so we have this random now this random class that we can use hazel orthographic camera replaces this stuff now this is us creating like a vertex arrays and various particles like shaders and stuff like that we don't really need any of that so I'm just going to delete that and we don't need this use program really all we need to do on in on render is rendered articles and since we already have a renderer we can just use our existing renderer so you can see that if I copy this stuff this is really what we use to render so let's paste it over here and I'm gonna try and quickly like translate this code that I've haven't actually looked at before today so hopefully won't take too long I should probably stop talking okay so we have a transform oh well we doing one oh yeah we were doing one drop call per particle okay well that that's gonna be different so we don't have a transform anymore but what we do do is we do probably a rotate either a rotated or a non rotated quad depending on the rotation they are different kind of yeah okay so what I'll do is I'll say if particle dot rotation is not zero so if I mean realistically there pretty much all of them are going to be rotated so I probably just skip this if check for every single thing and just draw a rotated quad if it comes out of zero zero is going to be fairly unlikely I think so we're just going to do a draw rotated quad here we're going to want to take in the particle positions which we can just I think we can just give it a 2d position like this particle position then we want a rotation which is going to be this is the size I get cool so the size is just let's say size size I think and then the rotation is Park rotation now this is important because over here I'm clearly giving it the rotation in degrees I think right wait why is it minus 45 oh this was an hour hour test that's right I thought anyway doesn't matter it doesn't matter what I think so particle rotation here that's probably I'm not sure if that's oh well yeah it's in radians so it looks like does our API support radians see this is why it's really nice to just do tests and stuff to make sure that everything's all right because obviously like we I think I've mentioned this before but this should always be in radians because if you want to convert to radians that should be like if you if you want to store degrees then you want that to be like a kind of client based thing you don't want to always force the renderer to have to do conversions for you because that's going to slow things down if you sword in radians to begin with because then you'll have to convert to degrees to give it to the renderer which is going to convert into radians anyway which is silly and we're trying our best here not to be silly so this does rotation yeah it does do Jill I'm right here so this is very bad I know I did that and I know that I probably shouldn't have that's why we had minus 45 there but it's okay we'll convert this we'll make sure we're not doing any kind of conversion here into radians whatsoever so we were doing one over here as well and I'll write a little note in the comment just so that it's super clear that this is like rotations rotation is in radians okay just just as like a little note so that we know that we are in fact dealing with radians and since we did a kind of test rotate roadheader quads here I will actually do a little conversion into radians here just so that we don't break our existing code base so rotation I guess that was in yeah well it was it was always in degrees so now we're converting into radians okay cool that stuff is done now the next thing I want to do is I want to go back to my particle system and so we've got our size we'll put in the particle rotation which is just a particle dot rotation and this is the color so the color we used was particle shader color and that was just a GL n value pointer that was just our color really so I can probably grab that and just stick that in here and I think that's it so we're drawing a rotated quad at the correct position with the right size with the correct rotation and with the correct color so we didn't this this particle system didn't support textures or anything so that's fine if it did it wouldn't really be an issue but basically all of that stuff is gone now the next step is this kind of begin scene and scene so obviously we'll do that for the entire like particle pool so we'll do just this is just camera so you can see it actually integrates kind of nicely with our API here and this is good because you know which one and test out the render a 2d API and it's not bad I guess all right and then in color we had color a times life I don't remember why that was there but it was commented out so guess we'll leave it as is but that's I think that's it so that's now converted you can see it should compile if I hit control seven to just compile the file yep we're good I think yep we're good okay so now if we go back to sandbox 2d let's actually use this particle system so I'll include it we'll do include particle system particle system 2h and then I will just have a little particle system here and now I'm actually going to pop over through my code to see to the one our particle system repository to see how I actually used this so I think it was here right okay we basically predefined a certain particle and it was called M particle so that was obsessed random so that was I think M particle was so we had it was yeah it's probably a particle props thing and then but that's a particle system - what did I actually want to open this is all going wrong here it is sandbox layer so sandbox layer yeah so it had this particle props which was a particle is a properties thing so let's grab that and then we'll come over here and we'll also put that in here so we have a particle as well and then we'll initialize it with just the same stuff here because again I don't want to spend too much time on this and we've already got some code for us so over here and on attach I'm going to you know this is our particle it's pretty clear that it's a particle we don't really need a comment for that and then coming down here I guess what we did was okay so we have and again this even uses hazel like key code so it's super easy to implement so we have so we did particle system on update on render and we had a little bit of input stuff going on in on update that should be fairly easy to replicate so if we go back to here and look at our on update function let's draw our scene first and then after we do end scene and this is kind of like a little scope for that let's come over here and let's do so this will be hazel input is mouse button pressed hazel input get Mouse position so luckily this API is pretty much identical hazel application get window get with that it actually is identical I did base off that OpenGL library Oh hazel obviously so that that helps camera control get bounds that's something that we don't have that's something that I think I had to add during I don't know just during the development of that because we need to know the bounds of our cameras so that we can actually draw the particles or actually emit the particles from the correct space so let's go back into this one our particle system and then we'll go into I guess core source and then let's go to jail core core maybe lots of core everywhere and then where do we have our camera we don't have a camera here let's just type in let's try and search for camera in this repository and we'll see what the where is it okay so it's an util orthographic camera control it that makes sense so if we look at the header file I guess here are our bounds so we have this thing called struct orthographic camera bounds and then we have get bounce which returns bounds okay let's quickly integrate these bounds into our camera because I think in general it's useful to actually know what we're dealing with as far as bounds go and I guess this is something that could be inside the orthographic camera class itself not necessarily the controller class so if we go back out here I mean we did actually have this inside orthographic camera controller but I think that was only because yeah why did we decide to put it in controller maybe maybe we do want to have it in control of them I don't know passed me seems to have made that decision and since we have a controller here I'm gonna leave it here the reason I wasn't sure was because it might actually help to know the bounds of the camera itself but I don't know that might again that might have some performance implications and if we just want a quick and dirty performance camera we don't want to be continually recalculating the balance whereas for a camera controller that would be necessary so like as in not necessary but that probably is permissible so here we have bound here I could see the way I've implemented this is it's very reliant on you know doing extra calculations and stuff so I think we had yeah camera aspect ratio zoom level stuff like that whereas that's what bounds becomes so we're just kind of it's not really a huge deal in terms of performance because we're just we're just changing where we're storing this stuff but you know it might be something that we don't want to have inside our camera class for all cases because again that kind of fact that default like orthographic camera class is just supposed to be a container data which is like the you know the matrix of the camera and stuff like that okay so let's see so bounds yeah bounds needs to always get get updated I probably should just steal this orthographic camera controlled so I think it's better than ours but on mouse scrolled I think that was that so yeah we just update the bounds here I think before we do the cert projection probably yeah and then we set the projection and then it's the same bounds update before we set projection so projection I believe should be based off of the bounds that's probably the whole point of this so if we scroll up a little bit and let me just I'll search for balance here just to make sure we're not missing anything no we're really not so where does it set the projection so we call can our camera set projection and then we do it up based off the balance so yeah my mistake I thought set projection was something in this class let's just set it to that okay cool so what kind of adding in like a little middleman just so that we can retrieve that middleman and then be able to figure out the bounds of the camera really easily when we need to and we need to in certain situations where we for example want to emit particles in camera space so let's kind of take this and well it's not really oh it's not really about camera space it's more about just the fact that remember we want to emit particles from the mouse pointer but the mouse pointer is obviously relative to the window whereas we want to emit the particles into world space so this is going to account for like the camera zoom and everything else which is going to be super important now I'm going to go back to the sandbox 2d class and fix everything up I was gonna say but it looks like everything works so based on this code that I just slapped in does hazel now have a little bit of a particle system we will find out by hitting f5 okay so first step is nothing renders and then also the particles don't render oh I was just zoomed in I need to update the balance probably there okay so our particles do in fact render and you can see they are in camera space if I make this fullscreen and I move around I can just generate these kind of orange particles wherever the mouse cursor is now they're happening behind these which might be fine might not be fine we are always drawing with with depth testing enabled and we are actually using the zetas buffer to figure out positions like this so because of that like again it might be worth rendering particles in this example with depth testing off just so they always render on top as long as we ran it them last but that's just the way it is I guess so what is rendering on top exactly this stuff and why is it rendering on top I think we're rendering with a set of zero which is probably fine realistically I mean what we could do if we wanted to sink it a little bit back you can see that well the first thing I probably want to check is where we rendering these particles so we're just doing position and position does position particle props position so there's no Zed or anything like that here is there if we go back to sandbox 2d let's say the position is zero zero as a 2d position okay so what we could do is realistically if we wanted them to really be in front is we could come over here into the rendering code and then just set their position which is over here to basically be well let's do this we'll do GLM effect three position equals and we'll take the particle position we'll place it without position we'll set it to be there's no easy way I think to do this but dot X dot Y and then we can you know choose to for example bring it forward or whatever so that the Zed is a little bit higher and therefore it should be on top and you can see now if I rerun this the particles are on top so that's just something that we could do if we wanted to actually do this and the cool thing is if you look at the render or 2d stats that we have here we have 405 quads three draw calls but what what happens when I move this around so you can see we're up to like 600 and then obviously as they fade away we go down to 405 so that's basically what's happening we're rendering about 250 or so quads we should be able to massively increase that though and we can do that by first of all making sure that the life is a little bit more than it is here so a lifetime at the MoMA is one second let's make it like five seconds and then also instead of emitting like how many do we do we do five like particular we can do like 50 so ten times more now this probably gonna be a lot of particles let's be honest I did just jam up the life by five times and also the actual you know yep here it is so here experiencing a little bit of framerate here and they don't look like they're lasting very long they're not lasting very long because the particle pool is only a thousand so actually realistically we are only able to render a thousand at a time which is not going to be enough so if we go into particle particle system dot H and we take a look at the particle pool of $9.99 is the size we probably want to add a parameter over here particle system you into 32 T max particles and then this is going to be important because what it's going to do is it's going to when we create this it's going to resize it to the max particles and then we also want to set pull index to be basically max particles minus 1 and then I think everything else should definitely not be dependent on that 1,000 figure and it doesn't look like it is so pool index will set to like a zero that gets set automatically in fact we well I mean we don't need to initialize it here because the constructor is taking care of that obviously and then when we create this so I mean at the moment like we can give it a default value if we want that might be nice so let's set this to like I don't know let's do a hundred thousand so that's a hundred thousand particles so that should be that should be not bad I think we can do a hundred thousand draw calls or rather a hundred thousand particles so yeah this is definitely a lot more and you can see those quads are going up our frame rates going down there's a few things we can do about that we can run this in release mode but realistically I think this is going to be probably bottlenecked by the way this particle system is written because as you can see it just has a particle with a whole bunch of data in it and then it's just got like an array of that so our daughter is extremely fragmented why not you know we're not kind of keeping it all in one place although you can see that in release mode we really don't have a particle we don't really have a problem and you can see they're all kind of here we have a whole bunch of particles I don't know what our performance is it doesn't say but if I just keep doing this you can see we're okay we kind of know 10,000 quads yeah it's kind of hard to draw more than I guess 13,000 quads because that's just the rate at which particles are being generated and then reused in the pool but you can see we do indeed have quite a lot of particles and you know this is felt fairly smooth even with the like terrible use of memory inside our particle system so that is that one more thing I quickly wanted to mention as well as we had this problem where of course we open this and we see nothing and we have to kind of zoom out and then the camera starts working again this is one of those things that is very easy to miss in C++ but you can see that what we're doing here is where it looks like we're initializing the bounds first with the correct data and then we're actually giving it to the camera but what's happening is the camera is being is actually being initialized first with the wrong bounds with the uninitialized bounds and then the bounds are being initialized and that's because if we look at the header file the order in which we've defined them in is like this the camera first then the bounds this is the initialization order not whatever you've put over here so if we simply switch these two so we do the bounds first then the camera if we hit our v we should be absolutely perfect and you can see from the very first frame everything is correct so anyway I hope you guys enjoy this little kind of different type of video I guess what we're gonna do next time and I am gonna make one of these videos like I'm not gonna make you guys wait for another week and we'll just do this again I'm gonna make a video in a few days I think where we're going to actually change this kind of what we have here with the various colors and this checkerboard background we're gonna actually use some real texture assets that people have made willed I'll just find some one line probably or if you guys have some you can post them in the game engine series discord channel I will use them and I'll make some kind of like world and we'll integrate that into hazel and I don't know I think this is a really cool idea with basically making like a little game or at least a scene inside hazel and that's gonna be really cool for both having like a really solid test case that we can actually make sure we use all of Hazel's features so that we can test everything and who knows maybe we'll make this into a fun little community game anyway thank you guys for watching don't forget you can help support the series on patreon patreon Oklahoma or slash the churner is the best way to help support me and this series and all of that stuff you'll get access to the more advanced hazel development branch as I mentioned which is like kind of a 3d version of hazel and it's stuff that I've been live-streaming the development of every single week so definitely check that out if you were interested and I will see you guys next time hopefully hopefully in a couple days and we'll continue making this fun little games slash project we've got here see you next time goodbye [Music]

Channel: The Cherno

Views: 58,748

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, Let's Make Something in Hazel, making something in hazel, making a game, how to make a game, testing hazel, test

Id: q39GnqVhLf8

Length: 25min 9sec (1509 seconds)

Published: Thu Apr 30 2020