Game Programming - Episode 19 - Sprite Sheets

Key Takeaways

hey what is up guys my name is Theo welcome to episode 19 is it is is this episode 19 are we up to that I don't even remember it's been that long I think this is episode 19 of game programming and I've I'm I've finished school like unbelievable like the joy that is in me right now is Indescribable like it's amazing it's the best feeling I've probably ever had in my life knowing that like I was I was eating dinner sorry I was lunch just just like earlier today and and I was thinking oh okay let's see I'm I'm going to have to go upstairs back to my room what what what do I have to do and then the thought occurred to me absolutely nothing like there is legitimately nothing except for you know this YouTube stuff that I actually need to do like the feeling is is is Heavenly that's the only way I can actually describe it but um we're back we're back guys this will continue to be a daily series from now on as it was before exams um so yeah sit back enjoy and hopefully this this game will be finished before you know what all right so right now what we've got uh in the last episode just to refresh your memories and mine is um is this this window thing right um with a bunch of tiles on the screen now the next step and obviously like this isn't necessarily the next step right um because we could do anything next that's the thing like the order of episodes doesn't matter that much um the thing that I do next you could do later on and again the thing that I do a few episodes later you could do now okay but so the order that I do this game in is just a preference that I think would be better just for just for me really just just for whatever feature I think of adding next so what I want to do now is actually basically make Sprites right because I want these these squares to be filled up with actual Sprites I want us to be able to design a a picture basically in a in a program and then actually replace these colors with that actual that picture so thus creating textures and Sprites now what are Sprites if you don't know what Sprites are Sprites are 2D images now they're not 3D images if it's a 3D image it's actually called it's it's actually called a model this is a 2d game thus you know we're not actually using 3D models we're using 2D images they're called Sprites so just remember that whenever the word Sprite is used it means 2D two dimensional okay again if it's 3D if it's 3D it's a model um so what we actually need to do now is have a way to actually import a Sprite sheet and that's what we're going to talk about today making a Sprite sheet now the first thing I'm actually going to do is actually um remember the size of our Sprites so it looks like the map size 64 it looks like we're multiplying it by 16 or actually dividing by 16 so I guess our spry size is 16 right um I think so yeah I are we at 16 I think we're at 16 I think I think the Sprite size is 16 okay I want I want to make it 16 anyway so we'll just assume that it's 16 so what we actually need to do now is create a Sprite sheet now what is a Sprite sheet because our P because our because our Sprites are actually going to be 16x 16 pixels that's relatively small so we don't actually want to have each individual Sprite in a different file we just want to have a bunch of Sprites in one image and then we can sort of sort through which Sprite we actually want to extract from that image and use that'll actually that'll actually reduce memory usage because we we w't have to load in uh about I don't know 200 files we'll just have to use we'll just have to load in one file and that'll actually have the 200 price in it so great example is paint net right we're going to make our Sprite hidden paint.net that's just what I'm using now first of all I'm going to go to image here and select canvas size and I'm going to make it 256 by 256 that is the size of our canvas now I'll probably increase that in the future not sure but for now it's going to be this size hit okay and now I'm actually going to use uh a plugin under effects called grid now you can download this plugin uh from the internet uh all you do honestly is you just go to Google and you type in Grid plugin paint.net okay I'll actually link the plugin in the description because inevitably some of you guys will probably won't be able to find it and again I'm just doing this from memory so I don't exactly know how to get to it but I will find it and I'll post it in the description so you guys can click on that and download this plugin it's very useful so as you can see generat a grid uh and we can make the size 16 right because that's the size of our Sprite 16 and we'll just hit okay um actually one more thing before we hit okay no that'll be fine all right doesn't matter so well we got here is this grid right and every one of these Sprites every one of these sorry every one of these cells is actually going to be a Sprite um so we'll start in the top left corner really we're not going to make any Sprites today we're just going to load the Sprite sheet into our game so we've made the Sprite sheet now all we have to do is actually save so we'll go to save as and I'll actually pop over to my Eclipse workspace I think it'll be the game programming workspace um and over here in Rain which is the name of this project right we've got folders We got two folders here I'm actually going to make a new folder called re now res it stands for resources and this is going to contain all the resources that we use so stuff like sound images um video files potentially probably not though um any resources that are basically external so not code they'll all be contained in this folder and in here I'm just going to name it Sprite sheet actually one more thing I'll probably make folder in R called textures and then I'll just call a Sprite sheet and that's that's it as a PNG hit save uh okay so now that that's saved now we actually need to load this into the game and we'll do that by actually creating a new class so under under the graphics package we're going to right click and create a new class and we'll just call it Sprite sheet and this class is actually going to be in charge of managing any sprad sheets that we might have and actually cing them you know to memory to to a variable um so what we'll do here first of all is actually specify the path for that for a particular Sprite shade we might actually have multiple Sprite Shades because we might have a separate Sprite shades for stuff like outdoor Graphics uh indoor Graphics you know what I mean like we might have multiple Sprite Shades because we don't want to cram all like I don't know say we have 200 Sprites we don't really want to cram 200 spres into one Sprite sheet that might get a bit confusing we want to sort of be able to break it down as much as possible but in moderation as well so we don't have 200 Sprite sheets so we'll create a a string here we'll make it um private private string path and this is actually just going to contain the path to our Sprite sheet so the the system path um we'll also make a private Final in uh size and we'll capitalize it because that's a convention if you're making something final you usually capitalize it um again you don't have to but that's just a convention um we won't set it equal to anything yet oh actually no we'll set it equal to no we won't set it equal to anything um and we'll also create a private oh sorry sorry we'll we'll create a public int and we'll call it pixels all right so we've created three variables now now what we want to do is actually create a Constructor for the class so public Sprite shet and it'll take two parameters first one is the path to to our Sprite shet to that particular Sprite shet and the second one is the size of the Sprite shet and then under here all we need to do is say this. path equals path and this do size equals size okay again we've made the size variable final because the size of the Sprite sheet will never change so the size of the Sprite sheet does not mean the size of the Sprites it means the size of the Sprite sheet now it is square as you know there's the the width is equal to the length or the width is equal to the height um and it's 256 by 256 so literally it will be 256 in this case we might have a smaller sprad sheeet in the future um and that's pretty much it and then in pixels we actually need to set the pixels uh array equal to new in size time size and we'll actually probably just use um this one and we probably also didn't really need this here um so again what this code is going to do is it's going to set this thing equal to whatever we input here which you'll see demonstrated in a minute um and again it's going to set this size equal to this size that's how it's going to work and then it's going to create that pixel equal to the size of our um Sprite shet so in other words we're going to have we're going to have every pixels every pixel of this Sprite sheet mapped out so that we can access it now the most important part is actually loading that Sprite sheet oops um we'll probably close this for now um the other important thing again yeah is loading that Sprite sheet so we've made a way to sort of create it in Java but now we actually need to load that physical image file so I'll probably just make a private um method here called um probably just call it load load image or load just load um and what we're going to do here is again just type buffet image oops buffet image image equal image i. read and we'll just go Sprite sheet. class doget resource and again we'll use path so what this is going to do is basically create a new buffet image object which is basically an image and it's going to set that image equal to the image of this path that's all that this code is going to do and we'll import this and you'll see that this actually throws an exception so we'll just surround it with try and catch all right so what we're doing now is we're actually loading that image into a buffet image class but we don't really want to deal with images in Java as a buffet image we want to deal with them as individual pixels like we have in the past okay um like we like we have with these with these colors over here right we want to deal with them as individual pixels so to do that we need to create two quick variables that we'll actually you know dispose of eventually um they're not permanent that's why we're creating them in here um so the width of the shet so image. get width again the width will roughly be equal to the size but just in case we want to be able to do it from here um and image. get height so this is getting the height and width of this image that is loaded which is found in path whatever path may be um and now we want to do we actually want to set those pixels so now we know the width and height we want to set this buffet image into this into this pixel array and the way we do that is we just simply call a void method which is image. getet RGB and over here we need our start X which is where we start scanning so0 um start y so 0 comma 0 is the coordinate where we actually start loading the image from because we want to load the entire image right uh width and height that's already done for us um again this is referring to these variables so this this in turn this basically covers the entire image now the RGB array is where we actually want to store those RGB pixels so we we obviously want to store them in this pixel array so pixels the offset of where it actually starts scanning is going to be zero again it's scanning horizontally so we want it to start at zero and then the scan size is again I I just mentioned it scans horizontally so the scan size will actually be the width and obviously width is actually equal to height because it's a square but doesn't matter um so that is the code that actually translates this image that we've loaded into these pixels okay and that is leg legitimately it all we have to do is after we've created all this we can just we can just call the load method once as we've done as we've done here and it will actually set these pixels equal to the Sprite sheet all right equal to that Sprite sheet file um so that's it take down all this code get ready because tomorrow we're actually going to look look at a way to actually implement this and probably make a Sprite class and actually manage individual Sprites but um that's it guys I really hope you enjoyed this episode please hit the like button if you did leave a comment let me know what you thought and I'll see you guys tomorrow with a brand new episode so until then later guys [Music]