Pygame Platformer Part 10: Character Animation (part 1)

welcome back to game development of plugin we're continuing work on our platformer game and in this video we will start talking about how to animate our little rabbit character that we added in the previous video okay in the last video we added graphics for our player so I'm using the little rabbit sprite here and so now we have the rabbit just standing still is our is our sprite right which is fine and it looks okay but obviously we could add some more personality and some more and make it look a little better if it had a little bit of animation to it and if we look at the we go over here and look at the sprite sheet there are a bunch of different frames of animation for this rabbit alright so we have the walking which is in two parts which is this one and this one alright so stepping so if you animated but if you were to animate between these two would look like the rabbit is walking and then you flip them in the other direction if you're walking in the other direction we also have the idle animations we're using this one right here right now for standing there's also this one right here so the ears come together and the feet go up a little higher so then it looks like it's sort of bobbing in place and that's your idle animation meaning what happens when you're sitting still and not moving and then we also have this one here which is what we you would use when you jump up in the air and they're all listed over here in the XML under the bunny one names they're two frames of walking we have our jumping ready and stand and so we want to add all of these different frames in and basically just switch the image of our sprite at the appropriate time to the correct frame so here's our player sprite and this is where we're going to want to start changing all of our image codes so first thing we're going to need a few variables to keep track of things so we know what frame to use at a given time so we're going to make a couple of variables here one called walking so that we know whether we should be showing the walking animation or not when we're moving we'll make one called jumping so that we know whether to show the jumping frame of animation and then we're also going to need a variable to keep track of what frame we are on for those animations that have more than one frame like the walking animation has two frames so this will be 0 or 1 if you have an animation that you're using has more frames of animation 4 or 5 or whatever this will work the exact same way this will just keep track of which one it's on and the last thing we'll need here is we're also going to need a variable to keep track of what time we made the last change and that will allow us to set the animation speed right we don't want to change the walking frame every frame of the game because that would be one sixtieth of a second and it will be too fast so we want to space out the frame rate of the walking animation so that it looks so it looks right so if we keep track of when we last made a change we'll know whether it's time to make a change to the next one okay and so now we have to load all the images just like we did here to get the one we're going to have to get all these images out of the sprite sheet and there's going to be a bunch of them so what we're going to do is we're going to just group those all together in a new method called load images okay that way everything's a little bit more organized and we don't have to clutter up our in it anymore with a lot more things so now we want to load all these frames and so we have basically three animations we have the standing animation which has two frames in it we have the walking animation which has two frames in it and we have the jumping animation which has one now if you're using a different set of graphics you went and found a different character with more frames of animation you might have more than that plus the the walking one needs to have the opposite direction as well we have right or left so we need to load all of those things okay let's start with the two standing frame so so we'll make those that's going to be a list because we have two of them right one of them is this one so we're going to put that in the list and then the second one which we'll also put in here just has some different numbers so stand is the one at 614 1063 so we want the one at this one so we're going to grab this one and put this one as the other sprite that we're going to load like that a comma okay so those are our standing frames and now we need to assign the walking frames now we have two of our two directions right so we need to look at this sprite sheet again the walking frames in the picture here are going to the right so those are the ones we're going to use without any changes so we're going to use we'll call this frames are I've left as well we're going to we're going to paste in a get image command so I'll just copy that from here and then we know we're going to want to just change the locations so walk one is this one and then we also have block 2 which is going to go here and we can again grab block twos and actually grab the numbers for that one and then we'll have those two so now we have the two walking frames for going to the right going to the left is basically going to be the same thing we just want to flip them right so what we want to do is take each of these two images and apply the flip transform to them okay so we'll make a walk frames l okay that's going to be a list and then let's just look at the ones in the walk frames our forgot my in so we're going to just go through each of them and then we're going to append the flipped one to the left facing list so what we want to do is say wall frames L dot append a game dot transform dot flip want to flip that frame and then the way the flip command works is you can flip something either horizontally or vertically we don't want to flip horizontally and not vertically so depending on which one of these you said to true or false the first one is the horizontal flip the second one is the vertical flip so now we'll have the two I just notice I spelled transform wrong we'll have the two frames stuck in there and the left list and then the last one we need to load is the jumping one and the jumping one is not an animation we only have one oops we only have one frame for sort of jumping if you had an animation that had more than one frame you could load that here just the same way but we're just going to grab the jump one here maybe we'll come back and add the hurt one later if we if we add that so this is going to be jump frame and this is going to need to have a get image command and fix the formatting and there we go so now we've got all of our images loaded that we want for our character now we can go back over here and our starting image we can set that to the standing frames number zero that'll be loaded because we call load images first which goes down here and does this oh and I just noticed I left out itself there okay so when we run this we should just see the exact same thing we should just load our normal guy oops of course I typed hi game didn't I PG and so now we're going to load that first image right and we have this standing right now so now what we need to do is if we're standing still like this we need to alternate between the two standing frames and then if we start moving left or right we're going to alternate between the walking frames for that direction so let's just get the idle animation the standing animation working first so here's our update and our update we're going to want to go through this you know handles all our movement we're going to want to go through and figure out what frame we need to be on now that can be kind of messy too so what we're going to do is we're going to make another method called animate and we'll let that handle which frame we want to use that'll just go through and pick out you know depending on what we're using now remember I said we had this last update right that's going to be keeping track of what time it was that we changed and that's how we're going to know whether it's time to change to the next one in the list so the first thing we need to do is figure out what time it is right now okay and that will get us how many ticks of the clock it's been since the game started since we initialized everything and now we need to know if we're going to show the idle animation that means we're not walking and we're not jumping so we'll just say if not jumping and not walking and those are both false right now because we set them to false to start with so those will be true at the moment anyway so if now - the last update right if that amount of that will tell us how long it's been since whatever timestamp last update is if that time has been greater than and we're going to try 200 milliseconds this is in milliseconds here and we'll see if that works and then we'll play around with it once we see but anyway if 200 milliseconds have gone by since the last update then we want to update so we're going to set the last update equal to now and we're going to loop and we're going to set the current frame equal to right we started on loops scroll up here we started with current frame set equal to 0 right so we want to add 1 which should get us to 1 but if we were on 1 and we add 1 we don't want to go to 2 we want to wrap around so what we want to do is say self dot current frame is equal to self dot current frame plus 1 and then we use that the remainder function and then we say whatever the length of standing frames is so if you have two frames in there it's going to get you the remainder when dividing by two if you have three if you have 4 so on so now we can set our image equal to standing frames whatever frame we're supposed to be on okay and that should let us animate our character so let's see what happens oops and once again I'm defeating the purpose of us abbreviating things if I'm going to keep typing out by game when I say it out loud so let's fix that now we can run again and see okay now we're almost there but look what happens we have two things we still have to fix one is we did not set the color key on the frames but the other is you see how the feet are sticking downwards so it's not going to look like our character is jumping up and down it's going to look like it's centered and then the frame is the feet are just poking downwards so we actually need to relocate our rectangle a little bit so that the whenever it alternates frames the rectangle bottom stays the same I also think we can slow down the animation a little bit too that's a little too fast okay so let's go over here and change this to oh let's say 350 and then up here in our loading right we're setting the color key we had set the kaki originally to the first one but we need to do it to all of them right so let's do let's take that out and in our each of our frames we can just say we can just say and then we just set frame okay and we'll do the same thing with the frames are and then we won't have to we won't have to do it with actually we already have a loop we can do use we could do with this loop we could just say we could just copy this and do that okay and then we need to just do it with the jump frame so there we go alright now let's take a look and then maybe you can see what I was talking about with the feet there we go so see how my feet are going down into the ground so it doesn't look like I'm standing on the ground I need to look like I'm bouncing up and down a little bit so whenever we change oops we're going to sprites whenever we change which frame were on we're picking the new image we need to change our rectangle okay so we need to take our current we basically need to keep track of where the bottom of our rectangle is okay so bottom is equal to self dot dot bottom and then we need to get a new rectangle we just get the new rectangle for the new frame we switch to and we set the bottom equal to that bottom that we hung on to from the last time and that will look like this there we go so there my guy looks like he's idling and just standing in place while I'm not moving now obviously he's going to keep doing that no matter what I do at the moment because we haven't done the jumping or the walking frames yet but you get the idea we'll do the same thing with walking and standing still so let's stop the video here we've been a little over we've been over 15 minutes here so and in the next video we'll finish up the character animation by adding the adding in the jumping the jumping animation and the walking animation for when we move alright thanks for watching you