Game Programming - Episode 31 - Rendering Corner Pins

Key Takeaways

hey what's up guys My Name Is AO welcome to episode 31 of game programming so on episode 30 last time we took a look at actually um I keep opening the game as if we've changed anything but we haven't um well we have really we've done the most important part and that's the that's like the behind the scenes work um now what we did last time was we basically used this random method in the grass tile class to actually render a tile you know to the screen basically just apply it we haven't actually rendered anything physically to the screen yet but we've we've laid down the the groundwork the framework for it um and that's that's really important now I I know that a lot of you guys are actually wondering you know we haven't actually changed anything in the game for like quite a few episodes um the reason is guys like it this is what this is what game programming looks like like it's not like you write one line code you you know you hit contr s you launch up the game and it's completely different there's like hundreds of lines of codes that get actually get written before you see a visible change in the game um that's that's just the case so I'm sorry if you guys want to see instant changes then maybe this isn't for you but um you know that that's just the way the games are made you know you can't just expect to see a change every every like every method or so it takes takes a lot more than that um especially you know when when we're trying to actually make a game like purposefully not trying to just animate something on the screen um because if you if you were doing that you you'd have you'd have a lot of changes going on but um yeah so this time uh we're actually going to take a look at how the level is going to decide which tiles are going to get rendered so there's a render there's a render class here sry not class method there's a rendom method here in the level class now uh make note of this we're not in the random level class at extend level we are in the parent class we're in the we're in the super class we're in the um we're in the level class all right now over here in this R this random method we're actually going to write code in here um because the way the random levels are going to get random is exactly the same as non-random levels going to get rendered right we just have to get different tiles basically or in in one case we need we need to render we need actually generate the level and but in another case we uh we've already got a level well and we just loading it from a file but the way that the tiles actually get you know drawn on the screen that's not going to change so over here in our render method we're going to start typing some code so how is this going to work um basically think of it this way right we need we need a way to sort of be like all right we're going to start from rendering this tile on the x axis we're going to render all the tiles until we hit the edge of the screen and on the y- AIS we're sort of going to do the same thing we're going to hit all the tiles until we render the the bottom right corner so in other words it's going from the top left to the bottom right corner it's rendering all the tiles in between so we actually need to tell the computer we actually need to tell um you know our software here um which tiles need to get rendered okay and we're sort of going to do that using Corner pins now if you don't know what corner pins are um basically Corner pins are you know pins in the corner they're sort of like coordinates of the of each of the corners so what we need to do here is actually find the the two corners and you know thus we can we can can calculate um which tiles actually need to get rendered because when when when we sort of move our view obviously that changes now in this case it's not really apparent because obviously we just we just got like as many tiles as fit on the screen and then just this void this Blackness around it um but in in a full map you know obviously there'd be different parts of the map so in other words what we're trying to do is kind of create variables create four different variables one for the x value of this one for the yv value of this and one for the x value of this and one for the yv value of this because um and we can actually even if we wanted to we could still combine them them both to create um specific ones but we we sort of need four variables just to Define that okay so um let's just write those variables now so I'm going to call them you know what they're traditionally called and that is like you know x0 then X1 and then y0 and y1 so basically the first x uh variable which is x0 it's going to refer to the the the inmost X so that might be a bit hard to understand so I'll just open the game and show you um x0 is going to refer to and remember we're only dealing with the x axis right now not the y axis so it's like it's like a vertical line that we're dealing with like a vertical if you do maths it's like a vertical ASM toote right think think of it that way a vertical ASM toote is vertical but the equation to it is x equals you know something um not y equals because that would be horizontal um but X um and also get used to me mentioning a lot of math terms because game programming is all about maths um so this vertical line here x0 is going to be legitimately at the zero point now remember it's not always going to be zero it's going to be the the Zer most coordinate U that might be a bit hard to understand but what I mean is it's going to be the the left side of the screen all right so wherever we're up to in the map obviously if I move it this way it's going to change but that this this area right over here um that will be x0 that's sort of where we start rendering X um and yeah so let's just I'll just keep the game the game minimized as I type this whoops all right so what is x0 going to equal x0 is simply going to equal x scroll but it's not just going to equal x scroll it's going to equal x scroll shifted right 4 now you guys might be like what why is it shifted right four now remember shifted right four is the same as divided by 16 so why oh God I just hit control W so it close the tab uh where were we level sorry about that guys I uh there you go so um why are we dividing by 16 so remember 16 16 is the size of our tiles right um and the reason we're dividing it by 16 is because we sort of want to we want to we we sort of want to deal at a pixel level not a not a um what we call not not not a tile level right we want to we want to be dealing with um pixel level if we don't if we don't divide it by 16 what's going to happen is it's going to trade one value as as you know one tile and what's going to happen there is hang on I think it's the other way around I always get confused by this divided by 16 would be making it smaller yeah sorry guys my bad so oh god um sorry this always confuses me um but it's not hard to to to you know to diagnose um the thing is obviously divided by 16 is actually doing like the opposite of what you think it might be doing because of what I think it might be doing uh divided by 16 is actually making less values so in other words we're dividing it into tiles instead of into pixels um so what's happening is uh where is my console uh window sorry guys let me just fix this up new computer got to got to close that conso let's just put it over here and now we can terminate it no it's not running all right so um divided by 16 what that's doing is it's actually splitting up splitting it up into individual Styles now this x scroll variable that's going to be where our player is as as you know players can be halfway through tiles players players aren't being snapped to tiles right they can be in between tiles they can be anywhere because they're dealing with pixel precision as I like to call it now when we render tiles we want to be dealing with tile Precision because we want to know exactly which tile needs to get rendered and which tile is already out of the render um distance I guess you call it obviously this isn't 3D so it's not really render distance but you know what I mean so um in order to in order to actually Define tiles we need to be dealing with tiles as single numbers so in other words this tile right here might be zero this tile right here might be six one two three four five sorry my bad um but yeah anyway these tiles these tiles all have numbers attached to them we we don't want be we don't want to be dealing with pixels because if we didn't divide it by 16 obviously instead of getting like one over here we'd get 16 and it would go 32 you know 32 48 64 and etc etc um until it until it you know gets to gets to the end that's a huge number and we don't want to have to do that because when when we actually retrieve our specific tiles there's no need for us to be dealing with such huge numbers because remember tiles can only be 16 pixels at the well at the moment but the point is tiles are 16 pixels wide so in other words we identify tiles by simply saying this is the tile at coordinate um I don't know 1 comma 2 right that would be right here we don't we don't deal with it by saying that's the tile at at coordinates 16a 36 or 3 32 you know we don't deal with it that way we deal with it the simple way because well it's simple and there's no point in us doing that that's why we divide by 16 so in other words we're jumping from Pixel Precision to tile Precision by dividing our X scroll variable by uh by 16 um and again we are using bitwise Operator just cuz it's a lot faster um now X1 will be like the other side so in other words over here I showed you guys that x0 was the leftmost uh vertical ASM toote I guess and uh this will be the right most vertical ASM toote so as you can imagine what will this be right what will X1 be so X scroll is the is the the you know the leftmost um so then what's the rightmost now the rightmost would obviously be X scroll you know plus the width of this little screen so in other words uh let me just terminate that whoa my screen just flashed um so uh it would simply be right X scroll and plus like the height of our screen uh sorry the width of our screen how do we find out the width of our screen well in this screen class we've conveniently I control clicked on it um in this screen class we've conveniently got a width variable and a high varable which is actually private for some reason so we'll make them public I always start sort of when I'm programming I always start off with making things public sorry said the opposite thing there um I always start off with making things private and then I sort of change them to public cuz um if if if they're not public you know you don't want to confuse yourself by making them public even though you won't be using them in other classes but in this case we are making them public so the screen class we made the width and height variables public note to self um all right so now we can access it so we've we we've conveniently got these these variables here which actually keep track of actually how wide and how high our screen is so what we can do is simply go X scroll plus screen. width right and then of course we need to divide it by oops we need to all also divided by four now obviously the problem here is it's going to actually do this operation first um don't think it will um because I think bitwise operators are actually applied after addition operators I'm not sure why but I think they are but anyway just to be safe we'll just put brackets around this so it does this first and then divides it by 16 thus creating enti precision and again as you know I was talking two episodes ago I think it was about how um what whatever you do in X sort of gets done for why cuz we're dealing into two Dimensions so the same thing right uh y0 is literally going to be the same as that and y1 is going to be the bottom corner or the bottom plane the bottom ASM toote um bottom horizontal ASM toote of our of of our window so it's going to Simply Be y scroll plus screen. height and of course shifted right four so the words divided by 16 and that is it so these these four variables are very important because they Define the render region of our screen all right very very important and you know next time we'll move on to actually setting this this this offset correctly to our screen class and and yeah and we'll we'll get on with this so until then guys thanks for watching please hit the like button if you enjoy the video give it a favorite and I'll see you guys next time goodbye