Coding Challenge #111: Animated Sprites

hello welcome to a coding challenge in this coding challenge I am going to make an animated sprite this is actually a page on my website I have a website yes thank you very much with an example that I made apparently seven years ago you can download the code for this it's made in processing and it is loading a sequence of images and playing those images in sequence in multiple places at different speeds to create this running person thing across the screen so I'm going to try to do something similar I'm gonna do it at p5 so I'm gonna look at what does it mean to load a sprite sheet what is a sprite sheet even to chop up that sprite sheet into lots of little images and then to play those images as a sequence and make an animated sprite class that you can use and this is a very common technique used in games and all sorts of other stuff so let's get started now thank you to dragon z P who suggested that I use this wonderful image sequence of a running horse which comes from open game art org this is under a Creative Commons license so I need to attribute it it which I'm doing right now hello I'm using this but I can so you can find a lot of free and open art that you can use here so I'm gonna use this if you if I were to click here and just download the assets we would see that it would actually come as separate images which I find to be very nice because I like to load them one at a time but what's actually often done and more efficient is to actually and I have this right here to load a single image so this is what's known as a sprite sheet a sprite sheet is a single image that has each frame of an animation for that sprite why is it called a sprite in the first place look at this in the category of you learned something new every day the term sprite was first used in the graphic sense by one of the definers of the Texas Instruments 99 18 a video display processor I'll let you continue to read this interesting Wikipedia Paige about the history of sprites but the way that we think of sprites today and in particular a sprite sheet today is multiple frames of an animation within a single image and this here is a PNG image so it has transparency so if I were to go I should just go to the desktop and open this up you can see it right here here it is again so what is it that I want to do what I want to do is load this image I want to get each frame out of it and then I want to show them one at a time in sequence so this is not necessary but again thank you to dragon who submitted this also sent me a JSON file so this is actually quite convenient this is a JSON file that actually has the information about where each frame of the sprite is in that image it has its XY knits width and height now it turns out this is really just a grid so I could probably just do this mathematically very easy easily but this is sort of nice that I can maybe load this in so let's get started with this right now so first thing I want to do is I am going to write a preload function I'm using again the p5 library and preload allows me to load media assets before the program begins sort of saves me from callbacks and promises and that sort of stuff which is useful but I don't need that right now so I'm gonna say let sprite sheet be the variable for the image and let sprite data be the variable for the data so I'm going to say sprite data equals load JSON and what was that called it's called a horse JSON and I've done something horrible here and then I'm gonna say sprite sheet equals load image horse dot PNG just to make sure everything is working let's draw the sprite sheet to the canvas and in setup lets console dot log the sprite data so this is the first step I and again this is a bit of over this is this is a lot of extra stuff like you know I could just load a bunch of images all right on there so you need the JSON file but this is nice I like I like it so let's go back whoops and of course everything's gone wrong so it couldn't get horse to chase on and it couldn't get horse dot PNG why because it's in a folder I always forget this I put it in a folder called horse so I need to add the directory path to the images there we go so we can see this came in so I definitely have the data there right I have the position and the native of each element and then why don't I see ah so I'm trying to draw the image and I completely forgot if I'm gonna draw the image I've got to say where to draw the image and I'm gonna draw it at zero zero there we go okay so next step what I want to do now is I don't want to just display the entire sprite sheet I want to display each piece of it one at a time so let me go and what I'm going to do is I'm going to create a variable and I'm going to say let animation equal an array so the array is going to be each frame an image for each frame of the animation so assuming I have that data I can see if I look at the JSON file right once again all of the all of the data is in a JSON array called frames so I'm gonna say sorry back into the code I'm gonna say let frames equal sprite data dot frames I don't that's totally necessary for let I equals 0 I is less than frame length I plus plus and then I'm gonna get sorry I'm gonna look at the JSON again and now for each one I want to know about the position this X Y width and height is what's important to me I'm having trouble so I want to say let pause equal frames index I position and then now pause has all of the stuff in it for grabbing a particular image so watch but I'm gonna say let image equal sprite sheet and I'm going to use a function called get so get is a function in the p5 library that you to get part of an image I could get a single pixel I could get the whole image I could get a section of it and in this case what I want is this section of the image the X&Y with a particular width and height then what I want to do is just put that into that array so now this is really all I want to do is loop through every frame grab it out of the spreadsheet now again a convention might be this is one way of doing it which I which arguably might not be the quote/unquote best or most efficient way you can actually just leave everything in a sprite sheet and later I could just be like when it's time to draw stuff I could pull stuff out but I'm choosing to in setup just pull out the sections of the image and I'm gonna console.log that array now and we can see I have an array with seven images in it so now if I were to say draw image animation index zero that's all I see is that one if I were to say draw animation index two I see that one so this is working and guess what animation frame count what and then can't read a property width of undefined so you saw it for a second there and then it went away why did it go away well it went away because there's only seven images there so I could say modulus animation dot length now somebody who I got this great YouTube comment the other day saying that I'm saying modulus and modulo incorrectly I don't remember what it was okay I found the comment the operators called modulo and the number following it is called the modulus okay and Golan Levin came on the coding training to guest video about that operation but what this operation does for me and the code right now the modulo operation is it gives me a modulus value that's always between zero and the end of the array so it's the remainder of division so this frame count modulo animation dot length watch what this does now I see that animation repeating and look at that look at it it's the horse it's just running and running and running and running and running great so I completed in part one when I'm gonna kiss keep going this is one video of this coding challenge I've got the animation playing it out but here's the thing what I want to do now is I need to figure out some way of encapsulating the idea of this animation into an object so I could then make many of them so what I'm gonna do to do that and I think what I want to do I think I want to make a new JavaScript file I'm gonna call it sprite j/s and I am going to in index.html I need to make sure that I refer to it and then in sprite j/s I'm gonna make a class called sprite and then when I create this what what when I create the sprite with a constructor I want to give it a few things I wanted to have a speed and I wanted to have it I'm gonna give it like an animation so basically that animation will be the sequence of images that's supposed to play and then it's also going to have a speed which is like how fast does it play it through so the idea here being that now I can say let me just do a variable called horse and I'm gonna say horse equals a new sprite with these frames of animation and a speed of 1 and then here I'm gonna say horse show and maybe I just want to say something like horse dot animate so like our next frame or something I don't know what what makes the most sense but I'll just call it animate right now and I'll put it after so this means if the idea of this sprite if I want to show it and animate it in the sprite class I need a show function and I need an animate function now if I'm gonna have a show function that's basically going to be exactly this but the point here is that I want to get away from using frame count and so what I want is to have another variable that just keeps track of the index like where am I in the animation so I can use that instead of frame count this dot index and this by the way has to be this dot animation dot length and this has to be this dot animation I like and you know it would be really nice to have a length variable I think cuz I'm gonna probably need that a lot so let's just make it that just like makes the code a little bit nicer to look at alright so this should work and then in animation I just say this dot index plus plus or plus equal this dot speed so the idea here is speed is controlling the speed of the animation so I've basically taken the idea I've created an object that has stored in it an array of images that's the animation it has the length of that array it has speed how fast ran cycle through them and where is it currently so now if we run this and I've got some air here spray Tijs line ten this dot animation this dot index so let's just let's just look at some stuff here to see what's going on Oh animation is one oh I put things in the wrong order ah this is a very common programming error look at this I wasn't doing this quickly and in here say horse equals new sprite animation comma one so and the image sequences first the speed number is second and in here I put the speed first and the animation second so I got to reverse those order so that they match and then there we go we're fine now so I've got to where I was before but the interesting thing here is that now guess what this sprite can have an X and it can have a why and so it could be basically I could be drawing it at this dot X this not Y so then when I create it I could say I wanted at 100 100 comma 1 now it's there this leads me to be able to say okay now I want to have horses I want to have a bunch of horses I'm going to say for let I equals 0 I is less than 5 I plus plus horses index I is a new sprite at 0 comma I times 50 and then I want to say for I'm going to use a for of loop let horse of horses and I'm going to go through all those and show and animate all of them so now look at this I've got a whole bunch there they're all right there together maybe I want to just space them out a little more I could be thoughtful about the math of this oops I must not have saved there we go so this is good enough for right now I've got a hole I've got a bunch of them but look it now here's the thing what if I don't want them all to be matched up at the exact same speed what if I were to say let's make the speeds random so let's make the speeds random somewhere between zero point one and one point I think that's actually the fastest speed that that number one so let's do that what happens all right I immediately get an error what is the error that I get it cannot read property with a bun to fine spray Tijs line 12 well the issue here is by definition if I go to sprite Jas line 12 look at this this dot index modulus this dot length this works just fine if the index is 0 1 2 3 4 5 if it's a whole number if is a whole number it can apply the modulo so I said it wrong again operation and it gets another whole number which is an index into an array arrays only have whole number indices but if I start saying plus 0.2 or 0.3 I'm gonna get these numbers that aren't valid indices into an array well this is actually quite fixable and let's just do this let index equal floor so all I need to do is floor this dot index before I apply modulo and then I can put that in here right so floor is an operation that just eliminates the decimal point I want the index itself to go up slowly by a decimal point but I only want to show you know I have fewer frames I want to show the same frame a bunch of times so it's if it's point 2 it's gonna take 5 frames for it to get all the way up to the next whole number if it's a point 1 it's going to take 10 frames so this should do the trick now and we can see look at this they're all going at different speeds and they're running in place I might as well have them move now right so why not also have them move this dot X plus equal this dot speed and maybe the speed that they're running doesn't really feel right so even though it's the speed of going through the index I probably should increase that my scale of like 5 let's try that this looks a bit more realistic now I have it looks like they're sort of moving at speed and then I could obviously do something like if this dot X is greater than width then I want to say is this dot x equals negative I want to kind of put them off the screen negative this dot animation index 0 dot width so I'm just pulling I know that might make sense for me to make that a variable like this W equal this dot animation index 0 you know this is assuming all the images have the same width and that way I could just say put it off the screen here so let's run this one more time and guess what I now have I believe recreation of that example that I made where I have a bunch of horses all moving at different speeds through the animation and you know now the world is my digitally simulated virtual reality Easter so to speak and then I could I could grab any sequence of images I could have different sprites have different image sequences I could start designing the background I could have them you know I could apply physics to the way that the the X Y position moves around the screen I can start having collisions the point is that anything that you've anything that I made in all my nature of code or other coding challenges that have an object moving around the screen the simple games this would allow me to have an animated sprite and I might even further want to encapsulate the idea of a sprite oh this would be a great place for me to talk about inheritance so I could then make other objects that extend that's an inheritance term sprite so I could make horses that are animated sprites or frogs that are animated sprites or puffins and puppet doesn't really do it so I could that's so anyway I'm a little bit off the rails here in my discussion let's think about this what could you do know what thing is what would happen if I gave it a negative speed I think mine would break so this is a little challenge to you could you make this work with negative speeds right it breaks so this example that I made doesn't support going through the animation backwards so try to add that could you make something like this that has different animations for each op so there's maybe five things but they're different each one has its own animation sequence could you do that so could you design your own sprite sheet so don't even do any code make your own sprite sheet and run it with this code exactly so there's so many things you could do please share with me up in the comments on Twitter or at the link to the coding challenge URL in this video's description there's a way you can submit any verses that you make on your own thanks for watching this coding challenge animated sprite [Music]

Channel: The Coding Train

Views: 96,902

Rating: 4.9720607 out of 5

Keywords: daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, class, challenge, codingtrain, code challenge, javascript (programming language), programming challenge, p5.js tutorial, sprite, sprite sheet, sprite sheet animation, sprite animation javascript, animated sprites, animated sprite tutorial, animated sprite js, computer animation, p5.js animation, animated sprite, video game, spritesheet

Id: 3noMeuufLZY

Length: 19min 57sec (1197 seconds)

Published: Mon Jul 30 2018