 Okay, this video is part of a series on a very basic 2D game design using Phaser 2D. And so far, if you haven't watched the previous videos, I recommend it. There should be a link to the full playlist in the description of this video. I'm going to go ahead and refresh. Right now we have three different player tuxes on the screen that we can, they bounce when they fall and they move left and right and they've got gravity and speed. But right now they are on the ground, they're not on the ground. They're touching the bounds of the world. Let's go ahead and add a brick ground. Again, if you downloaded my template and you went to resources, there is a simple little brick image I made of these little gold bricks that I quickly made in like two minutes. So let's go ahead and load those images up. Now I do want to say there are what are called tile editors. This is one way, if you're making a very simple game like I'm doing here, this is one way of doing it. If you're making a more complex game where you're like a side scroller game, you're going to want to use a tile map editor which Phaser has those where you can actually create a design right in your web browser and it saves it as a JSON file and it makes it easier for you to edit and create collisions and stuff. But we're not going to get into that right now. We're just going to add a roll of bricks at the bottom of the screen. So in our code, we're going to go back up to the top and we'll go to our preload function here and we want to preload the image so that it's all raised. I'm going to say, I'm just going to copy and paste that line real quick and we're going to call this brick and the file is called brick. So again, just like our tux, this part here, so we're preloading the image, we're downloading it and making sure it's in RAM and ready to go so that when the game needs it, it's there. There's no delay in it loading. The rest of the game, we're going to call it brick. I can call this anything I want. I can call it Bob if I want or Walkway. But keep it simple and recognizable, brick here. So that's what we're going to call it in the game. This is where the image is and again it's in a folder, in a sub folder of the folder I'm currently in called brick. You can grab an image from someplace else on the internet, some other person's website if they're not blocking you, but it's a good idea to have your images and stuff with you where you are so that on your server, so that you know that it loads properly, that the file doesn't get moved, blah, blah, blah. Anyway, we're preloading that there. Now, we're going to make a bunch of different platforms, ground planes. We're not just going to have one square that the player is going to fall on. So what does that mean when you have more of one of something in a group? Well, it's called a group. So we're going to create a group here. Let me also, I'm going to remove one of our players. We don't need three players on the screen at once. So let me go ahead and just for fun, I'm going to put those together. Let me have a couple of comments in here. Player, so we know that's where we're creating our players and setting our settings for our players. Here we'll call this brick for now, or let's call it floor. And now let's create a group, as I was saying, we'll call it a platform. So we'll create a group called platforms, platforms, and I'm going to say that equals game add group just as we made a group of players. So now we have our group. Let's go ahead and create our platforms. So I'm going to say create platform. That's a function that we haven't created yet. So let's go ahead and create that function. So I'm going to scroll down, I'll put it down at the bottom of my code here, function, create platform. And here I'm just going to create a variable called ground, it's a local variable, so it's only inside this function, and I'm going to say platforms.create. So platforms is our group and we're creating, and again, this is just like where we create our players up here. So we create our player in the group of players, we created it, and we're going to give it an X and Y and what image we want to use. So here I'll say, just as an example, I'll say that it's left and right, so X0, so it's all the way on the left side of the screen, and I'll say that it's, well, we know that our world is, how did I made it, 720, 720 pixels high is how big I made it up at the very first line of our code. So if we go up here, you can see right there, 720. And back down to our code, so you would think, okay, I'm going to go 720 here, but no, that's where the top, because we didn't move the center point of our image. So that's the top, so you actually won't see the tiles if you put it there because the very top of the tiles will be there. So I could go 720 minus, and I know that this tile is 64 pixels by 64 pixels. So I can say, 720 minus 64, and it will do the math for me, but what if I change the size of my world? What if later on I want to make my world, you know, bigger, smaller, and that's going to mess things up? So what you can do is I can say, take our game, look at the world, and look at its height, which in this case is 720, and then subtract 64 from that, so it's moving it up on the screen. Now no matter how I change the size of my screen, this floor will always be at the bottom of the world. You may or may not want that, but that's how we're doing it. And the image we're going to use is the brick image. I'm going to save that, come over here, refresh, and there is our brick. Okay, so we have the one brick image, but I want a brick all the way across the bottom of the screen here. So how am I going to do that? And again, tile map creators are a great thing, but let's just keep this real simple here, and we're going to do a for loop. So what I'm going to do is I'm going to say for, and I'm going to create a variable called I and set it equal to I and set it equal to zero. And we're going to say loop as long as I is less than the game.world.width. So just like we got the height of the world here, we're getting the width of the world here. And we're going to loop continuously until I is greater than that, or as long as I is less than that, I should say, as long as or until, either way. Now I'm going to say I plus equals 64. So that's saying each time you loop, add 64 to I. So it's going to go from zero, because that's what we originally set it as. We're going zero, 64, 128, so forth and so on. Until it's larger than the width of the world. So now that we have that, we don't want them all to be on the left side of the screen. I'm going to say I. So again, it's going to be zero, 64, 128, so forth and so on. And I'll save that. And if I refresh this, we now have bricks going all the way across the screen. Now you may notice our tuxes, our players, aren't landing on that platform. I need to tell the game engine that, one, these platforms, these bricks, have physics. And two, that the tuxes should collide with them. I also should mention, again, I'm trying to keep things very simple here. This is not the most efficient way to do this. And if your game is really big, now when it's checking that group of those bricks, every time it loops, it's actually checking every single one of those bricks individually. So if you had a big level, again, this is a bad way to do this. But we're doing a one-screen game that's, you know, this is it. We're not going to have the camera move around the world, at least not at this point. We can always change that later to make this a side scroller, may or may not. I don't know how far I'm going to go with this series. But for right now, this is how we're doing it. But let's go back up to our create function. So here we're creating our forms or our floors, and we're creating our platforms here. And what we're going to do now is just like we did for our player up here, we're going to take our platforms and we're going to say enable bodies true. So now physics are applied to them. They have a body, but we still haven't told the the game engine that we want our players to collide with that. So, you know, we can put this in our update function. But let's just say, come down here to our player update. I'm going to just to save time, copy this line. So now each time we loop, we're going to say, check the players and see if any of the players are colliding with platforms and make sure that they do collide. I'll save that. Come in here and boop, boop. Oh no, what happened? We broke our bricks. So again, I'll have five to refresh that. It's actually kind of cool, but at the same time, not necessarily what we want. So what we need to do is make our ground planes, our bricks unmovable so that we can still collide with them, but they don't get moved. If anything, the players move, the players bounce away from them. So again, we'll go back into our code and we'll go down to our platform function where we're creating our create platforms. And each loop we're going to say. So this line is saying, create the ground. And then here we're going to say, ground.body, so the body of it. Basically, when you see the word body in this, think of physics. Think of this is touching something. Inmovable equals true. So now these bricks that we're creating are inmovable. So if I go back to my web browser, hit F5. We now have characters that can move. And you notice there's a little bit of space underneath our tuxes between that. That's just due to the fact, if we look at our image of the tux, which is, again, something I just pulled offline. Again, think of the bounds of this image as the bounds of our tux. Really, I should have gone into GIMP, because I just downloaded this offline. But I should have gone into GIMP or some image manipulation program and trimmed away this excess space. Something to think about while you're creating your game. Not a big deal. We're just playing around here. But that is what we're doing today. We've created this. Now, again, every time this game loops, which is multiple times a second, right now it's going, check each player. Is this player colliding with this player? Is this player colliding with this player? Also check, is this player colliding with this brick? With this brick? With this brick? With this brick? With this brick? With this brick? With this brick? That's a lot for it to take. And there are better ways of doing it. But again, a simple small game like this, even a slow phone that you're playing this on, will work properly. It's minimal. But again, if you were going to have a side scrolling game with lots of bricks, it will make the game run slow pretty fast. But for now, this is what we're doing. Again, I hope that you're enjoying this series. If you are, be sure to like, subscribe, share, comment. That helps me out a lot. But if you have just a little bit of money, even as small as a dollar a month, think about coming over to patreon.com forward slash metal X1000. And supporting me financially, I would really appreciate it. More money, more supporters I get, the more money I make, the more videos I make. We have goals on the Patreon website, so check those out. And you get your videos early, because this is part of a series. You might go to watch the next video. It's not available till next week. If you were in the category of Patreon supporters to get early videos, you would have gotten them all in one lump sum already, and you'd be able to watch them all at once. I do thank you for watching. And as always, I hope that you have a great day.