How to Create and Animate Sprite Sheets in Python Using PyGame!

what's going on you guys welcome back to the channel in today's video i'm going to show you how to animate a sprite in python using pygame we'll do jumping crouching left and right movement and idling movement and we'll cover it start to finish [Music] so i'm super excited about today's tutorial um we've done a ton of python and pygame tutorials on the channel and something we don't do in most of our games is add this like multi-layered animation where you have like a character that actually changes states as you do these different things and it's a super cool super useful piece of really taking your games to the next step it's just most of the games we've done this channel have been kind of basic introductions and so this one is really going to cover um a super critical piece of making like advanced games and what i really like about this one um is it's actually not too hard it's just a little bit time-consuming on the art side of things but we'll talk about ways that you can bring in outside art and things like that if you don't want to create every frame on your own but we'll also talk about how you can do it on your own if you want to as well so let's just go ahead and get started so you can see the uh character that i'm gonna be using is one i actually drew all of these frames and i don't want any mean comments about how terrible my art skills are because i know but i drew this little alien boy and i will show you how i did that so i used a free online tool called pixel art p i pixilart.com and you can just come in here you can choose any size canvas you want and you can it's basically like paint on the computer and they have useful tools and you can create all of these frames and every time you add a frame it can give you you can kind of see in the background it'll give you the previous frame so if you want to draw something referring to a previous frame that's how you can do it so that's kind of how you take like walking movement and you make sure it looks sort of like the previous movement so because this isn't actually a game i'm releasing it's just a tutorial i wanted to show you i have two frames of what the guy looks like idling so it's just between these two and i have this frame i'm going to use while he's in air and basically all i did for this one is i moved him up a little bit pointed his feet and his arms kind of out like he's falling and then in the next frame i have him crouching so i just kind of squashed him down here a little and again this is where you as an artist or you can even outsource the art to someone else but this is where you want to spend the time for this kind of thing because once we get to the python pie game piece it's not too bad but this is what's called creating basically your sprite sheet or your different um key frames for your character's animation so these are him walking these two and i'm just gonna flip those same two frames so if you use pixel art or a similar thing you can just download everything you have and if you don't want it as a pre-built gif gif whatever don't come after me for pronunciation then you can go to export frames and you can do all and it's going to give you a zip folder with all of these one frame at a time and if you have a computer that automatically puts like a white background even though they shouldn't have any background when you just draw them like this there's also a website you can go to that's just remove bg.com and you can upload the photos with a background and this is going to automatically convert it to no background image and then you can download it um there's also if you want to it's called i believe open game art so yeah opengameart.org is a great website if you don't want to do the art piece of your game on your own you can just come in here and you can type and search for things like you can just type in sprite sheet and you'll be able to get some sprite sheets that people have just made and made for free if you are going to release the game make sure that you click on one that specifically says like for profit royalty free most of them will specify some of them are just here so you can use them on personal projects but then some of them they want you to like let them know or give them credit if you monetize just make sure you read the whole description before you release anything but open game art is a great site if you don't feel like drawing your characters and you can tell i'm not that good at art so maybe i should have gone with open game art but i wanted to show how you can make your own art as well so what i did then is i downloaded all of my frames and i put them inside of this assets folder so i recommend you do this when you create a new project make a folder call it assets or frames or images or something and copy every uh key frame every image that you need in there and when you click on them you can actually view them in python if you're using a good ide i use pycharm i like it a lot but most ides you can view images right inside of your development environment okay so let's go ahead and get rid of all of this code and we'll do it together so um if you want to start by importing pi game and import and doing pygame dot init to initialize the pi game module i always import random when i make new games you don't actually need this just for our tutorial today but most games you're going to want some type of rng to kind of uh kind of randomize change the experience every game that's a super useful module if you're putting any kind of ai or decision making computerized stuff in there and you don't want to be fixed and hard coded but okay so first thing is import pygame pygame dot init and just really quickly i'm going to blast through setting up the game board there are some more in-depth tutorials on the channel if you need to know where all of this is coming from and i have covered it in a lot of tutorials and the real focus of this one is um the animation not just the game setup so i'm gonna assume you know kind of how to set up a game and speed through this a little bit i always create a lot of these variables up front just so like fps a few colors um just so i don't have to do any hard thinking when i get to actually needing them in the game so set up the screen by doing pygame dot display dot set mode and then just give it a width and a height and i always put my width and height in variables so i can just address it like that but if you want to hard code it then just make sure your place where i put width and height with your actual x and y dimensions and then uh it's a good idea to just set caption at the beginning too just with the name of your game um since my little guy is an alien boy i'm gonna call it alien boy and then always especially for animation you need to have a clock so you want pygame.time.clock you want to store that in a variable with some kind of logical name i always call mine timer and then we're going to just do that so that we can get the so that we can get the screen opened up and then we'll start adding stuff to it so now let's make our main game loop running equals true while running and then we're gonna do a few things every time timer.tick at the frame rate at our fps and then screen dot fill oops these should be indented okay and then screen dot fill background color will make it gray um all right now let's go ahead and add event handling just so we have an exit condition so if event dot type is equal to pi game dot quit then running is equal to false and actually we need to put this all inside of a event loop which is going to be for event in pygame.event.get so pygame.event.get is going to go out and get everything happening on the computer in the system on the keyboard everything and then if event.type is quit then we'll set running equal to false and then all we have to do after that is pygame.display.flip and by game dot quit okay and so if i run this it should give us not oh yeah you don't need parentheses after that quit there we go so we just get a screen with a gray background now since we're going to put a player on here let's make a floor real quick let's just go to where we filled the background so we fill it with gray let's make a line first floor line and let's go ahead and do pie game dot draw dot line screen let's make it a black line and then we just give it two things we give it a starting position and an end position i'm going to go with 0 to 300 or 0 300 for starting position and then width 300 for ending position and we'll make this a thick line so that's about where i want the floor to be that's going to work for the game i think it'll be fine you play around with the style all you want and then we'll draw the actual floor as a rectangle so pygame.draw.rect and we'll put that on the screen as well and then we give it uh we'll make this floor white and then we are going to give it four arguments for a rectangle so starting position and we'll do 0 300 and then how wide we want to be we'll do the whole width and then how tall we want to be we'll make it the height minus 300 and actually draw this floor before you do the line for your floor and that'll give you where you want where you want it yep so i like that and the reason i did that now is uh we're going to start drawing the character onto the screen and this is um you know the important part so what we're going to do is we're going to make the player and the player is going to be an image so player equals pygame dot image dot load and that's what you need to use pygame.image.load and then you tell it what image to load so if we had a like one um if we had one frame and that was what it was gonna look like the whole time then you would just do assets and then backslash um or forward slash assets forward slash and then the name of whichever your frame was so let's say it was going to be idle one just so we can get something on the screen forward slash idle one png and then um you could just do it like that and um that's gonna that's gonna define the image that the player is gonna be using but then you have to actually blit it onto the screen so um blit is block transfer i think that's what it stands for but it's basically what you have to do in pi game to draw things that aren't using the pygame dot draw method so if it's not a rectangle or a circle or um or a line if it's something like text or an image you have to use screen dot blit and then you give it the name of the object it's drawing onto the screen so in this case we called it player and then give it an x and y so just for now i'll put it at 200 200 just so we can see what's going on here okay and so you can see my little guy there um that's cool we got an image onto the screen and it's already it's kind of fun but let's do a couple things just so you can see some useful uh tools in pi pi game we'll do pygame.transform.scale and this is going to be just what it sounds like we are going to scale that up a little bit because it obviously it looked pretty small and you can also change the size of your objects outside of python like you could edit them in paint or photos or whatever but you can scale it right in python so i just changed it to 150 150 let's go ahead and see and you can already see it's it's much bigger it's more of a feature in the game so that already looks a little bit better and now let's make player x and player y variables in any game where you're going to be moving a character around you're going to want to draw them with x and y coordinates as variables because obviously when we go left we're going to be modifying the player x coordinate and when you jump uh or crouch you might be modifying the player y coordinates so we'll go ahead and make it 200 200 but we'll make those variables um but uh so that's all we need to do for now um but we also obviously aren't just using one we aren't just using one picture the whole time so what i'm going to do is i'm going to create a list and i'm going to say frames equals and i'm going to make this empty list but now i'm going to start adding the assets to it so um i'm gonna come in and this is gonna be a little bit tedious so feel free to speed it up or skip forward if you want but i'm gonna make a list with all of my images in there so i have idle one i have idle two i have crouch um i have jump and also if you name these things sequentially like if you had um idols 0 through 10 you could use a for loop to add them to the list something like that so you're not just typing away all day that's definitely valid i'm just i only have like seven images so i'm going to do it this way left one left two and you'll see why i want these all in a frames list in just a second if you don't already know um it's it's gonna be super easy when we need to change from one state to another all we do is we change the index of our frames list that we call so let's go ahead and say okay i always put a new line character i guess it doesn't need it so now instead of this naming it here we're going to say frames at and then i'm going to say active frame and so i'm going to make a new variable called active frame and when i start up my game i'm going to call it i'm going to set it equal to zero so basically that first idle image is going to be what loads in in the beginning of the game so nothing's changed yet but now i can change active frame throughout my game and you can see this is he's not jumping so it's a little premature but this is all we have to do to get the um to get the character to update is to update the active frame variable throughout so that's all we have to do there and now let's actually start creating the animation so if we go down into our um if we go down into our event handling where we have the event type pygame.quit we're going to do a new one for if event.type is equal to and this time it'll be pygame.keydown so that's when you press a key and you're holding it down and we'll start doing some checks so we'll say if event.key is equal to and the first one we'll do is write we'll say pie game dot k underscore right and then we'll say so if that's the case we'll set mode equal to one and let's create a new variable um called mode and it'll start out as zero um and so i'll say right in here uh zero equals idle 1 equals right we'll say 2 equals left 3 equals jumping and 4 equals crouching and we'll use this mode variable because in a lot of the states in going left and going right and in idling we have two states so we can't just use active frame super easily we can't just say like if i'm going right set active frame equal to right because it's two different frames so we're going to create a function to actually check what mode it's in and use that mode to animate it and then that'll set the active condition so let's keep doing that so if we're going right then we'll set mode equal to one if we're going left we'll set mode equal to two um let's see if we press down that'll be what crouch is and i think we said four for crouching so if you press down we'll crouch and then i think k i think space is actually better than up um for jumping but you can make it up if you want you could also do wasd instead of uh the arrow keys in space if you wanted um but i'm gonna go with that so we'll just do this for now so that i can get um so i can get the different modes changed and then what i'll say is if event because obviously we need it to go back to idling so i'll say if event.key is equal to pi game dot key up and then if that's the case we want mode to go equal to zero so this is um if you were going right or you were going laughter you were crouching and you let go of the key then um it'll release and obviously you may be thinking ahead here and saying well jump's going to be a little different and that's true we're just trying to get to a mostly functional animation and then we'll start tweaking it okay so now let's create a function below this player blit uh or actually let's do it above and we'll call it update player so we're gonna want to get active back from a function that we call update player and what we need to do in there is we need to send in the mode and we also want to create a variable called count so we're going to we're going to count how long it's been in one key or another while it is um while it is in various states so we're going to need a new variable called count and let's go ahead and make the update player function so define update player and we said we're passing in two variables we're passing in mode which i'll just call mod in this one and i'll say counter so typically it's best to use different variable names inside of functions then they exist in the outside world it just clarifies things and then when i make a function if i already said it's going to be returning things i like to return them right before i even write the code so i don't forget to put return statements in okay so first thing we'll do is we'll say if counter has gotten greater than or equal to 60 so we'll reset what state you're in every second and these are again the the specific numbers i put in for the counter and things like that you can play around with to change the speed of your animation and things like that um but now let's go ahead and start saying stuff so if mod so if mode is equal to zero that's idling right but we have two idle images so what i want to do is say if the counter is less than 30 so every half second then i want to set active equal to zero so that's idle one right but then if counter is greater than or equal to 30 and counter is less than 60 then we want active to be equal to one so think about their key indexes in here idol one idol two is zero and one and what this is going to do is while we're idle every second it's going to cycle through those two things um okay but now there's a nice way we can simplify that expression and indentation is not a multiple 4 uh oh yeah i guess i had everything over indented that's okay we'll fix that real quick alrighty um if you're using a good ide sometimes it can format things for you okay and we can steal this uh pretty nice code here from uh mode 0 and we can use it for modes one and two because those are the other ones that get animated so here's if you're going left or you're going right then we're going to the only difference now is we're not using um is we're not using 0 and 1 for our active keys anymore if if it's right we want to use 0 1 2 three four five six and seven so right is one and we'll oscillate between six and seven and then if we're going left we wanna go between four and five okay so that should handle uh left and right and then the next two are just gonna be really easy because if mode is three then we are jumping and we put jumping in actually spot three so that one's a happy coincidence and then we'll say if mode is equal to four which is crouching and then this one is in spot two in our keyframes so uh this is how we handle flipping between the different keys in different modes and then what we want to do is um no matter what we want to add one to the count and that's how we make sure that we basically go through this entire counter we go through this entire function every second basically we go from 0 to 60 every second because we're controlling the frames per second and so this is going to tick or run 60 times per second so let's go ahead and just run that see what we did yet event has no object key i don't believe you if event type is pygame dot key down um oh this needs to be of event.type is pygamekey up there we go okay so he's just standing still um and we'll cover that in a second but let's see if we can go left or right and i cannot all right let's uh do a little troubleshooting okay i'm a dummy so this isn't supposed to be active this is supposed to be active frame uh there we go let's take a look at that now so we can see just standing idle um he's already moving and that's kind of fun so let's go right and we can see he's moving to the right which is neat he's moving to the left which is cool if i hold down left now let's crouch nice and let's go ahead and press the space bar and he's jumping so obviously we haven't had the actual controls for movement yet um but we have added his ability to be in all these different states so he's in the air jumping which is fun he's moving to the right and as you hold it he'll oscillate between the two and then if you hold it down um he's in a crouched mode and if you just leave him idling he still goes back and forth between two positions so these are the super fun basics of animation hopefully that's what you wanted from this video if you do want to hang out a little bit longer i'll go ahead and actually add the controls to get him moving left and moving right and jumping and crouching so you can see how we tie it all together but if that's all you want from this video please be sure to leave a like on the video subscribe to the channel before you go if there's something in particular you want to see a tutorial on go ahead and let me know about in the comments below otherwise let's keep rocking and rolling so the first thing i think we should do and probably the easiest motion is let's add left and right because it's pretty straightforward so what we'll do is we'll come up and we'll create a new variable and we'll call it xspeed and we'll just set equal to 2 for the initial but we already have such a situation where we tell them to move left and move right and so what we'll do is we'll go below the event handling and we'll just say if mode is equal to one right so that's when we're telling them to move right what we'll check is if the player's x position um and we're going right for this so uh if the player's x position plus x speed which is how fast we're moving if that's greater than the width and the thing is since we have this guy scaled 150 we also have to add the width of the actual player because its original position is to the left of the character so this is going to be player x plus x speed plus the width of your actual image and as long as that's um less than the width sorry i have greater in here so if that's less than the width then what we're going to do is we're going to do player x plus equals so we're just adding x speed to the player and i actually think two is kind of slow let's go and make it uh four just so we can move a little bit better and um this is basically saying first before we move the player we check that he's not moving off screen so we're going to bound the player by being on the screen you could actually let the player go off the screen if you wanted to um and then we're going to do almost exactly the same thing for 2 but this time it's going left so what we need to check is if the player minus xspeed and then this time what we want to check that it's greater than zero and um we don't have to add the width of the player here because uh the coordinate is checking its left edge already and then we'll subtract xspeed from it so this should be all we have to do to go left and right and have him limited by the screen yeah so um what you are going to notice if you're following along or if you have a similar uh project going is your left and right may not always be perfect the images that you have in there might be slightly wider than the actual character so what you might need to do um which i'm going to do here is you might need to just add like a fudge factor so we scaled the image to be 150 wide but that animation just looks better um if i give 30k of padding uh 30 pixels of padding in both directions you'll see he actually gets to what looks like the left edge of the screen now and the little alien guy gets to what actually looks like the right edge of the screen now and so you can play around with those exact padding dimensions you just don't want to go full on off the screen alright so um i mentioned a little bit earlier that uh jumping is gonna be kind of different kind of difficult so so far we've got left and right just about done and i think crouching is done as is because it's really just a visual you know he we don't actually have to move his y-coordinate um because of how we drew the pixel but if you were to add like dodging a bullet using crouch you would have to actually update the size of the rectangle he's in so that you had like obviously a bullet at his height here wouldn't hit him here um if that's something you're interested in seeing in a future tutorial i could maybe expand upon that but let's focus on jumping now so to create the jump um we're going to create a few new variables i'm going to create a variable called gravity i'm just going to make it equal to 0.4 initially i'm going to make a true false boolean variable called in air and i'll make it false initially um and then we're going to create kind of like we had xspeed we're going to create a variable called y change okay and that'll be equal to zero in the beginning um so let's go ahead and go down to the event handling and let's add a few conditions so let's say you press space we only want it to make you jump if you're not in the air already so we'll add this and not in air and you have the option of letting the person move left or right in the air or not if you want um but if you wanted to say like well once you've jumped you're not in control of like moving which is technically how gravity works um then you could add and not in air for that other stuff too you could add it for all of them so you could actually just add it up here as a condition too because you could say like well if i'm in the air it's out of my hands and you could just say if i press a key and i'm not already in the air but i'll put it on each line like this okay so let's say you press the space bar and you're not in the air well the first thing we'll do is we'll say okay now you're in the air and then we're going to add to that y change so um we'll say it's equal to -10 and the reason for that is the pi game drawing coordinate system the top left is uh zero zero and so as you go down you're actually getting higher y values and so -10 is actually moving it up the screen and then we'll set mode equal to three and we'll also say and not in air because we want the mode to stay three while he's in the air um okay so now let's come down below and let's add conditions to what should happen here so let's say player y should get the y change added to it okay so this is how we use gravity and the y change to actually move the player up the screen and then what we'll say is if you're in the air then we want y change to be impacted by gravity every scan so if we initially set equal to 10 one scan later it'll be or minus 10 once again later it'll be 9.6 and then 9.2 and then 8.8 and this will give us a really satisfying like parabolic effect and you can also change how effective or how not effective a jump is by changing this initial value and changing the strength of gravity in your game okay so you can use both to affect like how large a jump you have um and then what we'll do next is we'll say if the player y coordinate has gone past 200 so you've gone basically farther down the screen than the initial starting position we'll just use that as the time to reset so player y equals 200 so we'll put them back at the initial spot we'll set y change equal to zero and um we'll set in air back to false and we'll set the mode back to zero so that'll kind of complete the jump um and you definitely could put stuff like this all inside of your update player function and update their positions in a function as well it's not a bad idea but let's go ahead and take a look at what that looks like so i'm going to press the space bar and you see we get the super um kind of fun i think it's fun but i drew it um the fun looking guy in the air jumping and um again you can kind of affect if that's too high jump or too low a jump you can affect it by changing gravity and the wide change speed so all right so we have left we have right we have duck we have jump and that's the basics of how to go from like a completely like made up pixel image to drawing your frames importing into pygame and creating an animated character so i hope you found it useful again if you did thank you so much for watching the channel um be sure to leave a like on the video subscribe for future content it helps me out a ton as i'm pretty new and i'm trying to crank out a ton of great quality content for you guys if there's any questions you have about what you saw in here i could have done something better or you want to see something specific in a future video just let me know about in the comments below i'll get back to you as soon as i can and as always good luck with your projects and thanks for watching thanks bye