Game Programming - Episode 16 - The Map

Key Takeaways

Hey, what's up guys? My name is Aerno. Welcome to episode 16 of game programming in uh no just just game programming really. Um so yesterday we created this awesome uh just amazing little uh tile map thing and today we're sort of going to explore the entire map of our little creation here. Um so yeah, we're going to totally um move around this map sort of. Okay, sort of. We're not going to add key inputs just yet. I want to save that for for a later episode and really explain that. But today I'm going to talk about actually, you know, navigating around this map and seeing if every like seeing if our like walking, I guess animations, you know, all of that like actual the map moving and that animation to see if that really um really works as it's, you know, intended to work. So um so yeah. So um let's let's just jump into this right now. So what we've got right is is um I guess we've got like um the thing is guys with um with game programming and girls by the way uh with with game programming um or with with any kind of programming you know everything is logical and that that's why I think personally it's it's not hard to teach first of all but second of all it's really easy to learn if you really put your mind to it and the thing the way that you put your mind to it is you keep track of every variable manually and you say okay y variable what happens to the what happens to the y variable um you know what what maths is applied to it and and you guys can sort of use that to to your advantage and actually figure out, you know, okay, this happens to the y variable and and I I totally get why it gets why it gets displayed the way it gets uh displayed and um so yeah, so a lot of this is really you just just spending spending a bit of time with the code, you know, just taking it out for dinner and uh get getting to know um all these variables and actually just just memorizing them really and um figuring out what they do. Um, so what I'm going to do here is walk you through how this rendering system works first of all so that we can know how we need to manipulate it or move it basically. So what our goal for this episode really is to just animate the map going forward. And we want to actually loop the map as well. Okay, that's just going to be our goal. Um, so for now, let's just talk about this rendering system real quick. I don't have a I don't have a heap of time today, but um I'll try I'll try to fit in as much stuff as I can. Okay, so um yeah, let's just jump into it. So again, we've got nested for loops here. And what we've got is is the area that's getting rendered. We know that first of all, this y this y thing, we can see it's less than height. Height is equal to 300. So clearly we're dealing with pixels here. It's just rendering uh pixels on the screen and being like, okay, well, let's render the appropriate colored pixels by dividing um the tile things by the size of the tile, which is 16. And that's that's fine. But what if we actually want to move Okay, we don't really need to move the rendering area, do we? What we should be doing really is moving the tile index, right? Because the tile index pointer, the place that we point to in our tile index sort of shifts a little bit. Now, it doesn't shift by one tile cuz otherwise we can only move from tile to tile. And I don't know, that's if you guys want to do that, that's fine. But, um, you know, you'll only be able to be in the middle. Your player will only be able to be in the middle of each tile. And when you move when you just tap the the right uh arrow or something or or the what is it the W K you'll just immediately shift to the next tile to your right. Um we sort of want like smooth scrolling right. So we don't just just display like each tile as it is. We we can sort of move like halfway through tiles and well you know what I mean. You'll see. So clearly we need to move this we need to change this X variable itself and this Y variable itself to actually to actually move it. So, the first thing I'm going to do is actually create another variable. I'm just going to call it y. And the reason I'm making this, and I'll just set that equal to y. As simple as that. The reason I'm making this is because we don't really want to change this y variable because if we do, we'll get problems cuz as you can see, this for loop is running based on the value of this y variable. So, make sure you um just create it. I'm going to copy and paste this honestly. And actually, you you want to do this before the breaking point. Okay. And actually, while we're at it, we'll just change uh this to xx and this to x, right? And we'll change this to y. So, we're dealing with y here. Whoops, not here. Just here, right? And change these to xx. And over here, we'll change this to xx and y as well. Um, we could probably do this in pixels as well, but I'm just going to do it here for now. So, what's going to happen is, um, if we run this, first of all, we should just get the exact same result. And we do, that's great. But what happens is if I change this uh just by a little bit. Um so I change xx to x uh plus like 20. What we should get is look at that. We get a shift and we actually get positive shift. So if I move this to minus 20 then oh I closed it. Whoop that didn't work. Oh yeah my bad. So plus one will be one tile offseted. Should be actually. Let me just see this on my other screen. No, no, it's doing it correctly. Obviously, it's not doing the X correctly because we get zero and it breaks. But um what we get here, as you can see, is if I actually just add like uh one tile to it, which is 16, you'll see that it's actually offseted one tile to to the uh to the left, which is awesome. Now, this isn't exactly how it's going to work. And the reason is it's it's sort of a problem with um with the actual tile index. So, what we need to do is the tile index, I guess. Hm. Let's get rid of this and actually just replace these with our appropriate variables and see what we get. So if I just add something like two to this, what we should get and you can see that offset right there now. Okay. So like one of the things we need to do at this point is um is actually let's just let's just try this for a second. We we get this whole operation here. Let's just try and um let's just try and loop it. And you'll see what you'll see what this means in one second once I explain it. Whoops. What we actually do for the time being is stop it from breaking. So if I do do something like minus 20, you'll see that it actually um stays that way. And let me just Whoops. Make sure you're using XX and Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y. All right. What I'm What I'm doing here is um and you guys can't see this. I've sort of got a bit of a mess going on in the background, but what I'm doing here is um you can see that this is like the original position of our X variable. And as I move it either to the left or to the right, it's actually looping the screen. Um, and you guys might be wondering how that's happening. And kind of simple. Now, if we bring back here, what's going to happen is, um, we'll actually get breaks. And the reason we're getting breaks is sort of because the area that we're deciding not to render isn't really, um, in the uh, in the correct in the uh, in the correct area. So, it's not exactly working correctly. But if we're not breaking, you'll see that we are actually rendering the entire screen. So, we'll fix the uh the whole like breaking later. But, uh for now, um this is how it's going to roll. So, what does this Let me just uh not show the console. Okay. So, what is this whole like bitwise operator here? This is a bitwise and operator. I'm not going to get too deep into this, but essentially what's happening is it's saying that when this right over here, which is xx, the xx variable divided by 16, when this actually becomes greater than 63 or well technically 64 because remember this is from 0 to 63 which is 64 values and all. When this becomes bigger than the number 63, it returns back to zero. So, in other words, what we're saying is if we're trying to access tile number 64, because remember we've got an array here that is 64 tiles wide, which means from um from 0 to 63 tiles wide. When it gets to the 64th tile, we'd get an array index out of bounds exception, right? Because well, we're out of bounds. Or actually, technically, what would happen is it go down to the second row. But what I mean is if we try and exceed our width, there's nothing there. What this is saying is that when you get to the 64th tile, just return back to zero. Display the tile that is at index, you know, x= 0. Simple as that. So, what you can see is if I if I really emphasize this by making the map a lot smaller. Let's just say 8 by 8 pixels. Uh 8 by8 tiles. I keep saying pixel. I mean tiles. Um um sorry about this crash. Let's just make sure that we're uh we change this to 8 by8 as well. And I think we terminated it. Yes, we did. Um, what is up with this? All right. Make sure this is also seven. And this is also seven. H. What else have we missed? See, this is what you don't want. You don't want to be a you you don't want to change like one value and have all these crashes everywhere. So, that's uh not not good. What that means is that um you haven't really coded everything correctly. So we've got time 64 here for example. It should be times 8. Easy to overlook but um it does make our program crash. So let's uh hopefully this will work. Yeah. Now you can see that we've sort of got this recurring pattern. And the reason is it's displaying this is like this is like uh sorry. Let me just set this back to uh to zero so you guys can see exactly what's going on. What we've got here is like a pattern. And I'll try and find a good one. You know what? I'm just going to make um tiles zero equal um black just so that we have a black in the top left corner. All right. So you can see we've got this black tile in the top left corner and you can see that this pattern is repeating. The reason is that again we've made the map 8 by 8. All right. But what we've done here is we've said again with this bitwise operator we've said that when we actually get to 8 set it back to zero. So, what's happening is it's going, okay, this tile number 0 1 2 3 4 5 6 7. Okay, we've done 0 to 7. Now, the eighth tile we're going to set back to zero. So, you can see this the same as this tile. And uh that's sort of how we're doing it. You can see that the same thing is happening with Y. It's gone down to down to here and then it's going to keep going and it's just going to keep looping forever. Now, if we didn't do that, okay, if we didn't do that, first of all, what we get is an array is an array index out of bounds exception. If I just wipe that out, what's going to happen is we're going to get an array index out of bounds exception cuz again it's trying to access that eighth tile which just is not there. Um, so that's sort of a bit how tiles really are going to work and we'll actually have to implement a system to make sure that they don't work. And by implementing that system, we've sort of got a problem. Um, because if we just wipe this out, uh, it'll work for the time being. It won't even work for the time being. Um, yeah, it's not going to work for the time being because the problems with the tiles, not with the actual pixels. The pixels are still on the screen. So, um, yeah, I mean, that's that's sort of how, um, map looping, I guess, works and how how our map works. So, what I can do right now is I'm just going to put I'm just going to I'm really running out of time here, guys, but if I just put, um, something like int x offset and int y offset in the parameters here so that I can then um, adjust that outside of the code. Go back into game and change this to something like 0 0. I'll actually just quickly make two integers X and Y. Really failing here. X. Set them both equal to zero as well. This is probably temporary as well. Don't need to write this down. This is just for demonstration purposes. Um, and in the update, I just make X++ and Y++. Then what you'll see here is my bad. Let's go back into the screen and quickly add x + x offset y + y offset. What we'll get is we're actually sort of traveling through this map at around about 2,000 frames per second. Bit less. Uh no, it's 2,000 frames per second. And you can see that we're um we're actually just traveling. The screen recorder might make this look a bit laggy. It's shouldn't be. Um what's happening is we're traveling through this map and we're never just running out of it. it it's infinite because it's just playing the same tiles over and over again. So, that's sort of how map looping works. We probably won't be actually using this in um in our actual thing. Let's just cut the Y and just have horizontal movement. Um this uh this won't really be implemented in um this actually. Hang on. Okay, first of all, let's fix this problem real quick that we've got the thing where if we change the map size, the whole thing crashes basically. So, public final int um I don't know map size we'll just set it to eight for now again we'll change this in a second but what what should happen is as I set this and we'll also actually make another one really quickly called map size mask and this will be our map size minus one so in other words for for all bit operations because the mask is obviously from 0 to 7 which in total is eight values um so Yeah, the map size. Let's just copy that. Paste into here. Um, and then this will be our map size mask. Oops. Make sure you put into the right place. And I think that's it. No. Map size needs to be here. Map size time map size. All right. So now if I do this and then if I change the map size to something like 64 then I can launch it without any without need any change in it and it won't crash. So top left is black. So as you can see when we reach and this is significantly larger but when we actually reach the little black thing there it is the black tile. We're back to square one. So um that's a much larger map. So that's sort of how um how our map's going to work. Again, we're not really going to use these bitwise operators, but that is one way to actually uh navigate around the map and see that we are actually indeed scrolling through our tiles very very smoothly, which is great. One thing I want to show you guys is what happens if you don't do it as I as I tell you to and actually do something like like this. What's going to happen is you'll actually Oh. Um, let's just make sure that we got our brackets in the right place. Oh, we do. All right. Add it in here. Oh, never mind. I was going to show you guys something, but apparently uh apparently it's not the right way. So um so yeah but xx now what was it what what I was going to show you guys is if you actually do this outside the uh the box what you'll get is this um so if we just um I know an easy way to do this Actually, I'll just say quickly also also down a little, but um a common incorrect a common like I guess it's not really a bug, but a common error that people uh seem to have with um tiles is what am I doing? Zero. A common problem that people seem to have with uh Okay, seriously, what's up with this? Let's set this to like 10. Common problem that people seem to have with tiles is the fact that um they do this. So, as you can see, we're only advancing one tile at at at a specific point. Um, and it's actually it's kind of hard to see if I don't do it don't do it this way, but yeah, that's a huge problem people seem to have where they just they don't actually smoothly scroll. They scroll from tile to tile. And the reason for doing that is they actually add that offset after they've already divided it by um by that. You want to be able to manipulate each pixel individually, not each tile individually. So, huge problem. I I know I've run into that problem a few times, but if you guys catch yourself uh failing like that, it's probably due to this. So, fix that up. And what you should get is just perfectly smooth scrolling and you'll be able to go everywhere you want in the map in between tiles and all of that stuff. So, yeah. Anyway, guys, I hope you enjoyed this uh long episode, guys. I Okay, I'm they're going to be much shorter from now on. Okay, 5 minutes. I'm just stopping myself at 5 minutes. I don't care if I'm mid-sentence, the video is going to cut itself and that's just going to be it cuz I do not have I do not have time. So, um yeah. Anyway guys, I hope you enjoyed the video. If you did, please hit the like button. Give the video a favorite if you really enjoyed it. And I'll see you guys in the next episode of Glorious, Glorious Game Programming. Later, guys. [Music]