How to (easily) add Animations to a Character | Love2D Basics

hello folks in this video i'll show how to add animations to your player character where they face and walk in whatever direction that you're moving i'll be utilizing these sprites which were created and provided by with the love on opengameart.org you can download this sprite sheet using the link in the description or you're free to use whatever sprite sheet you like taking a quick look at this image you'll see that there are four rows each representing a different direction our goal is to use each individual frame from a particular row in order to create the animation when each frame is played in quick succession it'll give the illusion that the player is walking the code i'm starting with is from my player movement video we have a player object and in the update function we have this movement code also we are optionally drawing a background that's optional but when we start we can see that i can control this circle with the arrow keys or if you have a sprite being drawn for the player that's fine too we're going to be changing that in just a second you can use your own projects for this tutorial or if you want to follow along using my project this code is on github and i have project setup instructions available so check the description for links to all of that once you have your project ready go ahead and create a sprites folder next to your main.lua if you don't already have one and inside go ahead and paste in this playersheet.png once that's done back in visual studio code you should see that in your sprites folder you have a playersheet.png which means everything's ready to go we just need to include that file into our code which we can do that the same as any other sprite i'll make it a property of the player object and i'll call it player.sprite sheet equals love.graphics.new image and then we need the path which is the sprites folder and the name of the file is player dash sheet dot png now that this is imported we'll want to work on turning this into an animation this will be accomplished using some open source software in particular we'll be using this project here called animate again the link to this is in the description although this repo is a few years old now it's still very reliable and works great for implementing animations in love2d there are a few ways to get this code included into your project if you have git installed you could go over to this code drop down copy this https and then do a git clone or the other way to do this is to download the zip and once this zip is downloaded you can go ahead and extract it and then in here we will find an animate.lua file you're going to want to copy this and back in our project folder we're going to create a new folder i'll call it libraries and in this folder we're going to paste in that animate.lua once you have that pasted in and you can see it over here we'll want to go ahead and import this into our code i'm going to do this right at the top of love.load i'm going to say animate equals require libraries which is that folder we just created and then the name of the file is animate so now all of that animate.lua code is stored in this global variable called animate at this point we can start creating our animations the first step is to create a grid which helps the library to split your sprite sheet into its individual images you can check animate's github page for more details about all of this stuff so let's start by creating a grid for the player object i'm going to call it player dot grid equals animate dot new grid and in these parentheses here there are several parameters we need to define first is the width and height of each individual frame and in our case each frame is 12 pixels wide and 18 pixels tall if you look closely at the sprite sheet we're using you'll see that each individual frame has a bit of a gap around it but when we include that gap each image is 12 by 18. then after we define that dimension we need to give the width and height of the full sprite sheet which we can get very easily we'll say player dot sprite sheet and then we can say colon get width so this line here is going to get the width of our sprite sheet and similarly we want to get the height for the next parameter player dot sprite sheet colon get height so that is the entire thing we need to define our grid we have the width and height of our individual frames and the width and height of the full sprite sheet and in the end that gives us our grid now using this grid our code will know how to split our sprite sheet into the individual images and with that we can create our animations so we're going to store all these animations into a new table actually i'm going to call it player dot animations equals new empty table and then let's start with just one simple animation we'll do player dot animations dot down this will be the first animation that we'll implement the down and to create an animation we do animate dot new animation and then in these parenthesis we need to define what frames from that sprite sheet we want to include and we do that using the grid so we'll say player dot grid and then in these parentheses we need to define what rows and columns we want to include the first parameter here is the columns we want to include which is columns one through four because we have four frames going from left to right so we say one through four in single quotes just like this then we're going to put a comma and then after this we want to define what row we want this to come from which in our case the down direction comes from row one so we'll just put one here and then after we define our player grid information we put comma the next parameter is the time in seconds between each frame so again our frames are going to be playing one after another in quick succession but we need to define how quickly we want them to go i'm going to say something like 0.2 and you can adjust this smaller or bigger this means that the frame is going to change every 0.2 seconds for our animation which is pretty quick but you'll see that it looks really natural when we play the animation back so this is everything we need to define our animation and it's being stored in this player.animations.down so i'm going to actually copy this and now we need to update this animation and draw the animation so in update after all of this code i'm going to put in player.animations.down colon update and this update requires us to pass in dt and again dt comes from right here in love.update we're simply passing this parameter down into our animation update and then after that's updated we can go down here and i'm going to get rid of our circle draw or you can also get rid of any other drawing that you're doing besides the background and i'm going to do player.animations.down colon draw and the first parameter here is the sprite sheet that we used to draw this animation which is player dot sprite sheet then after this is the position that we want to draw this animation which is player.x and player.y and that should do it we should see the animation playing so let's save this file and start and one problem that you'll notice immediately is that this animation is way too small since i went with some retro graphics this sprite is actually only 12 pixels by 18 pixels which is very small but we're able to scale it up a little bit so let's go ahead and in this animations draw there are some additional parameters very similar to the regular love.graphics.draw function the next parameter here is the optional rotation field we don't want to rotate the image so let's do nil meaning don't change the rotation and then after nil is our scale x factor so we can put in something like 10 and that means the scale of our animation is going to be increased by 10 times and putting in a value for scale x means that scale y will also adopt that value since we didn't specify anything for it so with this we should expect our sprite to be 10 times bigger or i should say our animation so let's go ahead and start and there it is it is much bigger but a notable problem is that it is blurry we can prevent our scaling from blurring the images if we go up to the top and we'll do this right after our animate import we'll do love.graphics.set default filter and the values here are nearest comma nearest so with this line in place it'll make it so that when we scale up our graphics it doesn't do any blurring it just simply takes the pixels and scales them up and now when i start we see our animation working and it looks pretty good and since it's tied to the player.x and y values we can move around normally but now our next task is to get the other directions working we have down but none of the other ones so let's go ahead and get those implemented we'll do them in a very similar way that we did down i'm actually going to copy this entire line right here and we're going to do the next one we'll say left now the left direction is on the second row so i'm going to change this one to row 2. next up we have right now right is on row three and then finally we have up and up is on row four now all these animations are very similar they just take place on different rows now comes the challenge of changing between the animations because right now our animation is being drawn and updated by manually picking out player.animations.down for both here and here when in reality we don't know which of the four animations we want to use we can keep track of this with a new property i'm going to call it player.anim and we'll set it equal to some animation let's say player.animations.left so now our player.anim property contains player.animations.left so we can use this to track our player's animation so instead of updating manually animations.down we're instead we're going to update player.anim and same with our draw we're just going to do player.a m draw this way whatever animation we have assigned to this value that's the one we're going to see so right now we have player.animations.left assigned to it so if we save and run we see that the left facing direction is now the animation that we see here at this point we just want to change the player's animation to match whatever direction they're moving this can be done by adding to our movement controls and the update function for example here we are holding down the right arrow key that means we probably want to change the animation to be player.animations.right so right in here i can go ahead and do that i'll say player.anim equals player.animations.right and similarly we can do this exact same thing in all four of these directions so this one is left this next one is down and finally this last one is up so with that in place if i save and run whenever i change directions the player's animation gets updated to match that direction it works pretty well the only remaining problem here is that the player continues to walk in place even after they stop and ideally their animation would also stop and change to a standing still position essentially we want to change the player's image to this frame the standing one when no arrow keys are pressed down you'll notice that the standing frame is the second image in each of these rows so when no arrow keys are pressed we'll force the animation to stick with this second frame this again will happen in our updates section we're going to need to check to see if no arrow keys were pressed that frame so we'll track this with a very simple local variable at the start of the frame we'll create a local is moving and we'll set this to false then we want to change this is moving to true if any of the arrow keys were pressed down this frame and we can do this again right in this is down if statement we can just simply say is moving equals true because if the right arrow key is pressed down that means we are moving so we need to change this value and i'm just going to copy this line and put it within all four of these if statements for each of the four directions so at the end of our update method we will know that is moving is going to be either false if no arrow keys were pressed down or true if any of them were pressed down and if none of them are pressed down and let's see if is moving is equal to false then at this point in this if statement we want to change the player's animation to be that second frame where they're just standing still and this is done with player dot am and there's a colon go to frame function and the frame we want to go to is frame number two that's standing still frame if we save and run now the player is standing still as soon as i move he starts walking again in all four directions and when i stop they change back to standing still and this works for all four directions that about wraps up this animations tutorial all the code from this video will be on github so you can check the description for that if you found this helpful please leave a like that helps me out a lot and feel free to subscribe for more game dev content thank you so much for watching to the end and i'll see you in the next one

Channel: Challacade

Views: 2,358

Keywords: love2d, love, coding, programming, animation, pixel art, spritesheet, anim8, lua, basics

Id: ON7fpPIVtg8

Length: 14min 57sec (897 seconds)

Published: Thu Aug 26 2021