Pygame Tutorial #2 - Jumping and Boundaries

Key Takeaways

hey guys and welcome back to another YouTube video so in today's video I'm going to be doing the second video in my PI game programming series so pretty much my game is just a variant of Python or not a variant it uses Python and it's just a module that you can download from the internet which pretty much allows you to make games now I hope all of you that are watching my second video here watched my first one I do apologize as I'm making this video quite late two months later than my first video to be honest with you I just forgot about it and I wasn't really doing too much YouTube at that time so I made that video took a break for about a month and now I'm coming back making this second video so I do apologize if you guys have been waiting for a while or if that's frustrating when you've watched the first video and now you're not able to see the second one as I've been there when I'm watching series as well but I hope you guys stuck around and you're watching this one and I am gonna be continuing on with the series and posting at least one or two videos per week for this PI game series I'm hoping to do at least ten episodes or not episodes I guess like videos where I get into more advanced topics so in today's video like I mentioned the last one I'm gonna be talking about jumping and constraining the area in which a character can move so pretty much if you don't remember I'm gonna run the program here just so we can get a quick refresher on what would happen last time is we made it so we have this little rectangle moves around pretty cool but it can go off the screen so we obviously don't want this we don't want our character to be able to move off of the screen so there's something we need to do to fix that now it's actually quite a simple fix and I'm gonna try to explain to you so that it makes sense pretty much if my mouse is the character so actually let's just run the program again just we can see it our our character here is coordinate about here is probably about 250 250 right because it's in the middle of the screen and our screens 500 by 500 now the coordinate of this character actually stored in the top left so whenever we draw an object or whenever we create an image or anything on the screen the coordinate is always put in the top left now a lot of like games and stuff will do the coordinates in the middle of the character and in pygame is just in the top-left so it's what you note so that means that if we're up at the top here our character right now has a coordinate of all right actually it's probably better to do it in the top-left here our characters coordinate right now is actually 0 0 when we're in the top-left powering off this is how we're gonna check to make sure that our character can't move off the screen and it's gonna make things a little bit complicated but hopefully you guys will understand it ok so here what we have to do now is before we move our character left so before we change our characters exposition we subtract the velocity we have to make sure that when we do that it's not gonna be off the screen so we're just gonna do a simple and here so instead of writing another if statement which we could do we're gonna do an and I'm gonna say and so and if the character exposition is greater than our velocity so this pretty much means since we're moving left we have to make sure our character's position is greater than 0 because we don't want them to be moving off the screen um but if we did that you would actually see that we would allow the character to move negative 5 pixels backwards because our velocity is 5 and if they are perfectly at the position 0 then they would actually be allowed to move backwards 5 pixels which we don't want to allow to happen so we want to make sure that before we actually subtract 5 we can subtract 5 without having their position be less than 0 hope that makes sense and now if we're moving right this is where things get a little more complicated we're gonna have to make sure is X is obviously less than the width of the screen so the width of our screen is 500 I'm just gonna punch it in here because I'm gonna keep using 500 but typically you would probably want to put like a like a screen width variable up here which equals 500 or something so that that way if you ever change the screen width it would automatically change here and you wouldn't have to go back in your code especially if you had longer code and change all of the 500s to like 600 or whatever you change it to just that's just so much to note but you'll see here if I run the program and I've just done less than 500 what's actually gonna happen is our character would eventually get to the right side of the screen is actually allowed to move off of the screen now you can see by simply pressing the left arrow key once it moves back and that's because it's allowing our character to move off the screen but only to position negative 40 now the reason that's happening is because our character is actually still on the screen technically if you're looking at the top left because it's allowed to move like the top left is allowed to go to 500 now if we want to prevent this we want to make sure that the character looks like he's not moving off the screen we just need to subtract the width of the character so when we subtract the width of the character here this now moves our imaginary border line back whatever the width is so 40 pixels so that means that the art the position of our character is not allowed to actually move past 460 which will make it appear as it's not moving off the screen sorry I'm kind of explaining this kind of complicated it's really not that hard to understand it's easier if you just visualize it yourself kind of so you can see now we're actually not allowed to move off to the screen like that now there is a little black bar there and the reason there's a little bit there's like 2 or 3 pixels there it's just because when I first placed the character in on the screen I didn't put it an even number so we're at like 3 right now but since 3 minus 5 would be like negative 2 it won't let us move backwards anymore you can fix up by just changing where you initially put the character so if I change like the Y and the X then it would work so if I change this like 450 should work okay so now up and down following the same pattern as left and right except we're gonna be using the Y now so we don't want to move up if Y it's gonna be was it less than the velocity and then downwards and Y is greater than 500 minus the height of the character minus the velocity we're gonna be moving by okay it click up five and then you can see one second because I moved our character too low on the screen having issues allowing this back up higher and you can see now we can move left and right and obviously we can't move up and down because I made a mistake okay so Y is less than the velocity if Y he's great offend the velocity and y is less than this sorry about that guys so now we're allowed to move up and down and you can see if we get to ball on the screen it won't let's move any further and if we get to the top of the screen we cannot go any higher than not so we've successfully allowed ourselves to be constrained inside of this box now this works this is something that I use all the time whenever you're making a game so it's very important that you do this at beginnings of your characters aren't going off the screen alright so now for the next part of the tutorial I told you we're gonna be doing jumping now just a warning the jump code that I like to use is kind of complex so if it's confusing don't worry about it just kind of copy it into your code and try to understand it later this is a more complex way of doing a jump but yeah it's the way that I use so I may be gay so the first thing we need to do is we need to declare a variable so we're gonna make two global variables one it's called is jump and this is just going to indicate whether our character is jumping or not and then we're gonna create another variable we're gonna call it jump count I'm gonna set it equal to ten I will get back to those variables in a minute now obviously we need to know when the user wants to jump so we're going to put another thing in here and say if keys and then tie game dot okay underscore space that's the code with spacebar so that means that that key being pressed down then we're going to trigger our variable is jump to true like that now the thing is though we have to think about how a jump actually works so obviously this is not perfect but a jump kind of works like a parabola so you can think of it as you start you jump upwards with an acceleration you get faster as you jump up higher and then once you get to the top you have like a hang time or air time for where you're at a position with zero acceleration for a certain amount of time and then you start moving slowly downwards you can your acceleration and you're moving faster downwards at the bottom hope that makes sense so what we're actually going to be doing is using um like a quadratic function to model our jump now if you don't know what a quadratic function is it's just something squared pretty much this isn't math class but we do use a lot of math and computer science so now what we have to do is obviously if we're jumping we want to make sure that we're not gonna be able to move up and down so when you click that space bar if we no longer want to allow our user to move upwards or downwards on the keyboard we also don't want to allow them to jump again if they're already in midair so to do this we're gonna create another if statement which is gonna think and capsular encapsulate a few of these things or I just messed up that word so we'll just say if not is jump like that go on this go outside the brackets we're gonna tab all this inwards and then we're gonna put an else statement here and this is what's gonna happen if we actually are jumping now this is all good now we need to work on what actually happens once you hit that spacebar so pretty much we want the user to be able to move up and then down now we are going to allow the user to move left or right while they're jumping just because you can do that in real life like for example if you're long jumping you're moving forward then you jump so that's perfectly fine and we'll let them do that now what we're gonna do here is we're gonna do we're just gonna do another if statement here so we're gonna say if jump come is less than or sorry is what is greater than negative ten now there's reason we're using negative ten I'll explain that in a second or greater than or equal to actually then we're going to do it helps down here and this is pretty much gonna mean that our jump has concluded if we reach this else statement and in this case we're gonna make sure that our users no longer jumping so that he is allowed to move up and down and he's allowed to jump again and we're gonna reset our jump count variable back to the initial state of the temp all right so now inside of this jump count here what we're gonna do is we're gonna move the character up by certain amount of pixels now like I said before at the beginning of your jump you're moving slower and then as you're on the way up you're getting faster and then you hang and then you move down so in order to do this what we're going to do is we're going to change our players Y position or characters Y position race you can do Y and then plus equals or minus equals cuz we gotta move up in piking minus equals and then we're gonna do whatever our jump counter is gonna variable jump count multiplied or squared like that now what's actually gonna happen here with jump count is after we do that we're gonna look decrement I think it's what's called jump count by just subtracting one from it so this means we're gonna slowly move down so we're gonna have 20 positions in there character is gonna be it so on the first iteration here we start at ten all right that means our Y is gonna be moved by 10 to the power of two all right so it's gonna move ten and time to the power of two so two million one hundred pixels and then on the next one it's gonna move 90 pixels eighty pixels so on and so forth like that now because that is a lot of pixels we don't want to move that much I'm gonna do a little bit of multiplication here just so that everything is kind of moved down a bit so I'm just gonna multiply it all by 0.5 is the same you can actually do this you just divide by two as well it's the same thing I just like to keep it consistent with multiplying so we're gonna do multiply by 0.5 and let's just see how this works right now all right so you're gonna see what's gonna happen here we're gonna jump it's gonna stop and it's gonna go up again now the reason this happens is because we are squaring something so the whole reason we wanted to use a negative variable is so that it would follow the like the quadratic formula right so 110 is the same as negative 10 in terms of the position so what we need to do here is once we move up we actually have to start moving our character downward now to move our character downwards we have to multiply it by a negative number so that when we're subtracting were actually end up adding that value if that makes sense you guys so we're gonna make another if statement here inside of this little jump count loop we're just gonna say if jump count is less than zero so this pretty much means that jump count is a negative number what we're gonna do there is we're gonna set a variable called neg equal to negative one now up above here so this means if well we're always going to do this we're always going to set a variable to one now pretty much what's gonna happen here is if we're on the negative side of our loop that means now that we're gonna have this we're gonna set neg to negative one and we're gonna multiply by 9 q so that we will start moving downwards so pretty much once we get on the last half for a jump we're gonna start multiplying all this by negative 1 which is ultimately gonna move us downwards and if we're on the first part of our jump nothing's gonna happen because there's multiplying everything by one all right so now we're gonna hit I'm gonna say we're gonna hit f5 again and let's see what happen so we can move move boom jump around like that and we can see that our character jumps around like so and yeah so this has been kind of a complex tutorial I know I went pretty fast if you loved this stuff if you guys have any questions again just leave a comment down below I'll be sure to answer that and the next video in this series should be out in the next 2 or 3 days don't hold me to that but it'll be out soon so you won't be waiting for a super long time you guys want me to continue with these series or maybe start another series where I do other cool Python stuff let me know in the comments down below and again with this jump code here a lot of you're probably saying like oh this isn't like this isn't like a real jump whatever you can alter this in different ways the formula that I'm using it's just a really basic quadratic formula so if you were to change this and alter this in different ways then you get a more realistic jump which I can get into in another video if you guys would like so yeah if you guys like the video and you enjoyed please leave a like and subscribe and I'll see you again in the next tutorial