Improving our 2D Rendering API | Game Engine series

hey what's up guys my name is trying to welcome back to my game engine series so last time we took a look at instrumentation and in fact we've kind of had this profiling series that we've been taking a look at check it out if you haven't already it's really interesting stuff even if you think that it's not necessary to take a look at that now you're not interested in it at all believe me you will be at some point because there's gonna come a point if your application if anything a building gets large enough where you're actually gonna want to take a look at it and see what it is is slowing it down and have more of like a holistic view of your applications even doing I want to take a break from that kind of stuff right now because again as I mentioned it's not something that we necessarily need to actually be looking at right now it's it's very important to have that system set up because it'll be really vital in the future but when are at the stage where we have to actually diagnose issues with performance in our engine whatsoever what I do want to do instead is take a look at a few little clean up things that we can do in preparation for taking kind of the next step with this engine but also just because the last video that I made I actually made a game in one hour using hazel definitely check out that video if you guys happen because it's really super interesting to take a look at what Hazel's kind of capable of and also this is the first time I have sat down and decided okay I'm gonna sit down I'm gonna make an entire game start to finish as quickly as possible using this engine and other people from the community have actually made little games like I know someone made like the game of life or some kind of little test like that it's a long it kind of the discord if you're guys not part of the discord I'll leave a link in the description below that is called it's just like a community where people talk about all sorts of things including hazel and you know share things that they've made and suggestions and all of that stuff it's a really cool community definitely check it out but um I sat down I made a game and I realized that well it's not like I didn't see this coming but I realized that okay there's a lot of things and hazel needs and there's a lot of current things in hazel that can be improved I'm gonna make a video pretty soon about actually taking a look at like that game that I made and dissecting it and in that video also probably make like some kind of list that just shows what I think we need to do with all major features as well as kind of little adjustments that I think will kind of go a long way as well as like you know adding cross-platform support and all these other kind of fixes are exhilarating things I like to call them because they're not central to core functionality it's more like just across the board making the end product the game a little bit more shippable and a little bit more polished as well as the experience with hazel a little bit better basically but anyway check out that video I'll have it linked over there it's really cool fun video to check out and today we're just gonna take a look at some of the minor things that I want to make but these are directly things that I've said in that video or I'm like hey you know what I have to change this or I have to actually go into Hazel's code and modify Hazel's code to make it work that's not good because in that video I did have to actually go into the hazel project and modify specifically that render a 2d file and the actual default shader as well because it just wasn't it wasn't it wasn't doing what I needed it to do so we definitely need to fix that stuff the first one I give a huge thank you to all the patrons that made this series possible patreon home force - the churner is the best place to help support this series and everything that I do here on YouTube there's actually a behind-the-scenes video that I've just released this week on that other video that I made so that stuff's it is available to patrons as well as access to the developing branch of hazel and other kind of source projects that I work on definitely check that out and huge thank you of course to everyone who supported this to make this possible sir let's dive in take a look at a few different things and a few little issues and we'll kind of just fix them up okay so the first issue comes from us actually launching this this is great everything's fine here but obviously this texture the texture that we're looking at that checkerboard texture is not actually the texture that we're trying to render if we look at the checkerboard texture you can see that it's this big right it's as clearly does not have like a billion like cells it's got 8x8 cells and that's what the texture looks like whereas if we open hazel its tiling it a lot which is fine that was to demonstrate I guess tiling but unfortunately that car literally lives inside the shader here it is it's this ten is this it's us multiplying our texture coordinates by ten meaning that now our quad is between zero and ten in the X&Y texture coordinate' instead of zero and one and that's why we get that effect because we have repeat we're repeating our texture past it's balanced now this also has to do with the texture filtering setting well no specifically the filtering settings but the actually turn to remember what the coals we'll just take a look the the wrapping settings right so I'll wrap at the moment is hot carded to be GL repeat that's not the only rapid we have there's also you know GL clamshell clamp to edge I think clam and clamped ever the same does clamp to border and clamp to edge but I think clamp is just climb to edge anyway um in fact maybe we can take a look here in our clamp has its own ID anyway clamp a clamp to edge with only resource we can use clamp here but basically if we were to change this to clamp to edge for example we'd get a very different effect from our shader because now if the text recording is opposed to an amount actually I'm just speaking rubbish on this is if we're creating the texture using not a file so let's just put that clamp to edge into the function that loads the - profile you can see we got something very different because it takes that last pixel and just repeats it instead of actually repeating the ties texture like we saw before basically just like using a modulus operator and looping through those pixels so this is something that needs to be taken in as parameters as some kind of texture properties and we are gonna do that eventually but will still leave this as a repeat for now because I think repeats slightly more useful them clamp is just a default kind of mode and then what we're actually gonna do is go back into this shader and we're gonna modify it to actually still have this property because we don't want to change the functionality I don't want to get rid of it and then suddenly be faced with something like this where it's just like this is not the result I want and I also don't want to make a huge texture with really kind of you know I mean that's gonna be a quite a high resolution texture and it's completely unnecessary because here all I want to do is actually tile everything so what I'm gonna do is add a new uniform called it's going to be like tiling faster anything like that and then what this is gonna be I don't even know like tile multiply or tile tiling fax I don't know what it would name that this is I actually think that I will bullet while in fact sir I kind of liked that and then this what this is gonna be it's just a uniform that we multiply without extra coordinates like that I don't know why I did em underscore and then this is something that will enable us to it'll just be set to one by default by our end Ridge PD and it's super easy to add these uniforms by the way you can see that what I'm doing here is basically you know inside a drill quad for example when I'm drawing anything like that if I just want to set that I can easily just say you know and start at extra shader set floor and then you know you tiling factor and then we know we'll just set that to 1 by default and then that's kind of it right really easier to have this done this way which is cool set flow doesn't exist okay ignore me saying this was easy because this is hazel nothing apparently seems to be easy but we'll just quickly add that in we are going to eventually transition to uniform buffers and have more of an API agnostic way of doing things that's definitely coming but while that doesn't exist I don't want to make the engine completely unusable so I'm gonna add all of these kind of functions here even though it kind of pains me to do so so we'll add in the cette Fleur yeah said as pure virtual here in the base class and then we will just implement it and we'll basically copy everything from here and this will be upload uniform Floyd okay that's done right so now going back to renderer 2d which is over here we can just have that flow in that tiling factor has been set now we need to remember to set that everywhere we actually want the time factor obviously instead of setting it to one for example if we're doing a crab rendering a color you we like we could not care less what it is because it's not gonna be a it's not gonna be a factor at all because obviously what we do if we render a color is we bind the white texture and that's just a that's a one-by-one texture so tiling is not gonna have any effect on that whatsoever but for the other ones that does matter so you could argue that like there's no reason to set tiling factor and I guess like if you really want it to be optimal here then wouldn't set this uniform at all it's a waste of time however in reality when we do the full uniform buffer upload which is what we'll have to do for this stuff in the future it's not gonna matter if one float is one value or another so I'll leave this in here is almost like a little guide to us telling us what uniforms were using and then you know I mean I promise you we won't see a performance difference if we remove this anyway okay so we have these two paths that's great let's test this out the other problem though is that like I want a tiling factor right we don't need to add this to this API there's clearly not gonna be Italian factor for remembering colors but if I do add something like a you know floor tiling factor equals to one point zero if like that so it's a default parabola everything's nice um it's still kind of making this a little bit like congested right so we want to draw a record but suddenly we have a billion parameters like that's not something that I really want we could have a lot of overloads what we just have like you know kind of like what we have here with this vector two with respect to in vector E right so we're kind of splitting it up making it support bars and that's really nice but you know on the other hand I want to have a billion draw port function so what I sometimes like to do and what I actually did in that video where I did make that game in an hour with the particle system specifically is I made a function called like particle properties or something like that so like a struct called particle properties and then that had like what like 20 parameters ten parameters in it that you could control and then what I did was I just passed that struct in and that structure just have default values and everything like that it's got a runtime cost to have a struct instead of like a bunch of you know just parameters I guess for a function and in that way it's just one parameter you pass me one parameter and that's it not only that but that stroggs can be created by a class as like a member variables set up once and then you can only change parts of it that you care about changing so it's almost like a template right now like I say bossboss template but like an actual template and you just kind of pass in that template we're just modifying the areas that you want to make you need to that specific particle such as its starting position its emission position and then you just you provide that struct to the to the actual like mmm in that case particle system in this case trial court function and it has all the data it needs anyway so that's something that I will consider for the future probably not instead of this stuff but just in addition to this stuff because sometimes you know like for example I you know I have this letter say how I play a character I want to render it right it's always gonna have a constant color or a constant texture it's gonna always have a constant I'll in fact a constant size the thing that is variable is position so why do I have to set all those properties every single time that I want to you know call this draw quad function it'll be easier in that case to have like a quote properties or quad whatever what variables board settings not settings I had a different word but anyway quad properties right to have that kind of structure that has everything filled out and then we just changed the part that we care about changing again definitely a viable thing to do I do that often but I didn't do this yeah yet in this case so now that we have the tiling factor we can pass that in here instead now if we launch this we should see absolutely no difference it would expect to see a difference at all because you know we've added a default parameter and we've also set it to one in most cases yeah we don't have anything here at all but if I do go into sandbox 2d and what we actually draw our checkerboard texture which we draw last here what I can do is at a time factor of ten as we had before and that's basically saying tile that checkerboard texture ten times over right in both horizontally and vertically and then we kind of have our familiar result yes that's the first step that I want to make that's one of the first things in that video where I didn't make the game now I keep saying what that be if I say that video you guys know what I'm talking about anyway in that video that was one of the first things that I did I had to actually go into the texture shader and be like why is my player 2 extra being tiled ten times over right not something you want to do when you have an out of menu game engine should just have that immediately it's like taken care of so but by adding this parameter by adding this actual like my guest parameter that we can modify when we actually draw a textured quad we still have that ability to actually tile that texture without you know completely changing our shader or having to do something custom in the client-side rendering code okay onwards so the other thing that was really important in a kind of a big deal was the fact that I could not rotate my ship at all my player ship I had to do also going to the renderer to D it actually add a rotation so we don't have that so we have it seems a good place to add up between position size and then rotation right so flow of rotation and then we should support attention for everything I can't make it a default parameter because it's before like this stuff which makes me question again you know whether or not we want to actually have this anywhere whatsoever this is totally something that you can do but you should also probably you could also take into consideration the fact that a rotated quad might be something completely different for you and your renderer then something that is like access aligned right and because of that instead of adding a flow rotation here another viable thing to do is that a completely different function that's called something like draw rotated quad right instead of just again adding and adding an overload so draw rotated quad for example is specifically saying that I want this quad to be rotated that means I'm ready to accept an additional matrix matrix multiplication I guess and add construction all right that's like a mixture because because it is an extra cost to say that I can rotating this right like we have our transform here and you can see the transform which I definitely will represent like this from now on so you can see everything the transform at the moment is just simply a translation and scale but what we're saying if we want a rotation it was always saying we're going to add in a GLM rotate you know we're constructing this matrix here there's the rotation matrix and then we're having to multiply that with like the translation and the scale which is an extra it's an extra matrix multiplied it's an extra mint it's an extra matrix generation and a rotation matrix is not easy to generate I mean look at this right we have quite a lot of maths going on here including cosine and sine so got trigonometry we've got bunch of multiplications and you know additions subtractions there's quite a lot of stuff to construct here it's not as simple as say a projection matrix or a you know a translation matrix which is you know dead simple I mean or a scale matrix let's take a look at this so translate that's the whole translation matrix and scale you know that's this is the whole scale matrix nothing basically to do what so but a rotation is like a big deal as you can see might not be something you want to incur every time you render and access the land quad so because of that what we're actually gonna do is separate it out that way and make this like specifically that's that draw rotated quad which will have like a rotation because I don't think it's that often that we necessarily want rotated quads you know like in a lot of scenarios you would never really rotate something like your animation within that chord might have certain rotations associated with it but usually like usually I don't want to say usually just because you could I can't think of everything you could possibly make with hazel right now while I'm sitting here making this video but as far as I can tell this there's usually quite that there's a lot of scenarios in which you don't care about rotation whatsoever but just not something you want ever and for that I also want to provide like a fast card pause for that specific scenario since Edie is quite and a frequent thing to want okay so this is going to be the color version of that and then I also want to have a non colors of a texture version of that which we will also have a tiling factor for that because we might as well okay so now we have this specifically here again this is like a back to version whether or not we want to effect three version is again no kind of up to you I guess I guess I will do that just for completion you can see that we you know designing like an API and this by the way she got a copy of this designing an API that can handle anything is quite a lot of work specifically with just you know minor changes I guess here and there let's go ahead and try and implement all of these methods at once but you know the the payoff obviously is the fact that you know you can kind of basically give it any kind of data you want the other thing that is difficult or with this is to make sure that you're not actually accidentally introducing errors because it's very easy to make this API is so extensive that people aren't gonna know what to do and sometimes they might actually use the wrong thing and that can be obviously quite dangerous so that's just something to consider okay so I'm filling these things in this is the texture and tiling factor version especially if you don't have like a testing like that sandbox or some kind of unit test that actually tests all these functions make sure you haven't accidentally forgotten something when you've done it like incorrectly so yeah it can definitely kind of end up being rather hard to do okay so draw quad again I'll copy this and so what this is gonna have is this isn't the time this is the point where we don't care about time factor so I probably should have copied the other one let's put this into the texture version this is the untextured version just the color version so we'll grab that and paste that into here so tiling factor we'll leave it one here we're binding our white texture and I am going to just pop you this and paste it and this is going to become our GLM rotate and then we will rotate this is a 2d renderer so we can just rotate in the z-axis and then so German I think it's fair to say that it should already be in radians at this point we don't want to incur that cost always in the city renderer of having to convert between radians and not especially if someone's willing someone so if someone wants to to do their rotation in radians for whatever reason maybe it's coming from a camera or it's already in radians obviously you have to give back to degrees and to pass it into this function which will then convert into radians it's just a waste of waste of everyone's time so we'll just we'll have it and assuming the rotation is already in radians basically which you could annotate as part of the comment or as part of the actual variable name but I'm not gonna bother doing that because I think that should be obvious okay so there we go I think that's it really all we've done is we've got a rotation I think that should be okay let's test this out obviously what I'll do is I will well let's just try and rotate this checkerboard textures a little drawer a rotated quad and then after the sighs I'll just say GLM radians and we'll just rotate at 45 degrees that should be pretty easy to actually see so let's take a look at that okay cool clearly at a 45 degree angle here looking pretty good and then I guess we'll try a colored quad as well that will rotate so maybe let's take the red one which is this one and let's just try and rotate that negative 45 degrees there we go so that should be now Rose headed the other way and I mean I mean I'm saying the other way but since there's no texture on it and doesn't matter if we rotate it negative 45 degrees or positive positive 40 or 45 degrees okay so we're pretty much in line here cool looking good sir we can now drew rotation and rotated quads which is nice I might leave this red quad rotated but I will maybe a reset this to just be dropped like so I mean I quite like this API of like specifically explicitly having to write whether or not something is rotated I think that's pretty good because it just you know it forces you to use the right function if you don't want rotation and all that stuff just because it is like we know it's more expensive to do a rotated quite even though it's not that much more expensive so yeah it just really makes you think and finally the last thing that I want to address is this kind of hue shift effect that I had to do for that game in that video and that was to do with us being able to actually multiply a color to tint our texture now to do that we need to actually we've already got that set up in the shader we just have no API exposing it so we really need to add something called a tint color that will actually be able to ten everything is again if you're just drawing like a simple like non textured quad or anything it's that is just the color of the quad it's easy to do it but if it's specifically something that is 10 that is textured like our checkerboard background that needs to actually have an API exposed to tint it with a certain color so let's go ahead and do that again we come to the the kind of the problem here of we have so much of these functions and we've already got four parameters do we just add another default parameter we make like draw tinted quad what are we going to actually do so I don't think there's a correct solution for this I mean we've got Italian factor for a texture which you could also argue should be maybe texture properties which you can also pass in here and then maybe tint should also be a texture property what I'm gonna do for now though is literally just add it as a kind of parameter maybe that we have at the end we've decided to add tiling factor as you know a quad that's not tiled maybe this was something that we should have added as like a draw tiled quad and then a draw tinted chord instead of doing that we just had draw cord with texture and a tint color again whether or not we want to kind of do anything like that it's it's hard to decide and so right now I'll probably choose just one of these possibilities and then as someone makes a game or as I make a game or as I just you know time passes and I realized that actually probably would have been better to do it this way I'll probably change it so just being honest with you guys I'm not gonna sit here and say okay this is the final hazel API this is clearly in development will probably change a lot of these things for now I'm just gonna just chuck it in the ended drawer Quadra so that we at least support that specific code pod so at the end of draw pod I'll just add EMEA Const ll be back for tint color and then we'll set it equal to GL m at 41.0 F okay so we have it default being one here and then I'll grab this and I'll chuck it into the and we have to add this for right for rotate quads as well by the way so maybe I'll do that now I'll just grab this and add that here because this has to this has to be available for all textured quads so drawer ahead quad that's the non-test that here is the texture version so we'll just carry that comment and put it in here as a tint color which which is what you color will be so 10 color is becoming that and then over here as well we'll add this in so tiling factor at the end of that we're just adding the tint color we have to remember to add it into the other spot here by the way you can enter color although I didn't forget okay and then over here instead of 1.0 we add in our tint color okay cool so to test that out back in sandbox 2d or we need to do is for our our draw quad here we'll just try and tip that a certain color maybe like a kind of and remember anything closer to one is gonna will tend to kind of read and it because the 1 means no change right so this isn't like it's being added in as a 10 it's it's really just being subtracted here in a way so like if we leave the red Channel at 1 but then we set the green and blue channels to 0.9 then we're actually subtracting green and blue and then wet we're kind of keeping read at the same mouth it's almost like we're adding red but really we're subtracting the other channel so let's take a look at that and then we'll try the road headed version I guess as well just to make sure yeah okay so we can see we have an ever so slight red tint here and then again I'll just change this control rotated quad all out in some kind of rotation just to make it super obvious we'll try maybe 90 degrees which should be no rotation maybe it will do something like 80 degrees so it's quite slide and then that should also be tinted red as you would expect and it is okay cool so there we go that's kind of the tinting in effect which was important for the game because I needed to have kind of a huge shift affect my kasha to draw a triangle that was like a texture instead of an actual triangle because hazel control triangles but also because I needed to have like a glow effect which we can't do without processing anyway alright I hope you guys enjoyed this video if you did please hit that like button don't forget to help support the series on this channel on patreon because your support is what makes stuff possible and I'm really happy to say that I'm able to do this because of the lovely people who do help support this so thank you so much for that next time I think what we'll do before next time probably is I will make that kind of looking back video a retrospective kind of debrief video of taking a look at that game that I did make in an hour and then we'll kind of make a list of what we need to do and I think the first kind of step to do specifically in hazel is gonna be to try and add in all those engine features perhaps to make that game a lot easier to make it's really good to kind of set a goal and then work towards it which is kind of how I like to work and how I think we should progress here obviously I want to you know continue on with you rendering and adding stuff like batch rendering font rendering post-processing even all that stuff but again with having that kind of game that I did make which is like a popular clone you know with having data is like our end goal almost four to eight game I know it's a very simple 2-d game it's just made like in and out or so obviously it's simple but having that is kind of like an end goal and then being able to add all the energy features to support more unity like approach I guess to making that game is kind of what we're aiming for right now and then I'll probably eventually have like a planning triage and kind of goal-setting episodes loss but we can clearly define what we're gonna do next year anyway hope you guys enjoy this video and I will see you next time goodbye [Music]

Channel: The Cherno

Views: 19,126

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

Length: 27min 14sec (1634 seconds)

Published: Thu Dec 12 2019