Pygame Platformer Part 2: Player Movement

welcome back to game development with pame this is part two of our platformer we're going to discuss player movement in the previous video we set up the template for our platform game uh with our game class set up with all of its pieces um sort of separated out so we can fill them in with the code we need uh as we build the different pieces of the game and so the first thing I'm going to do is I'm going to go over here to settings and I'm going to customize this a little bit to set up for what we need so I'm just going to name my game jumpy because I'm going to have a little jumpy character running around and I'm going to change the window size a little bit because it's kind of on the small side um and I'm just going to make it um I'm going to do 480 by 600 oops 600 um and I'm going to set the fps to 60 so we have really smooth um movement all right so that's going to look like this this is called portrait mode um or portrait aspect ratio which means the the height is bigger than the width if we made the width bigger then it would be landscape mode um and that would be good for another type of game but I'm going to do it this way because we're going to you're going to see why as we get further along okay so now we're ready uh and the first thing we want to do is we want to get a player Sprite onto the screen now I could go in and start adding my um my Sprite class for the player right here but remember keeping with our theme of of keeping things organized um we're going to actually make a new file okay and we're going to make a new file called Sprites py okay and this is going to be Sprite classes for the platform game so in here is where we're going to put our Sprite classes and we're going to import that as well so over in our main we're just going to say from Sprites import Star now in the Sprite definitions we may want to use some of the constants that we have in our settings right we might add some settings here and in fact we will add some settings here so we're also in our Sprite classes going to import the settings so that we will have access to those variables so let's start with our class player and I'm going to do this uh oops and we better import py game or else we won't have uh we won't have the py game commands import py game as PG right and so now there's a few different ways we could do the Sprite and especially what I want to talk about in this video is how we're going to do the movement okay um um so there are a lot of different ways you can do movement and the options are pretty wide um some of them are going to feel better than others and depend on how you want your game to work so I'm going to start with really simple movement so we're going to make a we're going to make a really simple Sprite let's say uh 30 by4 40 and I'm going to say self. image. fill um I'm going to make him yellow did I put yellow in my colors I did not all right so so I've got some a yellow Sprite uh we need the the rectangle okay now one way we could do the movement is just like we did it in in the back in the schupp game where we had um velocity and the velocity is zero unless you push the key down and then the velocity is set to something so let's let's just start with that okay um so we have a VX and a VY right for the two directions and our update is just going to say VX equals z I'm going to just stick with X for now and not worry about the up and down movement and then we're just going to get check the key the key state to see which keys are down and then uh and then we can just see uh which one it is right so left would say VX equals minus5 and pg. K right uh would say self. VX equals 5 moving our Sprite X Plus = VX and y +al v okay you can already see how this is kind of nice having the player in its own little file um keeps you from cluttering up this and having a lot of stuff to scroll through right so all we need to do to spawn our Sprite now is in our new section we're going to spawn a player and we're going to add it to the all Sprites group oops and of course I have gone ahead and written uh pame somewhere because we abbreviated it abbreviated that to PG so we wouldn't have to do that okay uh and I'm making lots of typos today self. player it's always easier to type things when you're not talking at the same time so let's go fix that uh oops and then we want to run it okay so now we can run and we have our Sprite okay and it can move side to side um it's up there in the corner because we didn't give it a place to start but you see what I mean by the by the the moving right it moves to the right and the instant I let go of the key it instantly stops and that's okay but it doesn't feel very natural right because when you move uh when you something in the real world moves it can't instantly stop there has to be some deceleration right there's some slowing down until it gets to a stop it can it can deal really quickly or it can take a long time but it still has to do some uh change so what we really want to do um is add some better movement okay so first let me go ahead and put the um uh let me put the player at the center of the screen so that we can we'll be able to see this better once we start doing it okay um and we're going to put this at width over two height over two okay to do the next step and make our movement a little more realistic we need to talk about acceleration and acceleration is a measurement of how much your velocity is changing over time if my velocity is increasing then I'm accelerating so I'm getting faster and faster and the velocity is really just a measure of how fast your position is changing right we already have that our VX is telling it how many pixels to move to the right or left each frame of the animation so what we want to do now is add into that an acceleration that's going to tell tell our Sprite how fast its velocity is changing now to illustrate that maybe make it a little easier to uh visualize I have made this little demo okay so here's our here's our Sprite you can see its position is at the center of my screen right and its velocity is zero it's not moving its acceleration is zero right because it's not accelerating now if I press the right arrow key you're going to see the acceleration change and then you're going to see an Arrow showing its velocity so see I'm pressing down and now I'm moving to the right I press down I move to the left now you notice when I let go of the acceleration I keep moving right my velocity stays at in this case 5.6 and I keep moving that way and if I push it further I can increase my velocity in that direction now if I want to stop or if I want to reverse Direction I'm not going to do that instantaneously when I push it down you can see my velocity gets slowly back to zero and then switches to the other direction so I can accelerate and accelerate or I can change direction but I can't change direction instantaneously and the faster I'm going the longer it takes me to slow down and change direction right so there's a little bit of floatiness and we can control lots of things about how how quickly and how slowly you can accelerate um and things like that which will we be able to adjust but I just wanted you to see through this little demo maybe you can understand what we're going to be doing we're going to have a velocity that's that green arrow but we don't control the velocity directly the arrow keys control the acceleration and as you can see the acceleration on this little demo I set to 0.2 very small number but you don't need a big number right you just need to hold it down longer if you want to go fast and again we'll we can adjust that too hopefully that makes a little more sense um and then you'll see how it works when we start uh adding it into our code okay so how do we go about adding this into our code well this actually won't be too difficult um we're now going to have not just a position right which our location not just a velocity but also an acceleration now each one of those is going to have has an X and A Y component right and it's going to get really tedious to have all of these different um have all these different variables VX and v y we'd have to have an ax and an ay and it's a lot of variables one one thing we can do to keep uh keep things a little simpler is to use something called a vector now um vectors are kind of an advanced Topic in math that you might not have run into yet but for our purposes here I'm not going to go into the whole explanation of vectors I'm just going to tell you that a vector for our purposes is just a pair of numbers that have an X and A Y component so instead of our velocity being a VX variable and a VY variable it'll just be one variable that has an X and A Y component okay and the way we do vectors in pi game is there's something called uh pg. math. Vector 2 right two for two dimensional right X and Y but I don't want to type this whole long uh name out every time I need to use one so I'm going to basically assign the the vector 2 uh command from pame to the name VC so we can just use VEC for Vector okay um so what we would do then is in our player we're going to change to having a position Vector okay that's going to be a VC of width over two height over two and you'll see why I did this I'm doing this in a second we're going to have a velocity Vector that's just a VC of Z 0 and a acceleration vector that's also 0 0 okay so this is the first one is the X the second one is the Y so to start with our player is at this position has this velocity and has this acceleration okay now down here in our update remember the key press is not going to control the velocity the key press is going to control the acceleration okay and our acceleration should be zero unless we're pressing the key okay and if we're pressing the key then our acceleration dox is going to change now remember in my uh in My Demo I used 0.2 um I'm going to put 0.5 here for now okay so when we press the left Arrow key key we accelerate in the negative Direction which is to the left and we press the right arrow key we accelerate to the right but now we need to apply that acceleration to say how much does that change the velocity right and then how much does that velocity change the position okay so what I'm going to do is I'm going to replace this code here and I'm going to say the new so our velocity is equal to we just add the acceleration so our velocity gets the acceler the acceleration adds to the velocity and then our position we add the velocity plus half of the acceleration now this comes from you might recognize this if you've taken any physics these are essentially the equations of motion which you learn about in physics you can use to calculate any kind of uh object moving around um in the world um acceleration might be gravity that's how you would tell when something's falling um for our purposes again we're just going to use these to um to move our character I'm not going to go into the details of where these equations come from you're welcome to go look them up on Wikipedia or any other uh physics website KH Academy has a really good set of videos on this um if if you want to see how where these equations come from uh but you really just need to know the acceleration adds to our velocity the velocity and acceleration together add to our position and that tells us where our new position will be so our new position is now just going to be our I'm just going to put Center so we just put the center of our Sprite at whatever our position is calculated to be okay and that should do this we just go over here and we run our program okay now I'm accelerating kind of fast so I'm really zipping off the screen right but that's okay we're going to fix that uh in a second because I just want to make sure it works and you can see we're really floaty we can't sit still right um this would be fine if we were an outer space game because in base there's nothing to slow you down uh but this is going to be a platformer we're a person running on the ground so we need to have something that slows us down right we don't just keep moving forever and that thing that slows you down is called friction that's what we need to control both our the slowing down so that if you're not pushing a button you will Coast to a stop but also it will help us set our maximum speed so that we can't just keep accelerating and go ridiculously fast we're almost there I know the video is starting to get long but I want to at least add that friction in so we don't have that um super high acceleration and the and we don't uh and we can start coasting to a stop so here's what I'm going to do I'm going to make our lives a little easier here and in our settings I'm going to add a player properties section okay and so we're going to have in here the player acceleration right which we're using 0.5 right now we're also going to add in the player friction okay and the friction is going to actually be a very small number okay you'll see this little work just fine and and once we have this working you can go in and change that and adjust it to work the way you want it to work um I'm using numbers that uh I've tested before and had them you know work when I tried them out so um go back over here to to player so now our acceleration is just going to be player dot acceleration okay so what we called the player acceleration is oops I put a dot I meant an underscore right player acceleration is what we accelerate at and now before we figure out our new um velocity and position we need to adjust that acceleration by by the friction okay so our acceleration is actually going to be is going to change by our velocity basically the way friction works is the faster you're going the more friction slows you down so you multiply by the um uh by the by the friction player friction okay and actually the player friction uh should be a negative number right it slows us down forgot that there so if we multiply player friction times the velocity that'll give us our new acceleration okay and what that will look like now is see when I let go of the key see how I stopped so now I I can run to the side and then I stop I can run to the side and then I stop if I hold it down I will keep running but I also have a Max maimum speed now see how I'm not getting above a certain speed and I can switch directions pretty fast because I'm not going super fast but it's still not instant there is a a slight pause there but when I let go I I run to a stop now this works pretty well as a guy who is running on the ground right you can stop pretty quickly and we want that if later on you were to add you know an ice level or ice platforms then you would want the friction to be a smaller number right because then you would Coast longer and wouldn't come to a stop um so the last thing I will do now that we have that working is I'm just going to make sure that the player doesn't uh go off the screen I'm actually just going to have him wrap around okay so I'm going stick a couple comments here that applies the friction um these are the equations of motion right and then the last thing I'm going to do is after we figure out our new position I'm going to uh wrap around the sides of the screen and we do that by just checking to see if our um if our position is greater than the width then we set our position to zero and if our position oops position is less than zero we set it equal to the width okay and that should do it for this video we should now have a guy who can run we can control has some somewhat realistic mo mo uh motion and he wraps around the screen so we don't get lost in the nothingness okay so I'll see you in the next video in the meantime feel free to go over here and play around with some of these settings um you can see what the friction will change is both the speed at which you stop so how how quickly you you come to a stop but it also will affect your maximum speed so if you make this number smaller uh you can go faster but you also take longer to stop uh and then you can also change this to control how quickly you accelerate and that's going to adjust things too so have fun and I'll see you next time when we start talking about our vertical motion gravity jumping all that fun stuff