Importing Sprite Animations to a 2D Character - Godot Basics

hello everybody chris here and in this video i'm going to be showing you guys how to take a sprite sheet and to set it up in godot as an animated sprite that you could use for say a game character and i'm going to be basically doing those steps for the little platformer prototype i've been working on a bit so here's the sprite sheet i'm going to use it's called red hood on itch.io so it seems like a pretty cool character and we'll see if we can get it working so the first thing i'm going to do is take the sprite sheet and make sure that it exists in the asset files for the game so i can right click on our resource directory inside of godot and open in file manager and then we just need to find a folder to stick it in and copy and paste the files over so in this case we'll be making it for potential player character you can organize your folders however you want in your project but in this case i'm going to go ahead and go into the imports folder for all of the third-party assets i'm using at the moment and i'm going to create a new folder here for those assets so let's look in the file explorer for the characters thing so here we have the current files as a png for the sprite sheets i'm going to select all three of these hit control c and here i'll create a new folder and i'll call it red hood itch for now and control v inside the folder to paste it in by the way if you want to use these same assets i'll include a link in my description okay so now that we have it there if we go back to godot it should have a little pop-up there for the importing of the new files and we should be able to come down here and locate them so i can left-click on each of them and see a little preview in the top right in the inspector so there should all be there one thing i want to make sure though is that all of these are being imported as 2d pixar assets so i'm going to select all three of these images um make sure going over to import so in this case it looks like i do have filter set to be off by default um if you see it on your pixel is going to look blurry so what you might need to do is to change it when it says import as texture up here click on preset and then go down to 2d pixel so that's going to give you the right settings for pixar then you can go ahead and hit re-import at that point i believe you can just click on the preset menu and do set as default for texture and then that'll make sure in the future that the additional pixel assets you bring in will just default as pixar not having the filter turned on okay so in my game right now the player character can already move around it has a basic state machine so you can see here run idle jump and also swim down here but we're going to swap out all of those animations with new ones so what i'm going to do with this player object to make sure that i can change everything about it and not mess with the original player's scene is i'm going to right click on this player and we're going to make it local and then that breaks the link to the scene file inside of the project and we can right click it and save the branch as a new scene so i'm going to go and do characters player and i think i'll just call it player red hood for now and we'll go ahead and hit save so with that we can basically enter this new scene that we've saved onto our project and change everything about it without affecting the other player character so when we take a look at my player currently you'll notice that i am controlling the animations using a state machine if you want to look at that look at gdquest's state machine for goodell and you can kind of see most of the code that he implemented this is actually just based on it so i created a bunch of different states idol for when it's not moving run for when it's running around jump for when you want the character to jump and then swim obviously when it's in the water so in order for our character to animate with those new red hood sprites we need to click on the animated sprite and to create new animations for it so if you don't already have a animated sprite inside of your character then right click on your character base and add a new animated sprite to it and then that will allow you to play the different animations on the character okay so in this case we're gonna need to add in frames from a sprite sheet that's this little grid icon here so let's go find the character and we'll see which frames are actually available to us it might actually help to double click the file and then open it in another window that we can actually zoom in and see the individual sprite frames so taking a look at the itch.io page we can see that the standing pose is one frame the run animation is 24 frames so let's go ahead and set those up first so the idle is going to be the run and in this case this new character has only one frame so i'm going to get rid of all these other frames so let's go ahead and do that and then let's add the frames from a sprite sheet and i'll go into the imports redraw itch sprite sheet you'll see at the top left this horizontal and vertical so basically we're working with a grid and we need to know how many frames go across and how many frames go down so looking at this sprite sheet which has quite a lot i can count that there's 12 across and 11 down so that means i need to put 12 in for horizontal and 11 for vertical and if it's correct then we should see all of the sprite frames properly separated from each other so that's going to be handy for us and as the idle is just one frame the only one we have to select is the one right here so add one frame and now we basically have the idle animation or lack thereof rather next we have the run state which is the next 24 frames according to the io pack so let's go ahead and add that in so i'm going to delete all of the current frames and once again i'm not really worrying about it because i've already separated that player into its own scene and this is a new scene that we're working on so i'm not overwriting anything and we add the spreadsheet in again you can see nicely that the horizontal and vertical for this sprite sheet is already saved so we don't need to set that back up so let's see uh we want 24 frames so let's just go until we get all 24 of them so here so basically the first two rows here add 24 frames and to test that we can go to the inspector where it says animation i'm going to change that to run okay and it's almost working there i think maybe i have one extra frame so okay and it seems the problem is that the first frame is just for idling so i actually need to add in one extra frame here so i'm gonna have 23 selected just in case i'm not sure if it matters there and then we'll add in this last frame which i guess is for the run not for the bowie animation and let's go to frame 0 here and delete that and let's see if it runs smoothly okay yeah there we go so 24 frame animation uh if we need to increase the speed of it then you can go here to speed fps maybe it needs to be slower in this case no it looks like 20 is correct but it's going to really depend on whoever animated it how fast it's supposed to be it doesn't look like they specified it here but you know at 20 fps that seems to be about right so we'll go with that and now our character can go from idle to run okay and let's continue setting up animations here so light bow attack is nine frames so let's grab the nine frames after that so i'll just create a new animation here and we will call it light bow and i'll add the frames so double clicking on that we just need to grab nine frames here add them in seems to be playing nicely there and let's up the speed to 20 fps and that looks great next is jump so this is going to be a little complicated you can see that it says jump rising three frames and then you transition to falling seven frames so you can see here that there's actually four parts of this animation so that's gonna be quite complicated actually so jump rising three frames so you would play this once to have a proper jump animation and then you do transition to fall you would continue doing falling three frames until the character lands on the ground and then there's the four frame landing animation so that's quite intricate there we can set up all of those animations to actually have that play with the state machine though i would need to go edit the script a bit so i don't know if i'll cover that in this video maybe i'll do it in the next one let's go ahead and add in all of those animations so jump i'm going to delete that frame and add in the next three so that's going to be these three right here and let's switch that animation and so you can obviously see it's not supposed to loop it's supposed to transition into the transition to fall animation so i'm going to create a new one and call it transition fall according to this seven frames so let's go ahead and grab those so one two three for the jump and then one two three four five six seven for the transition to fall let's go ahead and play that once so looking correct for now and then we need the fall animation so that's the next three frames after the transition to the fall we have one two and three for the jump and then one two three four five six seven for the transition to fall and then these next three for the fall itself so add those in let's test it real quick all right so that's that looks a little crazy at 20 fps maybe it's supposed to be more like 10 fps so we'll know for sure once we actually edit the jump script and modify that a bit so let's add in one final one for this so the landing for frame animation let's add that in and double click and call it landing one thing that you can tell just by the nature of me adding this character into the game is the this character is going to have a lot more animations than the other sprite character and because of that there's going to be a lot more potential states that the character can be in the more complex your character gets and the more complex your code is gonna get i i've been finding that actually having a state machine is going to save you a bit of a headache rather than trying to cram all the code into one script so if you haven't already look into state machines as a way of controlling your character so that they play the right animation at the right time anyway let's get the landing for this character so i'm going to open up the sprite sheet one more time and then i think it's these last four frames i'm not 100 sure i mean that looks right to me let me test something with the uh following it says three frames here but maybe that's not right so let me delete these and then we'll open the sprite sheet back up uh okay so i think i figured it out it's actually the last three frames here for the falling yeah that that looks like a correct loop the like moving was kind of weird and then i guess that means that we need one extra frame for the fall transition so let's see transition fall does that look right i'm not sure about that okay let's delete the frames and we'll add it in and just to make sure okay so if these three are that then one two three four five so honestly it's a little hard to know for sure here i think what we need to do is to actually get the jump state to make all of those transitions and then we'll know for sure if it looks correctly or not so i guess this would be one reason that if you're putting together a sprite sheet having your separate animation separated row by row might make it a little bit easier to figure out when you're loading things up in this kind of thing but uh not a big deal there so for this video taking a sprite sheet and adding the animations to an animated sprite for one of your characters i'm going to end it here for this video so for the next one i'm going to take the different states we created and i'll show you guys how we can take our jump script for the uh jump state and to make it so that we can actually play multiple animations depending on the timing in that script so that'll be the next video so for this one i've been chris thanks for watching i hope you guys enjoyed it and i'll see you guys in my future video content

Channel: Chris' Tutorials

Views: 27,170

Keywords: godot, godot engine, game development, creative coding, aseprite tutorial, aseprite animation, sprite animation tutorial, sprite animation, pixel art, pixel art tutorial, godot tutorial, godot rpg, gdscript, godot animation, godot 3.2, godot gdscript, godot 2d, godot 2d tutorial, godot tutorials, godot tutorial 2d, godot programming, godot basics, devlog, platformer, godot platformer, godot state machine, godot platformer tutorial, finite state machine, godot game engine

Id: 7hHbsV_X3QE

Length: 11min 48sec (708 seconds)

Published: Mon Oct 26 2020