Making a GAME in ONE HOUR using MY ENGINE

so I'm making a game engine called hazel and one of the best ways to actually make a game engine to develop and add new features to it is by making a game because if you're not making a game then you're not entirely sure what the next step to making your engine should be do I need this feature - I need that feature instead of arbitrarily just making a game engine which is probably one of the worst ideas in this world by the way for the record instead what you could do is just simply try and make a game and then you'll easily see what features you're missing or features that you would like to actually add to your game mansion to make that game creation a lot easier now hazel is the public branch of hazel as it stands right now is just barely an engine at all if you just go to github right now and you check out what is in the public repository it's barely like a 2d renderer with an event system and like just some kind of basic application run loop and some layers it doesn't have any tools like an editor or anything like that it's very very bare-bones no scripting everything has to be done and C++ all that kind of stuff now I have a development branch that is way more advanced it's got like in 3d renderer and it's got like a tools around it and all that stuff but what I'm gonna do today is attempt to make a game in as little time as possible using the public version of hazel and specifically I'll link the the buid or the commit ID of hazel publicly that I'll be using so that in the future you can look back and see well this is what hazel was like at this point in time for two reasons first of all to prove that even though hazel is extremely bare-bones you can still definitely make a game with it and also to see what on earth we need to add I mean it's pretty clear to me what we need to add like the rest of the engine is barely done at all but in general it should at least give us like a list of actual bullet points if I want this picture I want that feature on etc so now we just need a quick game idea that won't take us too long hang on what's this video making a game in one hour one hour okay so a few days ago this guy called Danny uploaded a video of him making game in unity in one hour it's basically like a little flappy bird clone if he made this in one hour in unity I mean I don't think we're gonna make it in one hour and Hazel I'm gonna try my best here but you know all seriousness I think we should be able to make it in hazel pretty quickly even though Hazel's missing all these features I mean one hour how hard could it be so the first thing I actually want to do is look at this video I'm going to take notes here and see everything that we actually need to do for this game and then I'm gonna start a timer and I'm gonna try and make this same game in my own engine and hazel as fast as possible let's take a look at this video okay so Trello for task handling it's an hour I'm just gonna use pen and paper and in fact like I don't have any time to spend at all on anything other than literally probably writing half of the engine okay well there's our first little problem we can get that rocket sprite into unity hazel handles textures like I mean normally we don't have any kind of physics engine okay so I guess maybe we'll make spacebar control the rocket by just kind of tilting it up and giving it some kind of force there obviously hazel without having any kind of physics engine at all we're just gonna have to add something really basic I think it's probably reasonable to assume that we can just recreate this exact effect by just having like a position and a velocity and then some kind of gravity simulation and then you know pressing and holding space bar just adds to the positive Y velocity that's honestly probably all we need nothing like a wearing a the physics engine for this ha the unity particle system I'll just use the hazel particle system oh wait so our particles is I mean particles is gonna be probably one of the biggest things I think so that well that I've seen so far anyway in this video because to have particles and I mean there's a smoke particles they look pretty simple derp we just have it looks like we have smoke of varying sizes and then it kind of grows over time it rotates we might make a simplified version of that we'll see how far we get and then maybe can tweak it later okay so that's the first kind of example of collision detection that was pretty easy there that was just like you know colliding two rectangles together that's easy to do okay so random map generation that's easy to do triangles don't think hazel can actually draw triangles at the moment and furthermore we also have the additional problem of colliding with triangles doing collision detection between rectangles and triangles is a little bit more involved than between rectangles and rectangles so we're probably gonna have to add some kind of collision detection code to detect collisions between a rectangle and a triangle at this rate I think that we can just well it's just flappy birds so if the ship is at all if any of the vertices of the ship is intersecting inside the triangle if it's inside the triangle we can just use a pretty simple algorithm I think to basically detect each of the four vertices being inside a triangle if it's inside a triangle then that's a collision and we can just set the EMF of so I think that's pretty simple we'll have to add that in there of course we have no collision detection or physics at all and hazel so he's added a bunch of post-processing effects what have I gotten myself into okay so post-processing effects hazel has none of that at all I mean honestly I it looks like what he's got maybe I even know if there's any press processing effects here that I can see I mean okay so he's got the okay the colors dynamically change it looks like it's kind of hard to tell but I think that there might be of ever so subtle gloww on the actual triangle on the level basically it's kind of projecting a little bit like that maybe I can't tell they actually could just be the vignette as if I have to make this harder for myself let's just assume that the triangles are glowing because I think that's kind of cool I mean if that was on in unities probably just done by using like an HDR buffer and adding some blue room we don't have that in hazel at all and whilst I could add that in I think that would be a little bit cheating because I'd have to modify a lot of engine code to make that happen and then also I kind of think that I should just be able to fake it basically by just using a textured triangle that has a bit of glory added to it in Photoshop okay so camera following player displaying the score okay so you I we don't have UI we can probably just fake that with I'm GUI maybe by getting it to draw directly to the screen buffer okay so resetting and stuff okay here we go there we go now there's definitely glow on this I can definitely see Clos happening on the triangles and there's also a bit of a hue shift going on and there's more particles with the flames flames okay so I'm just gonna say two things that we're not gonna do it all or one thing what I couldn't do it all was audio there's just not gonna be any time hazel this is a portfolio at all so he's gonna kind of ignore audio as much as that pains me because I love I love music what I'm gonna do any music and I'm gonna write any music and we're not going to do any audio or sound effects at all because that's just not gonna happen it's just gonna be way too much work and again way too much modifying the engine code to make that happen so that took him an hour [Music] and the games available on Android ok well that's that's cross-platform support also not happening ok so let's summarize we have a basically a flappy bird clone that in itself is pretty easy to make we don't really need to add anything to the engine at all the biggest thing that is important to the core mechanic though cuz physics I mean the physics that he's using is basically not physics at all I mean there is a little bit of like a ragdoll effect when it hits like like a triangle and it's kind of like it's part of the level it's game over it kind of the ship just lies around but we'll just skip that because who cares people are gonna want to play the game again if they lose probably instead of admire the physics I hope so we can kind of skip the physics but we do need some kind of gravity and simulation therefore when we actually interact with the rocket and then collisions the other important thing to the core game mechanic we obviously need to be able to detect a collision between the actual player ship and the level terrain and then if that obviously collides then we need to be able to set the state to game over and blah blah and restart again now everything else in terms of features that hazel does not support everything else is kind of aesthetical don't get me wrong we still gonna do them but the biggest things there are gonna be the particle system and then this kind of bloom effect but the bloom effect is just going to be I'm just going to basically make that texture in Photoshop and then apply that to a textured quad in hazel and then we'll apply like a huge shift effect as well to get that to pulsate different colors like he had as well so that's kind of the plan I think the only other problem I can think of is if we do in fact make the triangle a textured quad then it's gonna be a quad we need to be able to somehow pinpoint the vertices within that quad of the actual triangle like drawing so that we can collide with it that's where we're gonna be the most it's probably gonna be the hardest part that I can think of right now everything else pretty straightforward writing a particle system in like 20 minutes is also gonna be a little bit of a challenge but you know what let's just see what we can do so I'm gonna start a timer and then we're going to basically see how long this actually takes alright so the first thing that we need to do of course is obtain the latest version of hazel I'll have a link to this exact commit this exact good in the description below so that you can check out what version of hazel I started with I'm just gonna clone that into a directory on my computer make sure of course to do a clone recursive so that you obtain all the sub modules as well and now let's just try and build projects and run it so that we can see what our starting point is at this stage hazel just kind of has this little like sandbox of just some textures who we were doing from previous episodes we're just gonna take that strip everything out make our own game layer and that'll kind of be our starting point for this game so the first real thing that I'm going to do is set up my camera so unlike Unity where you can just resize the window and everything will be the best in hazel at the moment everything's kind of done manually so you have to actually catch a resize event and then resize the camera to like the right aspect ratio so that nothing's stretched so I'm setting that up right now so that I don't have to worry about it in the future it's just a simple orthographic camera and I've just arbitrarily chosen my total width to be 20 units okay so with the camera set up I think the next step is going to be decreasing kind of level and player so if we talk about the architecture just a little bit I mean we don't have any kind of entity component system or components or any like that literally we're now to make some kind of play a class to contain all of the data and logic for the actual player because we're gonna have to like do the controls and the collision and you know the assets to do with the player such as the texture which is the rocket ship but then we also are gonna have to have some kind of level container I guess which contains both the player and then all of the actual triangles that make up the terrain because having some kind of class that contains that means we can obviously access that data to do stuff like collision detection as well as render everything we'll have to randomly generate all of that level as well so that'll all come from the level class so in other words game layer will have a level and level will have a player and that's kind of the hierarchy I'm thinking of right now so I'm just putting together those classes now adding a position and a velocity for the player and just a bunch of functions that I'll call from game layer and with that basic skeleton setup it's time to open up Photoshop and take a look at this ship texture looks like a really simple texture maybe like about 16 by 16 I'm just gonna copy it directly in the interest of time and of course trying to replicate I guess what he's made there as well I made mine a tiny bit shorter and of course I added that channel logo in there so that it's legit and now taking a look at that in hazel after removing this weird tiling thing that was in the shader we have our ship now we just need to make sure that we render our pod at the correct aspect ratio because our ship texture is of course not square and there we go let's try and hook in some input here so I'm just making this space bar basically increase the vertical velocity and after some tweaking we have some nice quote unquote physics it was really nice to use I am doing here to help tweak these values and now we run into our first real problem with the engine we need to be able to draw a rotated quad but we can't apply any kind of rotation to the causes that we draw textured or not that's obviously going to be a problem because we want our ship to rotate up and down depending on its vertical velocity so I'm kind of cheating here and quickly adding in another draw quad function which will also apply a rotation to the quad now we have perfect rotor wall that's looks really weird oh yeah that's right we need to convert it to radians and so with a bit more tweaking we have a much better result now tweaking is really gonna be the killer here I think if you continually just spend all of his time tweaking values which is really where the majority at the time to make such a game is probably going to go we're gonna get nowhere so I'm gonna accelerate past this so the next step is gonna be to add in some terrain and I also want to make sure that I have that top and bottom boundary I'm just gonna use quads for now to just make sure that I have that continual generation working obviously I don't want to generate an infinite amount of quads all I want to do here is basically have about five I've chosen and then simply reuse those old ones again once the ship has advanced far enough forward all right and I was looking pretty good now let's replace them with triangles now as mentioned earlier we do want to eventually achieve that glow effect so because of that I'm not gonna add any kind of triangle rendering to hazel I'm actually still gonna render it as a quad but I'm gonna make it a textured quad and for now my texture is just gonna be a simple white triangle but eventually the plan is to add a glow effect to it and after fixing up some bland issues that we encountered as a result of the rendering order our game looks like this if only those triangles were a little bit more random I hear you say well don't worry we're just gonna head over to Stack Overflow and generate some random numbers in C++ I've just written a really basic random class because I know that I'm gonna want to reuse this throughout the game that's another great feature that game engine should have of course is a random number generator anyway after giving it a quick test we're ready to move on just adding some really simple randomization to these triangles gives us a really nice effect here and now it's time for us to work on the thing that I've been putting off the thing that I'm bound to hate most in this entire process and that is the collision detection now what we have here the basic collision ignoring the kind of top and bottom because that's super easy is between a rectangle and a triangle now we don't need to know like which side it collided with or react like in a physically based way or anything like that all we really need to do is just take the rectangle the cord that makes up our player take each vertex and see if any of those vertices are inside any of the triangles on the screen and if they are then that's it there's a collision we can just say collision equals true game over equals true and basically just that that's just it the other thing that makes this especially complicated is that we're not actually rendering triangles we're rendering quads with like a triangle kind of texture with this padding on the outside the reason we're doing that of course is so that we can add in that glow effect eventually now the problem is that we are interested in the actual triangle vertices within that texture so we need to kind of manually look at that actual texture and see how far inward those vertices actually lie so in this case I've just used photoshop and photoshop sulles to measure every vertex there being exactly 10% into the texture so what I can do is just basically manually offset that vertex of every triangle by 0.1 and that's possible of course because every court in Hazel is just one by one unit so an offset of 0.1 translates to 10% so then what I've done here is basically just taking all of those vertices and transform them based on the transformation matrix of the player and all the triangles and then the eye is to just check whether or not any of the player vertices lie within any of the triangles every single frame which might seem really inefficient but to be honest there's only ten total triangles at any given time and the player is only four vertices so it should be absolutely fine and then just to check to make sure that I've done everything correctly I'm just rendering all of the vertices here as red quads okay so now back to Stack Overflow to see if we can find a little algorithm or really just an equation that will help us to turn whether or not a given point is inside a triangle and once we've got that it's just a matter of seeing whether or not any of those player vertices are inside a triangle and then what I'm doing here is just rendering this red quad if there's a collision and that's basically it after adding some basic logic to just reset everything if there is a collision our core game is basically done actually hang on wait a minute we also need to know what the player's score is but that's really just a function of the player's x position let's try and kind of insert this into I am GUI somehow so that we can get our score rendering since we have absolutely no UI in hazel as well as getting the camera to follow the player and now we're truly done here's some amazing gameplay from what we were able to achieve in hazel okay there we go now two seconds an hour two minutes and 58 seconds so right about an hour and that's what I've managed to achieve inside hazel so not much I know but we've got the kind of cool loop the cool game mechanic going the other the other stuff that we actually need to add is mostly just things like particles and the glow effect and the hue shift and stuff that isn't really that important to core gameplay also the gameplay loop and all of that but I think that in general if we just reflect upon this specific hour and where I spent most of that I think that a lot of it was to do with the fact that there is no actual GUI kind of level editor within hazel so everything had to kind of be done through code I had to just play around with numbers a lot and tweak values a lot by actually restarting things I'm doing differently helps with that because I was able to live edit values instead of having to continually recompile the C++ code but in general it would have been way easier if I could just kind of place things around visually the other thing was the collision detection implementing the collision detection was I don't know probably spent like 15 minutes or 20 minutes out of the hour on that that was pretty that was quite huge so anyway that kind of stuff is definitely stuff that I would expect to add to hazel in the future also having maybe like a scripting language would be quite useful instead of just using C++ for everything but of course that is within the plan it just hasn't been done yet so that's it done our two minutes kind of not satisfying though is it I mean he had like glowing triangles and and particles and smoke and fire particles I think it's only gonna be fair if we kind of just screw the one hour and we keep going with this and we see how long it would actually take to add in a bit of a particle system and get those triangles glowing so the first thing that I want to add here is a huge shift effect to all of the triangles now the default texture shader in hazel actually does support color tinting however we have no render a 2d API to do that so I'm just quickly adding that here and you can see that we've managed to turn all of the top triangles red now in order to actually cycle through all of the hues for our triangles we need some kind of HSV to RGB conversion because we still need to actually send an RGB color to the shader so I'm just grabbing one here and now once we've got some kind of color pulsing I want to apply that to the top and bottom with that done the next step is gonna be to add that glow effect to the triangle in Photoshop I'm simply going to go into the blending options and just add an outer glow effect and kind of tweak that until I get it to the point that I'm happy with it and after replacing our original triangle texture with this new glow one from Photoshop we get this effect which is looking pretty good now in Danny's version it looks like maybe he added a light immunity so that was kind of this smooth fall-off basically like a little vignette it's pretty easy for us to add that across everything that gets rendered we can simply calculate the distance from the current pixel in the fragment shader to the center of the screen and then just multiply that in best result with our final output color we can also tweak that a little bit and add a smoother fall-off using a square root all right and now it's the part that you've all been waiting for and that I have basically probably not been waiting for at all and that is the particle system let's quickly write a particle system now honestly speaking a particle system is not particularly challenging to write at all if you know how they work and the basic concept find a particle system it's dead easy now I had a lot of constraints here not just time but also the fact that at the moment hazel has absolutely no batching at all which means that every single quad is rendered as a separate draw call with that kind of system it's extremely limiting how many particles you can have on the screen because your calls are rather expensive I said the pool here the maximum particle pool size to be 1000 in fact that was just that pulled the constant pool size which means that they can never be more than 1000 particles on the screen at one time otherwise they'll simply get reused so we should never go above a thousand draw calls which should be okay for most GPUs I mean honestly I think that I was able to get a pretty good result with not much code of course this is not like the best most efficient way to write a particle system at all for example I'm using an array of structures instead of structure of arrays but that's besides the point I mean come on i wrote a particle system in like half an hour and with our lovely kind of passive smoke particles out of the way let's take a look at those engine flames I went to color picker comb here to just pick some colors that I felt were nice looking and I mean it's hard not to tweak this too much because honestly you could just you could just play around with this like forever so eventually I just had to kind of stop and then the other thing that I did was actually make the particles emit from the ship's engine in the bottom then honestly I'm quite happy with the result and I think this was the most fun thing that I did in this entire game and finally just to polish everything off I wanted to change the UI font to open sans I just got that from github and also add some basic game state and a UI like click to start and that's it here we have the finished game okay so with the game completed let's talk a little bit about what happened and I just realized that I didn't actually continue the timer so nice so that took an hour in 10 minutes roughly it's hard to kind of keep track of it and I did have to go up and get some water and stuff so we'll just we'll say about two and a half hours two hours 10 minutes maybe is how long that whole thing took just in case you're interested so I don't really want to have too much of a debrief here because I mean I just just gone out this for like two and a half hours and I'm really tired but I think it kind of went okay I mean we were able to actually complete the game within it I would say a reasonable time Pierre especially considering we had to like you know write our own particle system I realized I haven't talked too much about all of the code in detail just because of time constraints really I'll have a link in the description below like it github link to all the source code for this version of flappy bird that I've written in case you guys want to check it out if you want to see a more in-depth look kind of like almost line by line at the actual code and how it all works and maybe how I would do it properly and you just want to hear more discussion on that let me know leave a comment below and I might make a video kind of dissecting what I've written here and how both how I think it what hazel should have to improve this but also how I've actually managed to kind of achieve all the stuff that I've done within these kind of two and a half hours they'll also be a link in the description below to Danny's original video where I made the game in one hour using community anyway I'm pretty much done here to be honest oh never again I think it's been super useful to actually take a look at all of this stuff because coming away from this I have a little bit of a more of an understanding as to like the kind of urgent features that hazel actually needs to be in order even to make small games so I'm definitely gonna spend some time probably triaging them and thinking about how we can implement them into the game engine series if you guys are interested in that I do have a game engine series in which I'm developing this hazel engine from scratch episode 1 is literally just the beginning of the project with nothing there at all and the latest episode at the time of me making this video at least is the actual actually hazel of the state that I used it in today to make this game so if you're interested in that definitely check that out I'll have a link in the in the description to the playlist it's just the train home slash engine for short if you guys might help support the game engine series and hazel and all the videos that I make here on this channel check out patreon account for slash the channel will be a link in description and let me know if you want to see more of these kinds of videos I really enjoyed making this I will see you guys next time good bye [Music]

Channel: The Cherno

Views: 308,765

Rating: 4.876267 out of 5

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, Making a GAME in ONE HOUR using MY ENGINE, hazel engine, hazel, how to make a game in an hour, making a game in one hour, one hour game, game jam

Id: qITIvVV6BHk

Length: 25min 51sec (1551 seconds)

Published: Thu Dec 05 2019