Pygame Tutorial #3 - Character Animation & Sprites

Key Takeaways

hey guys and welcome back to another YouTube video so this is gonna be the third video in my PI game programming series and in this video I'm gonna be going over character animation so on my last video someone did comment saying that they wanted to see some character animation and obviously I was gonna incorporate that into the tutorials but I am bringing it in a little bit earlier than we usually would so obviously if you remember from the last tutorial so I'll pull up what we had so far we had a little red square and he was able to move around the screen but when he got to the edges he'd be stopped and if you click space he'd do a little jump like that now this is really basic doesn't really look very good it just kind of cool because you can move him around but obviously we want to make something that looks better and uses a real character and real sprites now full disclosure I did not make any of these sprites I simply just went on Google Images and download a sprite sheet and I'll show you what they look like here if you guys would like to use other sprites and you don't want to use this character that's completely fine you can find your own sprites just make sure that they are the same size so these are 64 by 64 and that you have nine images for each of them I'm sure you can probably figure out how to make it work with different images or different size images but this tutorial is only going to work with these specific sprites I hope that makes sense so pretty much all these images that you're seeing right here I'm gonna leave a link to download them down below in the description you just have to click on that link and you can go to my github where you'll be able to download first of all this file if you want that that we're gonna be working on today the background image and then all these sprites okay so let's get on with the video so also another important thing is before we start we actually need to make a new folder so before if your game was on your desktop you need to move it into a folder I just called mine game and then all the images you're gonna put in that folder with your file like this just so they're all in the same directory you could put all the images on your desktop if you want as long as everything's in the same directory this will work okay so let's get into the code then so this is what we had last time we're just pretty much is basically moving around and jumping now the first thing we're gonna do is were actually going to delete a few things and this is just because I realized when I was making the first tutorial that we're kind of gonna move into a platformer game a little bit just to show you we might do some other types of games but we're gonna get rid of the ability to move up and down with your character so the only way we're gonna be able to move up and down is by jumping so we're just gonna delete that line right there that I deleted so we can no longer move our character up and down by just clicking the up and down arrow keys okay and now we're gonna need to set some variables so pretty much what we need to do when we are moving our character is we need to keep track of first of all what direction is our character moving are they moving and how many steps have they already moved now this is important because we need to know what frame or what picture we're gonna be showing on the screen so that we can display it accurately so we're gonna start with our first variable which is gonna be called left we're gonna set that equal to false and then we're gonna do right I set that equal to false low and then we're gonna do walk count we're gonna set that equal to zero now this is a common tedious part here when we want to load an image into PI game it's very simple but if you want to load a lot of images it kind of is tedious so I already have the code to load these images in I'm gonna put it down in the description below to save you guys some time I feel free to type it if you'd like but pretty much just I'm just gonna paste this in here and you guys can go down in the description right now just pause the video quickly and all of this here is gonna be there just simply copy it and paste it and now I'm gonna go over what this code really does so pretty much we start by making two lists so we have the walk write list and the walk left list now it is noted that since these sprites are pretty well identical just flipped from moving right to left we could just flip the PI game image if they're gonna be moving left but I just figured this would be easier for the toriel so we just have two lists so pretty much if we want to load an image in we just start by typing PI game image download like this and then the file name and the extension and is all in quotation marks like this now say for example your file is in a different directory then we have to do something called I game dot path Joanne I believe that's what you do something around something along those lines you can look it up if you guys want so say you want to put all your images into a folder well I really can't tell you canna then what you do is you spy game paths to join and then in here you're gonna put the folder so for example you'd put like data or something like that and then it would join that in you could also just simply type it out but if you get rid of this pygame type out that join here then you can do like I don't know pix /r one like that and it should load your file in so say you want to put them all in a folder then you just have to add this to the beginning of all the lines I hope that makes sense it's not really important for this video I just figured I'd show you guys alright and then we have our background image here which we're gonna replace with that black background it's just a really basic like grass kind of thing I just got it because I wanted to make other than block is the background and then we have our basic standing sprite right here image which is just gonna be our steel image so when the character is not moving or when they're jumping it's gonna show this ok I hope that makes sense you guys now we also need to change this width in this height variable here so since the width of our sprite is can be 64 and the height is gonna be 64 we're gonna change that to this now you'll notice the hitbox on the sprite is gonna be slightly larger than the actual sprite I don't worry about that we can figure that out in another video okay so now another thing we need to do down here is we're gonna get rid of some code here to just kind of clean things up so pretty much whenever you're doing making a pie game you really want to have all your drawing done in one area so it's not a good idea especially if we're gonna be drawing a lot of different objects to be drawing them inside of what we call the main loop so pretty much the main loop is our main while loop which is constantly running and as soon as we exit out loop the game adds so inside of our main loop here we don't want to be drawing anything so we're gonna copy this or cut this and we're gonna put it into a function now again if you guys don't understand a lot of the stuff that I'm talking about here in terms of Python I do recommend you go back and watch my previous videos just my Python programming tutorials maybe if you know a bit skipped like 11 or 12 where it starts getting into more complex stuff just because it is kind of a prerequisite and I don't want to go over how all these things work in terms of just basic coding so we're gonna create a function called redraw game window and it's gonna do exactly what it says it's just going to redraw the game window so in here we're gonna well actually we're not going to fill the window but I'll go over that in a second so the first thing we want to do in here is we're actually going to type global and then we're gonna global the variable walk count and this is just because we're gonna be changing this variable so we need to global it at the top here if you don't know what this means don't worry about it pretty much it just allows us to take this variable and make it a global variable because if we were to redefine it in here then it would be an instance of the variable inside this function and it wouldn't be seen outside of it okay so now instead of filling the screen with the color we're actually gonna fill it with a picture so whenever we want to put a picture on the screen in PI game it's pretty easy you just type wind lit and then you're gonna put the name of the picture so since we stored our background to picture in BG we're gonna do BG you know a comma and then a tuple with the position where you want to store it or where you want to place it so in this case we're going to place our background 0 0 and yeah now right now we're currently drawing a rectangle to the screen so we're gonna change that in a second to be the character to be the picture of the character okay so now the thing is though since we took this drawing code out of our main loop we have to make sure we call our function you can call this at the beginning or the end of the main loop I just like to call it at the end so simply redraw a game window two brackets and now whenever we want to change anything in terms of drawing we're only gonna do it in here so we're not gonna draw anything in this loop we're only gonna draw it in this redraw game window right here alright so now we have to get into actually animating the character because if I run the program right now pretty much nothing has changed except we have a background so when we're moving left what we have to say is now we have to make our left variable equal to true and our right variable equal to false this is just so we don't confuse the program we don't have right and left being true so yeah now if we're moving right we're gonna have to set it right variable equal to true and our left variable equal to false and if we're jumping actually we can leave them true false but now if we're not doing anything else we're gonna have to set them equal to false so pretty much we're gonna make this in L if now like that and then at the bottom here we're gonna put an else and rich messed up them both equal to false and we're gonna change our walk count which I'll show you in a second to zero so right left people's Falls and our walk account which is gonna count how many steps we've had pretty much is gonna be equal to zero okay so I know it might seem kind of confusing right now don't worry I'm gonna get into why we're doing all this stuff right ah and yeah okay so now that we know when we're moving right when we're moving left etc actually sorry one sec we have to change in here as well just so that once we click the spacebar we're no longer moving left and right it's gonna look weird on the screen if you see that and walk count equals zero okay so now that we know whether we're moving left or right or we're standing still we need to use that information to draw our character onto the screen so to do that we're gonna go inside of this redraw game window here and we're gonna get rid of this draw rectangle because we're no longer being gonna be drawing a rectangle we're gonna be drawing an image and we're simply gonna start by typing if walk count is greater than or side plus 1 is greater than 27 actually greater than or equal to we'll do that then we are going to set walk out to zero now the reason we're doing this is you'll see in the next thing if we were to try to have our walk count go greater than 27 we're gonna run out of we're gonna run into an index error in here because we have nine sprites and I'm planning on displaying each sprite for three frames and we're gonna have a frame rate which I'm gonna change of 27 frames per second I hope that makes sense okay so now we're going to do another if statement we're gonna say if left this means we're moving left then we're gonna want to draw our character left so we're gonna do win golf lit again the cell you draw all your images in PI game we're going to use our walk left list that I created up here and now we're gonna index the correct image so to do that we're gonna have to use our walk count variable like this but instead of just writing walk count we're actually going to integer divide it by three now what integer division does is a just excludes all the remainder all the decimals so if you had 1/3 for example our integer division by three it would be zero if you had four integer division 3 it would be one I pretty straightforward we're going to increment our walk count variables so plus equals one like so now we're gonna do an Elif so if we're moving right we're going to flit to the screen our walk right list with our walk out variable like so walk count plus equal one and if we are not moving right when we are not moving left we must be standing still or jumping so in that case we are just going to pull it's hard character now I notice I forgot to put the tuples in so I will do that now we're still gonna keep using our x and y variable that we did in the first tutorial for moving just because this is gonna keep track of where our character is and it's still going to work even though we're not drawing that rec ting and then we update the screen and yeah that should be working now I'm just gonna go through here and just make sure that I did everything correctly I don't want to have to look through this after yes so there's actually one more thing I think we need to change oh wait no that might be good okay so now we actually need to do the the frame right sorry so I didn't go over this at the beginning but pretty much frame rate is how many frames or how many images you see per second so in every game for example all the shooting games most of them run in like 60 FPS which means you have 60 pictures every second and that's pretty much how video is work if you don't if you don't know it shows a series of images very quickly so that it seems like they are moving but in reality it's just a ton of different pictures running at a frame per second so in our game we're gonna do 27 trades per second just cuz that's how many sprites I have I know it's a weird FPS but let's just forget what we're gonna use so now we need to define something called a clock variable or like a clock speed in PI game so we're gonna do clock equals PI game got time clock like that now this is simply going to allow us to change our FPS in the game now we're going to be a clock dot tick and then twice up and that's just gonna set our FPS to 27 now let's try running the program and see if everything's working so you can see we have our little character here and he moves around the screen like this now just ignore the fact that you see his little feet all over there just cuz the background is not big enough so it's not drawing you can see when he jumps he jumps up like that and that is the character animation so if we want to fix this little thing down here the issue is just that our backgrounds not big enough so we're not actually drawing over the feet of the character so we can't change the height of the screen here to 480 we're gonna change our characters position to 400 and now everything should be working yep so now you can see our characters here he moves around the screen like so and you can jump and everything looks pretty good so yeah bad it's been the third tutorial in my pocket ease in the next one I'm not quite sure what we're gonna do but we're probably gonna get into object collisions so for example right now this guy he can't go off the screen because he's colliding with the walls but what if we would have a block in the middle of the room well he wouldn't want him to be able to go over that and maybe jumping on top of the block and yeah so if you guys enjoy the series and you want to see the rest of the videos please help me out by leaving a like and subscribing and if you have any questions or anything that you want to see in other tutorials or other videos let me know in the comments down below [Music] you