Game Programming - Episode 38 - Procedural Rendering

Key Takeaways

hey what's up guys My Name Is AO welcome to episode 38 of game programming so yesterday I keep saying that as if this show is daily last episode is what I mean you guys know that last episode we took a look at this freaking void tile thing well not not not really this void tile thing but this this problem here solving that array index out of bounds exception where if we go out of the bounds of the map we'll just simply return a voti that's what we did last time and today we're going to take a look at fixing this um procedual generation problem basically it's not really procedural generation more like procedural um rendering but you can see that every time we move we get these black bars basically and it just does not look very good now what this is though is it's like a I don't know I really like this I really do because it it shows very clearly how how this thing is rendering because you can see that basically as as soon as we access a tile further down here it's cutting out a tile here so we're not actually rendering the entire map at once we're just rendering what we see in this little window which is beautiful as you can see we're running at freaking 4,000 frames per second and that's just freaking insane so um that's that's brilliant um then again I do have a supercomputer so you guys probably won't be running that fast but the point is we're still running extremely fast which is awesome so now we need we need to fix this because like from a technical standpoint this looks freaking amazing but from an aesthetical standpoint n not really so we we sort of want to fix that up and make this really smooth now there are a few things we need to do to actually achieve that first of all you'll you see that we've actually got three areas of black barness it's not happening to the vertical it's not happening to this this edge of the screen the top edge of the screen not exactly sure why but well it's just not so let's just roll with that um but yeah it's not happening to the top so we don't need to do anything about that that's beautiful it is happening to the bottom the left and the right so yeah let's think about that so first of all first thing you need to consider is what is happening with each Edge now the two of these edges have something in common and that is the bottom one and the right one and the reason they have something in common the thing that they have in common here is the fact that they are actually like the exceeding like things right so in other words because remember 0 0 the coordinate 0 0 is in the top left corner um in our game all right which means that this is the far right and this is like the far bottom corner this is like zero the the top and left they're both zero but the right one is width and the bottom one is height that is what those edges are equal to um and so to deal with them we'll clearly need to do something about height and width respectively to actually you know fix this fix the right and the bottom corners uh edges rather but for the left side we actually have to do something with well with zero basically we need to do something with zero now it is currently set to zero but you can see the zero just is not low enough and we actually have to go a bit lower we need to go deeper uh but we need to go a bit lower to actually fix this thing so how are we going to do that so let's let's talk about fixing the left side for a minute so to fix that we'll go into our screen. Java class and right over here in render tile that's where all the magic happens so at the moment you can see that we're actually breaking right we're breaking when XA is less than zero and now X is obviously the problematic Zone here because X is our our horizontal and that's where our problem is on the left side um it's when it's less than zero it's breaking now zero does not seem to be low enough so yeah it looks like it's actually offset by an entire tile if we go over here that's basically the size of a tile right it is if you freaking draw that there that's pretty much the size of the tile it might be like two pixels less but point is we'll just assume that that's the size of the size of the tile especially to be safe anyway so to fix that let's just simply you know set it to minus one tile that way so- one tile left so basically we can just set it to- 16 but again to Future proof this thing we can set it uh to- tile. sprite. size because tile. sprite. sizes is 16 remember in this case and we'll just you know basically multiply by -1 to make it -16 and that is it if we actually run this now first of all uh if we run this um you'll see that we crash and the reason we crash obviously is uh actually you know what let's let's debug this for you guys um you can see we've crashed here because XP value is15 so it's obviously going to be an r index out of bounds exception because pixels the index of pix pixels that is trying to look up is actually returning a negative number you can see right here it's -5 that's a problem so in order to fix that we simply need to say all right well don't break in that case if it's negative if if it goes into the negative don't necessarily break let's first of all because what remember what it's doing is it it's it's it's only breaking when it's less than -16 but what if it's -10 for example you know that's that's going to that's kind of passed through this it's not going to break in that case but what it is going to do is throw throw a reex out of bounds exception so what we'll say is all right well if if it is10 for example don't don't really break right cuz we've said it not to break which is good because before it did break let's not break but let's just let's just set it to zero so if XA is less than zero let's just set XA equal to Z and what what that will do is actually say that if it's less than zero well it's is going to make it equal Zer and as you can see that fixes our problem now our left side is beautiful now not what you guys are thinking you guys are thinking oh well that was easy let's do the same thing to X to um this and we'll just you know we'll just we'll just add on 16 to both width and height and that'll be fine no it won't be fine you can't do that can't do it for that all right what we can do however is going into our level class and actually expand this rendering Zone we can't actually do it for this is actually kind of kind of like a a phenomenon or something for some reason we can't actually do the negative stuff to x to the to the to the uh lower corner pins so x0 and y0 but we we can sort of expand the X1 and y1 so it's it's bit interesting but the thing is at the moment we're looking up X scroll plus plus screen width which gives us one basically one full like tile thing right you can see that's exactly like one full one full tile thing but then we sort of cross over here right and you can see that it's sort of off it's it's out by one tile again for both sides so what we can do is simply add on the size of one tile so literally just add on 16 till the end and again what that is going to do is it's going to get the X scroll and Y scroll values and it's going to add on the width and then it's going to add on a further 16 just just to be one tile safe so it's going to just render one more tile and that'll sort of prevent that screen thing now um what we've got here you can see is a perfectly running thing and you can see that we're still running at pretty much the same frame rate this screen recorder sort of mock things up a bit but you can see that we're running about 3,700 frames per second and uh and that's great so we fixed it with minimum performance impact again of course there will be a very very slight performance impact because we are actually rendering one one more tile horizontally and vertically and the other way horizontally as well but you know that's that's the price we pay to make our game look nice um one last thing I'll mention quickly is yeah we've got this issue here where it's 16 and it's not tile it's it's not actually the size of the tile uh there's several ways we're going to fix that um so in other words you can see that over here in our screen class we actually you manag to go to by the size which we can't do here um in our level thing but that's all right um we'll we'll fix that later on when we actually you know change this This Ti method a bit but yeah so anyway that's what we get that's what we get our beautiful result of the game which now looks really nice basically looks freaking amazing it's ready to freaking put in put a pre-alpha version up on a website and get people to download it cuz it's it's pretty damn good um but yeah that is the end of this episode I hope you enjoyed this episode if you did please hit that like button give this video a favorite cuz it was freaking amazing and I will see you guys next time goodbye