 Hello and welcome! Today we're going to be looking at just playing around with some video game programming. This video is geared towards my children are now on summer break and I'm sending this out to their classmates as something that might want to play around with this summer. It's just going to be a very basic, very, very basic game program example that they can play with and just modify a little bit just to get them a feel of it. I figured this is good for all beginners, so I'm going to post this on my main channel. But here we go. There should be a link in the description of this video that will bring you to this in your web browser. You're going to want to do this most likely on a desktop. You could do it on a mobile device, but it's just a lot easier if you have a keyboard and a larger screen. But when you get here it looks like this. I prefer let's go change view and I'm going to do this little side view here and then we can close that up and pull our code out here. Here's our game over here, again very, very basic and this is our code right here. This is all the code that we're going to be modifying and I'm just going to show you a few basic examples. Again, this is just something for you to play with to get an idea of it. When we make changes over here it should take a second, but then the game will update over here. This first little section right here, this is just the configuration, the basic setup of our game. You can ignore these first two lines for this tutorial, I'm not going to talk about that. The height and the width is the height and the width of our game. If I was to set this to 400 width, instead of 800 width, you'll see if we click over here the game refreshes and now it's more of a portrait view rather than a landscape, which is something you might want to think about if you're working for a game for a mobile device, which this is using Phaser library, so it's going to run your web browser, so you can definitely run this on mobile devices or desktop. It should be cross-platform. I'm going to go ahead and change that. Also all the changes you make here at any point, if you mess it all up you can just refresh this page and it will reload the original code. If you want to save your changes you'll create an account at CodePen.io, you can just sign up and create a free account, which is I don't use CodePen much, I just figured this was the simplest way to send this out to people to play with. Width and height of our game, and then we have our scene, and our scene is going to have in this case three main functions. We have preload, create, and update, and that's what we're going to look at down here. We have three functions. So preload is loading up your assets, your pictures, your sounds, your levels before the game starts, because you don't want that stuff loading after the game starts. Create is the first function that runs once everything is preloaded, it basically creates your level and puts your characters and what not in there. And then update is your update function. That's running constantly at up to 60 frames a second, looping over and over again. That's where it's going to update what's happening in the game. We're also going to have physics in our game, and don't have to worry about this too much, but we're using arcade-style physics in this tutorial, which is a very basic form of physics. This will allow you to have gravity and allow objects to interact with each other, either collide or you can have collections of stuff. But mainly we're using it in this example. We're going to have some gravity and we're going to set that to 300. You notice it says Y 300. So when you're programming in a game, most of the time you have X and Y. So X is your value left and right, Y is up and down. And in this case, the higher the number for X, the further to the right you're going to go, and the higher the number on Y, the lower on the screen you're going to go. So this is saying that we're pulling down Y at 300. So if we refresh this, you can see how our character falls. And if I take that and I make that a higher number, like I can say of 300, I say 1,000, and I just give it a second update. You can see he falls a little faster. If I set it to 10 and wait for it to refresh, you can see, oh, he's falling really slow right now. So that's the gravity of our scene. And what we're going to do is we'll leave that 300, but that's something to think about, like if you're making a game, maybe it's a game where you're out of space and you're falling slowly, so you want to set that to a lower number or maybe gravity is going to be really strong and pull down really hard. You want that higher. Anyway, we've created all this and we've put it into a variable called config. At this point, we're going to create our game. That's what we're doing here, we're passing it, all that information. Next, we're going to create our main scene variable and a player variable that we can call at any point. Now, this is our load function. This is our preload function. Again, this is where it's going to load our images and sounds and level design before the game starts. Here, I'm just setting a variable for scene so that we can make sure we're talking about our proper scene. Don't worry about that too much. Here, we're going to load to our scene a sprite sheet. A sprite is a 2D character in a game and a sprite sheet is basically an animation. It's a bunch of frames. If I copy this URL right here and I open up a new tab in my browser, I can paste that in there and you can see this is what that image looks like. It's got all the walking frames for this character, a center frame and a left and right walk. Now, you really don't need left and right walking as you'll see the way I programmed this out. We actually do that procedurally with software. Here, we're saying that this is a sprite sheet, meaning that there's more than one frame in there and then we're going to say for each frame, this is the width and this is the height. If you do that math, as you can see, this is a 288 by 48 pixel picture. The height is 48. All of the images are 48 pixels in height, but then we're cutting up each frame should be 32. I hear I'm saying the end frame is 3, which actually gives us 4 frames because we start counting at 0. When I move my character here, you can see him walking. I'm going through all four frames. The first four frames, 1, 2, 3, 4. I can cut that down. If I put that down to 0 and then wait for this to refresh over here, now if I use my left and right arrows, you can see he doesn't walk. It's just showing that one frame over and over again. I can set it to 1, which would give us 2 frames, which is really all you need. If I now have him walk, you can see it looks like he's walking and I'm only using two frames. Really, you don't need more than that unless you want more detail in your walking. Again, there's four frames here. Two of them actually look the same and then one's the flip of the other. I shouldn't say flip, but the reverse leg. If you look at some of the earlier Mario games, he only has two frames for when he's walking. We're going to use all four here since someone drew them up for us. Anytime you see two forward slashes in the code, that means it's common. That's not actually code that runs. That's just something you've written as a note to whoever's looking at the code or you're turning off something. This is code here to load up some music in the game, but I come into that out because we're not going to use that in this tutorial, but that's how you would preload the audio. The only thing we've done in our main preload function here is load the image of the walking and we set it as a label of walk. We can call that later on, which we will do now in our create function. Once everything is done loading, it's then going to run this function. We're just doing a few things here. To our scene, so basically our game right here, we're going to add a sprite. We're adding a sprite, but we're saying that it has physics. We're going to use that walk animation. That's what this walk here means. This right here is the position in the game where you're going to place your character and I'm doing some math here. Now again, our game is 800 wide by 400 high, so if I wanted to put our character in the center of the screen, I can say 400 by 300 and it's going to give me the same results and you might think, oh, that's a lot clearer. That's a lot easier than what you had written there. The problem is if I now want to resize my game, I'll say 400 for the width here. When that reloads, notice our character is no longer in the center of the screen. Right, so what I did originally, let me refresh this code all the way back to how it is originally. I'll come back down here. What I'm saying here is look at our game, look at its configuration, look at its width and divide it by two. And that will give us, since the width is 800, 400. And I'm doing the same thing with height. So you can do math in here very simply just like you write on a piece of paper. The forward slash means divide by two. Now if I wanted him to start higher up on the screen, I can say divide it by three. And now when it refreshes, you see he started a little higher. Or I can say four. Now he's going to start just a quarter of the way down on the screen. So you can do math or you can put in fixed numbers, but it's usually better to use math for something like this in case you decide to change something else like the size of the game. Let me go ahead and set that back to two. So now when this refreshes, you start right in the middle of the screen. So all this is saying is this is where we're putting him. And this is the animation that we're using that we loaded up here. Okay, and again, the whole point of this tutorial is go in here, play with these numbers. Again, if I did zero, he'd start up on the left side of the screen. And all the way to the left, I'm going to give him 50 here, and then I'll say 50 here. And now when it refreshes, he's going to start up here somewhere. There you go. So again, I'll put that back to how it was. And he should refresh and start in the center of the screen. Bounce, bounce I have set to two. So what that means is when he hits, if I set this to zero, he's going to have no bounce. So when he falls, he's going to hit the bottom of the screen and just stop. Boom. If I set it to one, he will bounce all the way back up to where he started. And he will do that continuously. He will always bounce right back up to where he was. If I do it 0.5, now he's going to bounce wherever he's at, however far he falls, he's going to bounce back up 50% of that, 50% of that, 50% of that. So you can play around with that number. And the thing is you want to be careful not to really, in most cases, set that higher to one. For example, if I set it to two, he's now going to bounce twice as high as where he started, which means he's going to hit the top of the screen, then bounce, and then he's going to just all of a sudden just start bouncing everywhere like crazy. So in most cases, you want to set this lower than what you started. I'll set it to 0.5. There we go. So here we have set collide with world bounce. So we don't have any platforms or anything for our character to stand on, which means by default, he would normally fall through the level. Or if I went off to the right, he would just keep going. So I've set this to false. That will happen, but I set something up in this update function that says, basically what this is saying for his X and Y, so left and right for X, and up and down for Y, I'm saying wrap. And that means that he's going to basically do like Pac-Man does and fall, and he's going to go back up to the top and fall. He goes off to the right, he's going to come back to the left. So if I actually start hitting to the right here, he's going to eventually come in on the left side of the screen and the other way around. Now he's falling, he's got gravity, so he keeps increasing in speed, which is what's going on here. Let's go ahead and set bounds, collide with world bounds, set back to true. And now he'll collide with the wall, the ground here, the edges of our level. So that's what that does. And again, we'll play around with that in a little bit to where we'll set this up to where he doesn't, and we'll play around with that. And now we're setting up an animation. So we set his walk, and it's going to load up the first frame of that. But now we're setting up an animation for him, and we're calling this key for this animation walk. We're using the walk settings, and we're setting a frame rate here. So again, love this tutorial, just play with numbers. So as he's walking here, you can see how fast the animation's going. If I was to increase that, so let's say 50, that doesn't change the speed that he's moving across the screen, but it will change the speed of the animation. So you see, now it looks like he's running, and my screen capturing is capturing a much lower frame rate than I actually see in the game, so I'm not sure how this is going to look for you. But it looks like he's running super fast, even though he's moving at the same speed. If I set that down to one, it's going to be a very slow frame rate. So now he's going to every second do one frame. We'll set it back up to 10, so now he's going to do 10 frames a second. Actually, I don't know if it's 10 frames a second, but it's definitely a slower number, set it to five. So all depends, the speed you're making your character move, you may want to change how fast this animation moves. So again, these are numbers you can change with. Next, we're going to create an object called cursors, and we're saying to look at our scene, look at the input. We're looking at the keyboard and create cursor keys. This is going to be used later on in our update function to grab what keys are being pressed. So again, here we have just a few lines of code that create a player, set his bounds, tell it to cloud the world, tell us what animations he has, and then start collecting input from the keyboard. Now, the real interesting stuff is the update. Again, this is going to run over and over and over again up to 60 frames a second. Pretty sure the phaser limits it to 60 frames a second. Could go slower if your hardware is slower, but the fastest we'll allow to run is 60 frames a second to the best of my knowledge. So again, I already talked about this. This is allowing him, if he was to go off the screen to wrap back around, which again, we'll play around a little bit. Now we're using an if then statement. So we're going to say, if something happens, do something. If something else happens, then do this. If something else happens, do this. So we're saying here, look at the cursor. So look at the keys on the keyboard. If the right arrow key is down, then do this. This flip X will flip what our character looks like on the left and right. If I set this to false, he won't flip when I hit the right key. So he'll start walking backwards. But then when I go with left, he continues because by default he's facing to the left. So let's set that back to true. And anytime you see in the code something that says true or false, you can always change that and to the other to see what happens. So here we go, we're back to our regular game. Now velocity X, again, X is left and right. So when I'm pressing the right arrow key, he's going to move at a velocity on the X 180, okay? And he's going to play the walk animation. So here we have next, well, if that doesn't happen, if you're not pressing the left arrow or right arrow, if you're pressing the left arrow, what to do? Well, very similar stuff. We're just not going to flip them. And instead of going 180 on X, you're going to go negative 180, but we're going to play the same walk sequence. Now, lots of times what you want to do in a game like this is you don't want to use numbers in functions like this. You want to create a variable for this. So let me show you what I'm talking about. Up here, when we create our player, let's go ahead and add something for him. I'm going to say player.speed equals 180, okay? And make sure we end our line with a semicolon. Now down here, what I can do is I can say player.speed in here and down here, I can say player, the game keeps refreshing. Player.speed, but I'm doing minus. So now it might seem like we have the same thing going on, but what happens now is I can change the speed in one place, I can make him faster, and I don't have to change it in both those places, and that's what variables do for you. So now he's moving a bit faster, and I can set that even higher. I can send it to 500. Wait for this to refresh, and now look how fast he's moving. Where again, if I went back to the original code, reload this page altogether, and again, if you ever mess things up, you can just reload this page. If I wanted to change this to 500, and I come over here now, when he's going to the right, he's gonna go at 500, he's gonna run, but to the left, he's gonna go 180. Right 500, left 180. So that's why creating variables like that allow you to change it in one place and not have to worry about problems like that. So this is saying again, if the right arrow is down, do all this stuff, if the left arrow is down, do this stuff, and if neither are down, set his velocity on x to zero, that makes him stop. If we didn't have that, he would continue going at the speed that we set last. Something else we have here is we have, okay, if the cursor up is down, which is the up arrow, and this double end, end sign, double ampersand, means make sure that's true, and this is true. Okay, and what this is saying is that the player, his body is on the floor. Is that true? Well then, if we're pressing up, it was now his velocity on the x-axis is negative 180. So that allows him to jump. When I press the up arrow, and again, I can make that number higher, or actually technically lower, because it's a negative number, and now when I press up arrow, he jumps 180 velocity on the y-axis. But he knows I can hit that key a bunch and he doesn't just keep going, or I can't hold it down and he doesn't keep going. That's because it says, not only do I have to be pressing up, but he has to be on the floor. He has to be touching something with his feet. If I got rid of that, let me set this back down to 180. Now, he doesn't have to be touching the floor. I can hit the up arrow, and he's gonna keep on going like he's flying. But gravity keeps pulling him down when I let go. So now you have a character that can fly, because he's gonna go up when I'm pressing up arrow, whether he's on the ground or not. Okay, so let's go ahead and play with this a little bit more. I can set that. I can also get rid of this and let's turn off, set the gravity to zero. And now, oh, he's still moving fast. Let's see. Oh, I don't know why I got rid of that last thing. Let's see. Leave velocity to zero there, set this to zero, set that back to 180. So I set his gravity to zero. And so what I wanna do here is I also wanna set, if the up arrow is not being pressed, I wanna set his y velocity to zero. So now I should be able to move him up. And let's add something else here. I am now gonna copy this. And right here, I'm gonna paste in else if instead of up, I'm gonna set this to down. Let me see, and then we're gonna set this to 180. Let me make sure I did all that right. Okay. And we can actually get rid of, well, we can leave the walk animations. Anyway, you can play around with this some, but what I'm saying here now is if I press up, he's gonna go up. If I press down, he's gonna go down. If pressing neither, he's gonna stay where he's at. So now I have a character that I can walk around the screen. And now I can turn off this world bounds. I can set that to false. And since I have this wrap set up, I can walk off the side of the screen over here and he'll come in over there. I can go up. And you notice I don't have a walk animation when I'm just pressing up. We can always add that into here and here. And now he should, well, it looks like he's constantly walking. But I have a character I can walk all around. So if you want more of a top down view or a character that can walk around a map, this is the way you can go. So again, this is just a play with. And again, there's a link in the description of this video to this code online. Again, you probably wanna do it on the desktop computer just for a larger screen and a keyboard. But theoretically, you could edit this on a mobile device. But again, just look at this stuff, play around anywhere you see a number, play around with the numbers, see what happens. And I plan on doing a whole series on Phaser probably sometime in the next couple of months, just going over a lot of basic stuff. But this is something you can play with and just check it out. Again, link in the description. If for some reason you don't see that, you can always go to this URL right here. If you can read that, type it just as it is. Thanks for watching. Visit filmsbychris.com, that's Chris the K. Let me know if you like this, let me know if you wanna know more. If you personal know me, give me a contact me if you want me to go over stuff with you personally. Thanks for watching. And as always, I hope that you have a great day.