Loading the Game Map from a File and Painting it on the Window Surface

Lesson 02

Courses / Build a Game with SDL - Make a Labyrinth with C++ from Scratch - Beginner Tutorial

Loading the Game Map from a File and Painting it on the Window Surface – SDL Tutorial

The goal of this lesson is to draw a game map with tiles that are loaded from a text file.

The screen can be segmented into small squares of length 32 pixels. If the width of the screen is 640px, then there will be 640px ÷ 32px = 20 tiles across. If the height of the screen is 480px, then there will be 480px ÷ 32px = 15 tiles down.

The game map can be stored in a text file using the following simple format: each line represents a row of tiles in the screen. To identify the type of tile for each cell, we use an integer number. The number for each cell is separated from the other by a space.

0 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0
0 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Each integer determines what kind of tile to be drawn. The number 0 represents the floor tile; the player can walk over it. The number 1 represents the wall tile; the player should not be able to walk on it.

As an example, consider this piece of the map, with 3 tiles across and 3 tiles down. The rendered game map image follows the data file:

0 1 1
0 0 0
1 0 0

After establishing the format for the game map, we create thefile GameMap.txt to store the tile identifiers.

In order for the program to draw the map, it needs to know what to draw. So we have to open the map file and read its contents.

We create the function loadGameMap to do that. It uses the fstream header to allow us to use the ifstream class. You can instantiate an object using the constructor, passing the name of the file as argument. After that, you check if the file is open, then proceed to iterate over the contents using the >> operator inside a loop:

while (gameMapFile >> tileId)

The variable on the left-hand side of the >> operator is the object bound to the file; the variable on the right holds the value of the next integer number read.

We store that value in an array of integers of size 20 × 15 = 300 elements. Each of those elements stores the id of the tile, so we know what kind to draw later, be it floor or wall.

After going through the data file, you should make sure to close it.

Once we load the identifiers for each tile into memory, we need to create a surface to paint them. We write the createGameMapSurface function to do that. It goes through each element in the array of tile identifiers and figures out where to paint each little square.

You can draw the tiles in many different ways. The lesson does it top to bottom, left to right. That is, it starts with the first row, then paints a tile in each column there. Next, it goes to the second row, then paints the tiles left to right. Repeat until there are no more rows to paint.

The function SDL_FillRect needs a pointer to a SDL_Rect to know what area of the surface to paint. We set the x and y members of the structure using the column and row position of the tile, respectively.

For a given row (of fixed y coordinate), the tiles are laid out along the x axis. So to get the coordinate for the tile at column index j, you multiply it by the width of the tile, 32 pixels:

rectangle.x = j * 32

To figure out the x coordinate, you do something similar, but involving the row index i, multiplying it by the height of the tile:

rectangle.y = i * 32

Note both i and j are counted starting from zero, not one. That is why I called them indices.

Once you have those two coordinates, you know exactly where to paint on the surface. But you do not yet know what kind of tile to paint. To figure that out, you look into the array of tile identifiers.

The lesson used a one-dimensional array to store the two-dimensional map. Because of that, we need a formula for the index of the element.

A two-dimensional array could have been used in this case. It could make development easier and there would not be a need for a formula here.

In any case, you can figure out the formula with this simple grid of 3x3:

To get the element that is in the second row, second column, you consider:

For the column, we can get there if we add the column index j to the tile index: tiles[j]. The second column has index 1, so we have tiles[1].

That would give us the second column for the first row. To get to the second row, we need to add the total number of tiles for a single row. In the 3x3 example, it is 3. So we have 1 + 3 = 21, making the retrieval statement be tiles[4].

In general, the formula is

i * TILES_PER_ROW + j

For the case where the screen has a width of 640px, the tiles per row would be 20, if each tile has a width of 32px. The formula now being:

i * 20 + j

After getting the identifier for the tile, use a conditional such as an if statement to define the parameters for the tile that will be drawn. If the tile id is 0, make it have black color. If the tile id is 1, make it have white color.

We do it in a very simple way, but in practice you substitute the color statement for whatever configuration is necessary to render that tile. For example, the tile could be an image rendered out of a tile sheet and the statement would pick the correct clip from that tile sheet.

01 02 03 04 05 06 07

Video Transcript

Welcome to another lesson. We are going to be continuing our experiment with lib SDL version 2. Let's take a look at what we have so far. I'm going to compile the g++ in link with SDL2 library. Execute the program. We can move the player represented by the gray square and it's capped to the screen so it cannot go out of bounds. I'm trying to go to the right again but it won't go out of the screen. Trying to go down again. I'm pressing down, won't go off the screen. Pressing left, it won't go off the screen and so on. Now the goal for us will be to make some sort of game map. So where we're going is the following. We're going towards a some kind of labyrinth game. Let's take a look at this picture here. So we are going to have the screen split into squares. These tiny smaller squares like the player right now that is moving is called the tile. We are going to split the screen into tiles of 32 by 32 pixels. So there will be a game map and the map will cover the whole screen. And the purpose of that will be to eventually make a labyrinth game. And this game would be something like this. Suppose there are walls here represented by the color white. The background is black meaning you can still walk through but you cannot when you hit the wall you cannot go through it. So it's some sort of labyrinth where you start at some point for example at the top left and you have to reach some end point. It could be anywhere. We could mark some end point perhaps here and then you have the start point perhaps in the top left. So your objective would be to go from the top left to this square marked with the red color here in the right hand side. So there would be many obstacles and those obstacles would be the wall represented by color white. So you could have the map with the wall so you have to go around the walls and find a way to reach that destination. Of course I'm drawing pretty bad but you get the point right? So let's get started here. We are going to first see how we can draw these tiles. Now we need a map and that's something we have to think about. We're going to use a simple format for the map. We are going to take a text file and make that our map. So in the text file we're going to use numbers to represent those kind of tile we are drawing. For example if we want the black tile which means you can walk through there will be zero and for the wall tile represented by the color white would be one. It means you cannot go through it's a block it blocks you. So let's start thinking about how to do that. So let's go here. Let's make the sample map. Let's first figure out for our screen how many tiles it will fit. Remember that the screen width is 640 and the window and the height is 480. So we're going to take that and divide by 32. So 640 divided by 32 would be how many tiles? 20 tiles right? 480 divided by 32 would be 15 tiles. Okay. Now let's figure out how to make the map format. I'm going to create a new file here and this is going to be the format of the map. We're going to have so 20 tiles right per row and 15 columns. So let me start with just zero. Zero represents a tile that you can walk through. So the first on the top left is here and then you add 19 more right? So now we have the end is separated by space. Very important. So we have five. Let me add more. Five, ten, fifteen and that's 20. I removed the space from the last one and I add a new line. So here we have the first row would correspond to from the top left to the top right. There will be 20 tiles each represented. Each would show up as a zero tile. The zero represents the walk, the tile that can be walked through. We're going to use the color black for that one. One, two, three and so on. So you can see there's five. That's five. That's five plus five to eight. And we're going to do the same thing, 15 rows just to start with nothing in the map. And we're going to demonstrate as we add a different kind of tile how to show it and load it in the game. So I'm going to do one, two, three, four, five rows and I'm going to copy this and add 10 rows, 15 rows now. And let's call this the game. Let's call this game map.txt. Now let's find a way to load this game map into our program, our game. Let's go to main.cpp here. So as we start the game, you want to first load the map and then you want to create some kind of surface, right? And that surface you're going to paint the map once. And then from that we can continually print that onto the window surface. All right. So let's make a function from that for now just void. Let's do load game map. No parameters for now. So we're going to need a way to read a file. To read a file we can use the fstream library. Right? So we're going to go up here and I'm going to say include fstream. With that I can use a class called ifstream. Ifstream, okay. And this can be used to read the file. Okay. Let's call it game map file. And you have to give the name of the file, right? Let's do game map.txt. That's how we name it. Now we're going to add this. Now what? Now let's try to see how we can read this. Let's see what happens. I'm just going to output the result to the screen just for debugging. If we do string line, line by line, it would be something like perhaps. So we're going to check the file open then later we're going to read every line and then we close it. So game map file is open. We're going to do something that at the end we do game map file.close. Then we've got to read each line. If I just do see out, not see out, sorry, get line. And then we give the map game map file the instance of ifstream followed by a variable to hold the string and that will get you the line into this line and you can do let's see out what's in line just to see and I forget the cd colon colon and your library. So let's do the first one. This is just going to get the first line. I want to see what we get in the terminal. I'm going to restart. Oops, I have to compile again. And there's a problem because I forgot probably as the colon color for string. Perhaps you want to include the string include string here. Now I have students not declared. Is it also part of the namespace? Let me see probably is I don't know. Check. Yeah, it is. So I have stream is also in the namespace std. Okay, so we didn't call the function. So let's call it from main after starting. We initialize as the L create the window and so on. Let's do after creating the window surface. Let's do load game and map and let's call that function. This will call the function we declared here. And you can see it's reading the first line. Now we can do it for every line if we put a loop here while get line. And with that, it will read every line. You can see now the map is red and we have access to it. Now the problem is we need to grab each individually not just line by line. Let's see if we can do something about that. Let's see if scene works here. Let me look about reference C++ C++ scene. Let me see if there's an example of files somewhere here. And here. So it's a stream. So let's think about this. I have a stream. And you stream use the operator here to whatever variable. Okay, let's see something here. Let me comment this out. I'm going to do the following. I'm going to see in right. I'm sorry. Game map filing is this operator into I'm going to put some variable here. Let's say int tile ID. Now I'm going to put there there. And I'm going to see DC out tile ID. See if that gets the first very first one. And I need a end line just to break the line. So we got zero. Now we got to go for all the other ones. Do we got to find a way to loop through? Let me look loop scene. I have stream. Look. I stream. What is this one? I was looking for this. Seems like we can do that perhaps. I have stream. I stream. Okay, let's try that. Let me close that. I was just confirming that if we do the same, put that this work, I wonder, let's do it. Not if but while. And you go here. Let's do okay. Seems to have done everything. It should be like how many 15 times 20, right? So there'll be 3300 tiles. Right 15 times two, 30 times 10, 300. Let me find this to work out. Oh, it doesn't work. Yeah, 300. One is because of the starting. So 300 tiles. Okay. So with that, what should we do now? Let's put this in So if you have the map, you want to be able to draw the rectangles. Now that's something we can do, but I'm thinking we don't want to do that in the same function as load game app. This function should only be responsible for getting that data and put into memory. But I don't think there should be separate functions just to draw. Okay. Since we're dealing with a fixed map size, perhaps you could do a 2d array to store all the tile IDs. Of course, you can use a single dimensional, that would be a 300 size. And that's totally fine. We can also do 2d up to you. Let's see what we can do here. If it were to be just one, so it'd be array of ints. So this case would be a pointer, right? So load game map, let's see. So let's create an array of ints. So int tiles. If we can start one dimension and then change to two, let's do that. Intiles 300. Then we go through the game, get the tile and so on. Instead of doing the c out, you're going to say tiles at some index, you can say index equals zero. And put this inside. At index equals tile ID. And then at the end index plus plus plus. Remove that, close the map file. After that, you can return tiles. And let's see. Address of local variable return. Yeah, we have load game map. You can get game map tiles. So that would be a pointer. So I have to re-reference. Let's see. Okay. Think about that. So we got that. Let's do the following. Instead of doing that, let's pass it by reference. Load game map we're going to do here. Don't do that. And then we're going to do here we take that to be the the aisles. Int. And then let's go here we're calling like this. And then we do the game map game map tiles. And we have to do re-reference. Let's see. I think we can recall the syntax blank right now. Let's see. So we have an array here. Game map tiles is 300. If we don't have this, coming this out. Let's say I have 300 there. And if I do that, standard, see out game map tiles, zero, line, we get there. So I don't need the WC. So it would be one line. Do that. What would it be? Zero K. Fine. So let's call that with game map tiles. Let's see how to get map tiles here. We have the tiles int and percent. Let's say tile sub zero is three or two. And then you standard out sub zero here. Invalid types. Let's see. Nine lanes seven. Oh, because it's int. Sorry. So that would be like that. Is that it? Array of references. Like that. Well, that gives a copy so it's not really what I want. Is it? All right. So tiles also zero two. Game map tiles so zero. They're not the same. So it's all is not arbitrary value because it's not really setting. And I'm assuming it's all coming from this. It's being it's not set so it's not really setting anything when I pass that. Pass it here. If your reference is being passed. Not actually changing the thing. I do that. What happens? Okay. Array of references. So what happens if I do this? Okay. Cannot go word. Argument one. Uh huh. Okay. Let me see something. Int game map tiles that okay. If you pass. Game map tiles as this should be. Press come here. Say it's a pointer to int. And you got that you got that. But you have to. Correct. Correct. Okay. There you go. That's fine. Now let's do. Bring this back. Okay. This part here. I don't need. Yeah. Shadows of parameter because I to declare the parameter with the same local variable name. Okay. We got that. Let me remove this. Okay. So I create the game map. I'm not gonna. Well I could initialize to zero. Let's see. For debugging purposes I'm going to make a function here to print the game map. So I'm going to call it print game map. Okay. And I'm going to take the. Array of tiles. And I'm going to do just a loop. For. I equal to I last. Oops. I don't have links. So I'm going to 300. And. To be as this part. I'm going to put I here. And I don't want to do the end line until. So like it's every. So every row has 20 so every 20 have to add a new line. So if I percent 20. Equals. Let me think about zero. Zero will be the first one at a new line. So we go through it. The first one is zero zero. As long as the I is not zero. And. It is going to be at the end of the line because if you reach the end of the line. Let me think actually it should be. Yeah. As you reach the next one. I should add a new. Stand there to see out. Maybe this should be at the beginning. If I am at the very. About to print the very first of the next row. Then I am going to. Add a new line. Let's see. Let's see. Login map print game map. This is printing to the console by the way. So we can debug. I don't need this. It's. JavaScript. This is C++ so two double equals. Something's not right. And I need a space. So we got zero one two three whatever. Oh I forgot what. Tiles at the. There you go now we got a debugging map here. Now we got a print this map. Let's see what we can do about that. Let's create a function to. Make the map surface. Create map surface. And we're going to pass the game map tiles. And let's see. We're going to return as the L surface star. Point it to a surface. Let's say map surface. Game map. Game map surface. Okay. Let's come here and say. Well I stay here. I'm going to. I'm going to. I'm going to. I'm going to come here and say. Well as the L surface star is the return value. Create game. Map surface. And start tiles. Point it to a. Inc. Let's do. So we need as the L. So for a star. Let's call it map surface. Or just surface whatever. And let's do. We need to create the surface. How can we do that? Create RGB surface. We can perhaps use that. How about we take this. We're going to call SDL. We're going to call SDL. Create RGB surface. Here are the arguments. Oops. 64 by 480. That's the window width and height. It's from here. Probably want to make. Use those kinds of somehow it later. Probably can make a class and have this. Being accessed from this. Method. But right now we have kind of a mess. So let's just go with that. And I notice there's no break line. Here so. After print. Maybe on a SDD. And line here. See out. Okay. So zero zero zero. Fine fine fine. Actually let's put an autocollow. So we can know. Because zero is going to be black. It's going to be the. Thing so let me look for. Create RGB. Surface. See how they doing this. See how they doing this. With height and this. Our mass G mass B mass. SDL interprets each byte as a 32 bit number. So our mask must depend on the end units. By order of the machine I see. We got to do that. The same. RGV. Anyway let's try something. You went 32. RGV. Let me copy. Let me copy. Let me copy. Let me copy. Let me copy. Let me copy. Let me copy this. I don't know if that's going to be really a problem. But I just want to make a mask here. Let's do slightly. Red. For the background. So I'm going to say you went 32 of the type. RGV. Let me copy. Our mask. And I'm going to say it's. Slightly red not everything. So this is a hex value. Okay. 0x means the value starts hexadecimal. Red. Green. Blue. Alpha. Got it. For every digit. Red. Green. Blue. Alpha. So I'm going to do. Maybe. Slightly one two three four five up to. Nine. Let's see what nine does. Zero nine. For red. And I'm going to use this here our mask. And since it's using the end in this here. It kind of inverts the R. If the byte or is not big. Indian. You have to do. The opposite like our mask is going to be flipped. So the zero nine is going to be at the end. So zero zero zero zero zero zero zero nine. You can see here. It's just. Kind of inverted. Horizontally. Okay, let's try that. We got that then returned that actually. So even. Actually didn't even need to create this. We can just return. Let's see what that does. Okay. Let's see if it doesn't. Give us an error. Not declared in the scope. Okay. I didn't put the game. In the name here. When you call in the function. Good. Okay, no problem. Let's start at the map surface. Now that's paint that every time. So since we built a surface. We have to paint that. On to the window every time. So here. When you're painting at the window. Okay, we have to paint somehow. So this one was a fill rack. Now we had to find a way to. Paint on to the window. So I think. What is it? Blit. Surface. Uses functional for fast surface copy to a destination surface. Let's try this function. Blit surface. So we're going to do the map. Let's remove all these. Things we did. We don't need them anymore. I'm going to remove it. Okay. And just the player now. And I'm going to put the map there. We're going to do. Oops. I'm going to put the map there. I'm going to put the map there. Oops. We're going to do. Sdl. Blit surface. Now what's the source surface would be window surface. What's the area? No means everything. Otherwise it's Sdl. Reckless. Part of the. Surface. The area of the surface. Destination. Oh. Actually I got this inverted. The game map surface. And the destination as the third argument would be. Window surface. We're copying that from game surface onto the window surface. And it would be everything. So we're copying the whole game map surface into the whole window surface. No means whole. No means whole. If you want to just part of game map surface you would put Sdl. Reckless with the clip here. If you want to just paint onto part of the window surface. You would put Sdl. Reckless with the clip here. I forgot the semicolon. The semicolon. Okay. That's strange. I got moving and it's filling the things. Anyway it didn't work. So I wonder why. It would be copied from. Oh my god. Okay. So actually I was right in the first time. The SRC to be copied from. No wait. Is the blood target. The surface. So it's correct. I'll be needing to know. No no that's correct. So what could be wrong now. Window surface play position. It's being filled. This is not. If I didn't have the game map surface what would happen. Let me see. Oh it seems like it's not even doing anything. Now we gotta fix this. If there was a way of us. Blood surface. Maybe that was an error. It returns zero to best success for negative error. Code of failure. Okay let's check if there's any problems. If. Sdl blood surface. Is. Not zero. Sdl log. There was a problem. On to the window surface. And we can do percent s and then. Corresponding. Sdl get error remember. For the error. Let's see if there's any problems. Okay there is a problem. Uh huh. So let's stop this. There was a problem hitting. Playing the game map surface until the window surface. Past the no surface. Upper plate. So it seems like there's a no surface. Probably the. We didn't check for no for the game map right. So if. Game map surface. Is no. Something happened. Sdl log. Fail to create game map surface. And we put the percent s and sdl get error here. To see. And also let's make sure to. Liberate memory. For this game map surface at the end. So at the end I'm going to. Sdl free. So. So I'm going to. Sdl free. I think it's free surface. Look at the wiki. Free surface. Yeah. Free surface. Game map surface. So we can. Deallocate the memory that was a locator for that service. Because we don't need it anymore. So we got to collect our own garbage. Okay I. Must. Do something here I should probably stop everything. Fail to create game map surface. I'm going to do a return. Three. In case that happens and for the other one. I'm going to do return four. Just. Going to stop everything because we don't have any error handling right now. Fail to create game map. A no pixel format. Uh huh. Okay. Okay. Okay. Okay. Okay. So we got a problem here. Could it be the R mask I wonder if I messed up there. Could it be the R mask I wonder if I messed up there. I'm going to comment this out and put it like that. I'm going to comment this out and put it like that. Comment this out. I see. Yeah that was the problem huh. I'll see. So. This was the problem here I don't know why it didn't go so well. RGB surface. Let's look at the example again. R mask. You went through you went 32. You went 32. You went 32. You went 32. Read surface. Give the R mask here. Um. Change. RGB surface. Change. Change. Change. Change. Change. Change. Change. Change. Change. Change. What happens if I were to give this for example. What happens if I were to give this for example. 32. 32. 32. Unknown pixel format. I give 0x. FF 0 0 0 0 0 0. Unknown pixel format. 0 0 0 0 0 at FF. 0 0 0 0 0 at FF. 0 0 0 0 at FF. 0 0 0 0 0 at FF. Ha. Unknown pixel format. With high 32. R mask. With high 32. R mask. RGBA mask for an reserved bit mask. Use to extract a color from a pixel. Extract that color. Use the red data store in the most significant byte. Using 0 for the RGB set to default value. Oh, okay. Oh, wait, wait, wait. Hold on. We should do the following. We should paint a rectangle instead. Or not do anything at all, actually. So we're probably good here. You can use 0. Never mind. Let's just do it like that. So we got the game map surface. And then we got a paint onto that surface, right? So actually we did it that, that's the L surface. Surface. And then we have that. It's empty. We need to draw the map. Now, draw the map. At the end, we're going to return the pointer to the surface. But we need to draw something. So we're going to do a fill rack for every tile. Let's do it. Okay, so let's see. We're doing one dimensional. So every 20, we got to break the line. So we're going to do, let's do the following. Let's set row and then set column. Two variables. And then we're going to go in a loop. And we're going to go from, we can do left to right column and then go to next row or we can do top to bottom and go through column, whole row top to bottom and column by column. It's up to you. Let's do it here. Let's do by, let's do like the top row first and the next row and the next row and so on. So while the row is less than the total number of rows, in this case will be 15, right? Because 480 divided by 32. Of course, the, all of these variables probably you have to use a constant. So we don't have to type the hard coded value somewhere. So let's do that. At the end, make sure to increase the row. Don't forget, otherwise an infinite loop. So we're going to do the following. Let's see. We're going to say, okay, you do SDL, fill, rack. And then what's the, oh, there's even fill racks we could use. If you want to do this one, but I'm going to do individual. So first is the destination surface would be the surface here, pointer to that and then erect or so the wreck would be the area we want to cover. So we're going to make that rectangle. So this would be the position, the x, y, width and height, width and height at the end. I'm going to type 32 by 32 already, but the x and y would change. So we got to change that. I put zero zero here, but it's not going to be zero zero actually. So let's break the line here. Actually it's probably better if you did without this thing. So maybe you want to do separate rectangle dot x. I'm going to put rectangle dot w is 32 rectangle, height is 32. And probably we can move this out of the loop. You do cause they're all the same size. I'm going to do that. And we have the position to change because we're going to be drawing the map. The first one is going to be zero and then it's going to be zero plus 32 and then zero plus two times 32, two plus three times 32 and so on, right? So that would be what's the variable that's doing the changing every time. It's one, zero, then one and two and three and so on. That's a row. That's not a row, right? Here in this case would be the column because we're doing column first. So you want to do column. But then you got to loop through the column. So you got to do while column is less than, last column would be the 20th. You keep doing this and then you got to make sure to increase the column here. And then once that is done, let's see, we got to think about resetting the column and then increasing the row. So you reset the column back to zero and then increase the row to go to next row. So that's why it's important to have that. Now let's go back to this. So we got the column times, what, the tile size, right? So we can make it a constant here somewhere. But I'm going to just do it 32, maybe to do the tile size constant. So we can do later. So zero, 32 and so on. Now for the Y, that would be depending on the row, right? The first one will be zero and then the next one, second row would be 32 and so on. So this will be row times 32. And then you can pass the address of rectangle. That's going to be the area of the surface where we're going to paint because we're painting squares, little squares through the whole surface. And then we do the color. We, the shadow is going to be black, right? For the one you want to walk through, but we can increase a little bit the color just to see that it's actually drawing. So let's do that. But mind you that the color is going to change actually because the color changes based on what kind of tile it is. That's why we have the tiles here. No wonder it's there. So we need to grab that. So we can say int current tile ID. Now we need to grab tiles of what? Well, you have to think about the grid here. So you have, let me duplicate this. Never mind. So you have, let me draw here, have zero tile, one, two, three, four, five and so on, right? And then this is going to go to what? Zero through 19 because all is one less. And then 20 is going to be the next row. And you can guess it's going to go to 39. And then four is going to be the next row and so on, right? So you can already figure out how to get this. So you give, okay, what row are we in? If, depending on the row, we add 20, right? And depending on the column, you add whatever the column is. So you get the row. If I'm row zero, then times 20 plus the column. Let's think about that. If you are zero, that makes sense, this formula. So zero times 20, zero plus column zero, zero. If you're in the next one, the column would be one. The row would be zero, so column one, two, three and so on to 19. Now if you do the next one, if the row is one, the one times 20, 20 column zero would be a 20, correct? As you increase column, it goes through to the last at 39 and so on. So that's correct. I think it's correct. Let's save that. So finally, we can figure out what the color is going to be. So let's see, tile color is the variable here. And let's figure out what that is. Remember that's probably you went, you need to make an RGB, map RGB, right? Map RGB to get the color. Oops, I opened a new tab. Let's see here. So we can use this to add the color. Let's do that. SDL, map RGB. And the format has to be the surface and reference the format. And then you give the values for each color. So for example, if the current tile ID is zero, that means as a walkable tile, right? Walkable tile. Let's give it a color. Originally, we said it would be black. But we can change it right now so we can see it's actually drawing and later we can change it back. So we're going to do this thing here. I'm going to say tile color equals. Let's put a variable here. You went 32 because that's what it's returned from the SDL, map RGB function. Oops. And so let's put the tile color here. Let me make sure I'm doing this right. Oops. That's not correct. It'll be 0, 0, 0, RGB. And then you take that and finally put it here and SDL for your records, the third argument. Right now, that's the only color we have. So we're going to do else ifs later, right? Else if current tile ID is one. This is like the wall tile. Block. Blocks you. That's to do. Right now we don't have anything. We said the color would be white color so we can do map RGB surface format, the format of the surface. Then we can do 255, 255, 255. Let's increase the color here for the walkable tile so we can see something is actually being painted. I'm going to do 44 and a chain back later. So we fill rack and do everything. Let's test it out, see if it didn't mess anything up. So here's, you can see every tile now is 0 and corresponding 44, 44, 44 is now being painted in the background of the map. Now you can see the debugging representation of the map in the text file. If I change it, for example, let's say the first second one is 1, 1, we expect what? If you look at the top, the second from the left and the third from the left are going to be white. Let's try it out again. So I changed the map. See now it's white and that's going to be the blockable tile that we're going to block. If the user tries to collide with that, we cannot go through. Right now it's just allowed, right? You can walk through but that's not going to be the case later. So that's the map, right? So let's see what we did. We have a text file to represent the map. So each integer here, right, corresponds to a type of tile. 0 means a walkable tile, that's this kind of a darkish color. One means a wall tile that's going to be the wall of the labyrinth where you cannot go through. And it's separated by space. So each tile separated by space and separated by rows. So each row is a row here of the screen. So this is the first row, corresponds to this. The last row here at the bottom of the screen corresponds to here and so on. So have rows, right? 15 because 480 is the height of the screen. 480 divided by 32, the size of the tile would yield 15 tiles from top to bottom. Now for each column, right, from left to right, we have 640 is the window width. Divide by 32, you get 20 tiles across. So you've got 20 tiles from left to right. So that's why I have 20 numbers from left to right and you have 15 rows. And you can change and make your own map here. I can start changing it and building the walls here, here. And later we're going to figure out where to place the starting point and the endpoint of this labyrinth game. All right, I can save that map and it's going to load it again. You can see the debugging shows you the data representation of what you see on the screen, right? All right. So I think that's it for this stream. And if you don't know about us yet, check out the MVK Tech World. And I hope to see you next time where we continue to build this labyrinth game. Thank you so much for watching.