Game Programming - Episode 20 - Sprites

Key Takeaways

hey what is up guys my name is the CH and welcome to episode 20 of game programming so yesterday we took a look at uh well actually our game didn't really change yesterday but you know we still had the same result but what we did do is actually create this awes awesome Sprite sheet class which will actually load a Sprite sheet into our um into our project into our into our memory and C cach that so that we can actually access the Sprites within that Sprite sheet so we've we've actually we we've got a way to actually load and again you know C that Sprite sheet into this pixel array but how do we actually access individual Sprites now we haven't actually talked about that yet so that's what that's sort of what we're going to cover today um I'm going to cover like this bit by bit you know just like a little bit every day so that you guys can follow along um get get to know the way that this works really well and uh you know I don't really want to rush this I want to make sure that you guys understand everything so um today we're actually going to cover simply loading a single Sprite okay so what we need to do right now is actually create a Sprite class so we've got a Sprite sheet class and again that loads our sheet but it doesn't load individual Sprites we want to be able to load individual Sprites so how do we do that well first of all in the graphics package here I'm just going to right click hit new and then class so I'm going to create a new class I want to call it Sprite okay I'll have finish and what I want to do here is Define a few variables first of all we need a size for the Sprite so again same thing as we did in Sprite shap we got we we have this size here we'll basically do the exact same thing here we'll go private final int size all right and we we won't declare it yet now again final means it can only be declared once now it doesn't matter if you declare it here for example or if you declare it somewhere else it can only be declared once and that's it it's final it's constant it's not a variable um we'll also make two whoops private two private integers called X and Y and and I'll explain what that's for in a minute and a public make sure that is public a public int uh actually no I don't think we need a public we we'll keep it public for now but a public int and okay again an array of integers called pixels and we won't set that just yet either so now that we've got this um this is like the basis um we actually need one more variable which I'll talk about in a minute but I just want to cover this real quick the size is going to be the size of the particular Sprite now the reason I haven't defined it straight away here is because even though our Sprite size is sort of agreed to be 16 right now now we might want to have Sprites that are actually 32x 32 so in other words maybe some monsters or something in the game will actually be larger than tiles so they'll take up like two two * two tiles instead of one by one tile so because obviously that monster or that creature or whatever will still be a Sprite we sort of want to we don't want to really use two classes for that or whatever we we don't we don't we really don't want redundancy here we want to be able to just have one universal Sprite class which we can actually adjust to suit every Sprite in the game now the other thing is we sort of enabled ourselves again here by by specifying a variable path and to have multiple instances of the spr sheet class we actually allowed ourselves to have multiple Sprite sheets so because because the Sprites will be across several Sprite sheets we also need to Define which Sprite sheet the Sprite is actually inside of and we do that simply by going private Sprite sheet shade we'll just call it shap all right and we'll Define all this in a minute now the most important part of the Sprite class is the Constructor so we'll type public Sprite now this is going to take a few parameters first of all the size of that particular Sprite that we're defining so we need to set the size remember we've created this variable we haven't set it to anything yet when we actually create a new Sprite object we need to set a size to it we also need to set X and Y which I'll talk about in a minute and we also need to set which sheet it is actually inside of so which which Sprite sheet contains our Sprite um so first of all we've got this error and that's the the reason we've got this error is because we haven't actually set size equal to anything so if we say you know length field size may not have been initialized so first thing we need to do is actually set the size so we'll go ahead and set the size equal to size and that error should go away um and what what is this doing here get out is this being legit there we go um so we've set the size equal to whatever we put in our parameters here um the other thing we need to do is actually set the X and Y now how how is this going to work first of all um it's going to be pretty simple actually now yesterday you you might remember we actually had a grid and each each grid each like cell in that grid is a different Sprite so what happens is X and Y is actually going to be the coordinates of our Sprite now because the size of our Sprite is 16 and in other words I'll probably keep it like that but again we don't want to be too redundant so I'll probably use this size um because the size is 16 we need to set this.x equal to X time size all right so a quick note about this cuz this might be a bit difficult to understand so again we are setting the this Sprite instance's x value x coordinate of where it's located on that Sprite sheet um when we actually call it we want to be like all right it's the fifth Sprite across and the second Sprite down for example right so the coordinates would be 52 obviously in pixels that would be 5 * 16 for the x coordinate and the y coordinate would be 2 * 16 because we're trying to find 5 * 2 or sorry 5x 2 that's where it's located um this will be a lot easier to understand what I want I actually demonstrate it in a future episode but um basically what this is doing is actually setting the location of our Target Sprite in our Sprite sheet and again we're just going to do the same thing for y um next next up we need to again load this shet into here so we'll call this do shet equals shet and finally we actually need to load that Sprite and we'll do that by creating a new method private method private void load and again this is going to be the same thing as this over here we loaded that image in and we actually uh set the pixel array to be that here we're going to do a similar similar thing we've already loaded the sprad sheet image so all we need to do here is actually Act access this Sprite sheets pixels and find the right Sprite so for that we need we need two for Loops or Ned for Loop um two for loops and one of them is going to be y right so 4 in yal 0 Y is less than the size of our Sprites uh actually this will be the this one um and Y ++ right and then the same thing for X so xal 0 x is less than size x++ so this will this will go go through all of our pixels in our Sprites now what we need to do here is type pixels x + y * size equals sheet. pixels so our Sprite sheets pixels now and this is actually going to Target where it's going to be so first of all actually we forgot one thing sorry about that but pixels we haven't actually set pixels equal to anything so once we have our size we can basically go ahead and say that pixels equals new int size times size all right and again we could use this size we could use that size it doesn't really matter so this is creating a px uh this is creating a new pixel array that's actually the size of our Sprite um so essentially what that is is because remember our pixel size sorry our Sprite size roughly now is about 16 we've sort of agreed to keep our Sprite 16 the reason I'm just actually not defining it as 16 is because we could change that in the future or we could have Sprite set of multiple sizes which is why I don't want to really keep it redundant as as I said earlier but what we do want to do here is actually set that pixel array to be whatever number of pixels our Sprite contains so in other words if we have a Sprite that is 16x 16 it contains 16 * 16 pixels right and we've done this before we've we've done it in the screen class for um for the map size and the screen size as well and to contain every pixel in our in our actual screen so over here we've defined this pixels to be the size of our Sprite so what we need to do now is actually cycle through each one of those pixels and set them equal to the appropriate uh Sprite in our Sprite sheet so what we're going to do here is actually navigate to start off at that that actual point in in in the Sprite shet um image so we need to type uh sorry X plus this.x cuz again this.x again is going to equal the appropriate horizontal coordinate uh plus y plus this.y and then times the actual size of this right sheet so sheet dot size I believe sh do size we made a private uh let's go back to spite shet yeah we did make it private so let's make it public and let's go over here and po like that oops all right so again I'm going to go over this code right now so that you guys understand it what this is doing basically an overview of what this is doing is it's setting it's basically extracting a single Sprite out of our Sprite shet and it's doing that by setting this Sprites pixels all the pixels contained in this singular in this singular Sprite is setting them and this is again scanning through every pixel in that pixel uh object in that pixel image it's setting them equal to a specific pixel in the Sprite shade so it's doing that by again accessing every single Pixel it's accessing the actual Sprite it's actually it's accessing the entire Sprite sheet and then out of that it's extracting the appropriate pixel the sorry the appropriate Sprite and it's doing that again by going by finding the x coordinate which is just simply this we should probably should have done this.x plus X again it doesn't actually matter it's might be easier to read we're going to the appropriate coordinate so we're going this is probably a lot easier to understand if I actually show you guys uh an example of it um I didn't really want to though because uh we'll be we'll be looking at you know demonstrating this earlier uh later when we actually go to our game but if we if we go to the X coordinat so say we want to load um I don't know we've got we've got a Sprite in this cell and we want to load it what we need to do is actually go this dox so we're going to this dox is going to be like two let's just say we input two into here it's going to go 2 * 16 so it's going to go all the way that's 16 that's one that's two it's going to go all the way over here right and it's going to start at this uh let me just select a different color where are the colors window colors um it's going to start right over here all right it's found that x coordinate now it's going to go over here and do the same thing as you can see this do y plus y so it's going to go down all all the way here and it's going to find this coordinate and from here because it's going to keep keep setting those pixels as long as the Y is less than size it's actually going to scan all the way down here and all the way over here thus encapsulating this entire Sprite and setting it equal to pixels and that's how that works so I hope you understood that it'll be much easier I promise you when we actually get on to demonstrating this and and actually applying this into our game but yeah that's that's the end of this episode guys tomorrow we'll probably take a look at actually creating individual Sprites and loading them and seeing how they work but until then guys if you enjoyed this episode please hit the like button and I'll see you guys tomorrow with a brand new episode later guys [Music]