Tile-based game Part 1: Setting up

Key Takeaways

welcome back to game development with pame this is going to be part one of our series on tile based games in this video we'll be getting started with our project talking about what we're going to be doing and what is a tile-based game so tile based games are really common Dungeon Crawlers Legend of Zelda style RPGs uh strategy games even sidescrolling Platformers like Mega Man are all tile-based games sometimes the tiles are obvious like in Civilization uh but sometimes they're not even visible at all but what we mean or what game designers mean when they're talking about tile based games is that we're using a grid of tiles to lay out our game World the graphics the map the movement of the Sprites everything is based on an underlying grid and there's a lot of advantages to this it helps in organizing the data in your code it helps in designing the graphics of your level levels and you'll see how it all goes together in this series we're going to start out with the very simplest possible grid of tiles and slowly build up to more advanced features like Maps level design fancier graphics and so on so for this project we're going to start out with a basic game Loop structure and you can click on the link on the screen if you need a refresher in how we created this basic structure uh in the previous project and over here in the settings the main thing we're going to be concerned with is this tile size variable this is how big the tiles in our map grid are going to be and a lot of times that can vary quite a bit um typically you might find them in powers of two 16 or 32 or 64 are popular sizes uh but really it all boils down to your preferences and and the art that you have uh what size the artist has created the tiles in so I'm going to use a tile size of 32 pixels so every Square on the grid will be 32 and I've chosen a width and a height here for my game window that are values that are evenly divisible by uh 64 or 32 or 16 um so that I will have a whole number of squares across and down and no no partial squares showing on the screen and finally I have these two variables here grid width and grid height that are just going to be the width divided by the tile size so in the since we have 32 here uh grid width will be 32 and grid height will be 24 so that's how many squares fit uh on my screen it'll be 32 squares by 24 squares so the first thing let's do while we're getting set up is let's just draw that grid on the screen so we can visualize our squares and know what our grid looks like uh as we're getting everything working um so I'm I'm going to add here to the def draw here I'm going to say draw grid and then I'm going to Define that and to draw the grid we're just going to want to make a couple of uh Loops so I'm going to make two gri two Loops one Loop to draw the horizontal lines and one Loop to draw the vertical lines so if I count X's from zero all the way to the width of the screen and the increment I want to count by is tile size right I want to count by 32s so I'm going to count from 0er to 1024 by 32s and each place I will draw a line and that line for the pame do draw line command we just tell it the screen I'm going to use this light gray color and the end points of the line will be X comma 0 and x comma height so I want to draw a line at whatever X I'm at going from the top of the screen down to the bottom and that will draw my vertical lines and I'm just going to do the same thing for my vertical lines I'm just going to draw I'm going to count y's uh to the height and that's going to go those are going to go from 0 comma y to width comma Y and that should give us our uh grid oops that should give us our grid okay so now we have our grid we can see the lines of our grid on the screen so now let's add a player now I have my Sprites here and I started out by just defining a really basic uh player Sprite it's just a square that's the size of one of the tiles and I just tell it an X and A y for where I want it to spawn okay and that's going to look like this we'll do that in the new here we're just going to say uh oops self. player player we pass it a copy of the game and we pass it the X and the Y where we want it to spawn now these are not the X and Y pixel coordinates these are the grid coordinates so which Square so the upper left hand Square will be 0 0 so if I put 0 0 here 0 0 here then the player will spawn up there in the upper leftand corner and so I can just tell it what Square I want it to spawn in so let's move him out a bit so he's out here in the middle so we're going to that's going to be our spawn spot and so you can see I tell it this is self.x and self.y are keeping track of what grid coordinate we are on and then in our update we just put our rectangle so we draw our rectangle at the pixel that matches that so we're M multiplying the x times tile size so if we're on square number three that's 3 * 32 and that's where the upper left hand corner of the square will actually be drawn in pixel coordinates so let's talk about how we would move our player around so we're going to use the four arrow keys and we're going to do four directional movement and in fact we're just going to do um steps right now we're going to say you you you have to stand in a square so if you press up you will move one square up so like a like a chest piece on the chessboard and we can do that very easily by we're going to define a method called move okay for the player and that's going to let you move in two different directions X or Y okay so the DX and the Dy so how much should X Change how much should y change now normally those will be either a a positive one or a negative 1 but I'm putting explicitly right here that DX will be Zer and Dy will be Zer by default so if I call the move command and I tell it to move X by one but I don't tell it the Y then the Y is going to be Zero by default okay and so what we want to do is we just want to say self.x plus equals DX and self.y plus equals Dy so we just move our x coordinate in our y-coordinate by the amount we were supposed to change right and then we can just map those to the keys so over here in our events section we're going to add some more key down events so if the key was pg. K left then our we should just tell our Player move DX = -1 right and D1 y we can leave out because it'll be zero so left will make the X Change by one uh negative 1 sorry and so we can just uh duplicate this a couple more times to get the other directions right right is going to be X by positive 1 up we'll be changing the Dy by negative 1 and down we'll be changing the Dy by positive one and that's all there is to it now our arrow keys let us move around but you do have to press the key over and over again right so a quick and easy way to let you move by holding the key down would be just to do the uh to use the key keyboard repeat function so here in the init section we're just going to set the uh repeat rate and you do that by just saying uh how long should it wait before it starts repeating so we're gonna say If We Hold It Down for half a second right 500 milliseconds then start repeating and repeat every tenth of a second and what that will let us do is if I hold down the right arrow key I can just step right along by holding the arrow key down okay and we're going to do some more advanced movement later on in this project this is just our very simple first steps just to get something on the screen moving so don't worry if you start to think this is kind of limiting okay let's just add one more Sprite now for our wall and our wall is just going to also be a square right so is a square it's going to be the size of one square and if we want a long wall we just have a row of those uh all next to each other lined up uh so what we're going to do is we're going to pass it of course a copy of the game and also an X and A Y for where we want that wall to spawn we're going to make it a member of the all Sprites group so it gets drawn and we're going to make it a member of The Walls Group which we're going to create to hold all of the wall objects so we'll just initialize it with those two groups oops self groups and I'm just going to make again just like we did in the player we're just going to make a surface of tile size by tile size and I'm going to fill that with green that'll just be the color of my walls and we to find our rectangle and we just need to set the X and Y just like we did in the player and we're going to set the rectangle to that location as well okay so there's our wall simple wall and over in our game we just need to make sure that we have created a Walls Group to hold them all now to spawn a wall all we really need to to do is just make a is call a wall and give it two coordinates to tell it where to be so I'm actually going to spawn a few of them so let's just Spawn from 10 to 20 say uh I'm just going to spawn a long wall right here so I just create a wall object at that X and with a Y of say five and that should create oops if I type the word in okay and there's our wall okay so we have 10 10 squares filled in so now I have everything on my screen to get started talking about how my map is going to work and in the next video we will add collisions and talk about how we can add more walls and add them in a more intelligent way thanks for watching please press that like button below and subscribe for the next video see you next time