Ep. 108: Extracting Sprites - Game Programming

Key Takeaways

hey what's up guys My Name Is AO and welcome to episode 108 of game programming So today we're going to talk about actually extracting our sheet cells into individual surprises you can see we've got this too here um so the idea is I finished that uh font this will be up for download probably next episode cuz we're not actually going to use it in this episode but I finished this um I'm probably going to add another row here and add more symbols because we don't have anything like square brackets curly brackets back slashes for slashes we don't have any of that stuff yet but um this is what it looks like right so we've got uppercase and lowercase characters as well is a bunch of symbols um I'm going to talk more about this in the next episode cuz that's where we're actually going to implement uh the font rendering but basically just so you guys understand our problem and you can understand th the solution for it we've got all these different Sprites right we we want to end we actually want to render each letter individually of course um so our problem here is that we want to extract essentially each one of these letters and each one of these uh symbols and numbers each one of these characters we want to extract into its own Sprite okay it needs to be its own Sprite so that we can render only it okay that is the idea um so to do that uh we need to make a method for that okay so we don't actually have one I actually thought we uh kind of did which is why last episode I was going to um just do the font stuff this episode but we don't okay so we could either implement this in the Sprite class or the Sprite shet class but essentially what we need is an array of Sprites one thing I really like to do by the way is um instead of just jumping straight St away into the Sprite or the Sprite sheeet class and uh and I guess pulling uh and I guess you know just starting to write the code for the method there I'm actually going to write like what we want first right I'm actually going to write like the result first of how I want to use this new method that we're about to write so I want I want it to work like this right so we want to have a private static Sprite an array of Sprites here okay we can call this characters will equal uh probably something along the lines of sprite do split maybe we'll call it split and that will be in charge of splitting that font sheet okay that is what I want in fact let's probably do it in the uh in the Sprite class okay because it does return an array of Sprites makes sense um so that's the first thing I'm going to do so literally right now I can just go create method okay but I'll do it for you guys in case you're not using Eclipse if you're using like Sublime text or something then you won't have that obviously okay so over here under this I'm going to just put up public static Sprite the return types going to be a Sprite array of course um and I'll call this split like I did before and all it's going to take in is the Sprite sheet all right and that's it and it's going to return uh Sprites let's straight away let's just type in Sprite Sprites and then return Sprites all right so straight away we'll we we uh we'll type in what we want to return okay this will tell you how's been initialized don't worry we'll initialize it uh eventually anyway so basically let's start writing this algorithm it's going to be another one of these algorithms like we had in the Sprite chat like this one here but it's going to be bit more simple so don't worry anyway um so uh first of all we actually need to make a few adjustments to the Sprite shet class I was looking through this earlier um we've got three variables here width and high now this is not the width of the Sprite sheet right this is the width of the amount of Sprites so this isn't that that's one really important distinction to make so what I want to do is I'm actually going to make a public in sorry a private private int um and I'm actually going to call it withd and high I want to make it two okay these are lowercase so the uppercase ones they're public and they're final okay which means they they are constants that is the that's the width and height of each Sprite okay in fact it's the same as size if it's Square okay so if our Sprites for example here are 16x 16 that is the size of each character 16 x 16 pixels this would be this would basically be 16 and both of these would also be 16 that's the idea right that's what it is now what we want though is to actually physically know how big this sprad sheet is in pixels okay we need to know that uh how big it is horizontally so the width and the height okay vertically we want to know those two we need to know that that we need to know both of those pieces of information so that's why I've made a width and height this is going to be the width and height of the actual Sprite shet okay so down over here in load where we actually load the file um I'm going to get rid of w andh here I'm going to get rid of the Declarations and change this to be width and this to be height so it's actually setting the fields okay um and then of course we'd have to replace width over here where we have to um everywhere where we had W before and then high as well okay simple as that and that's it that's the only change I'm making um we need to make a getter for that as well so it'll Simply Be public in get width uh do we already have we don't have anything like that so this is perfect and that will return width right and then public in get height okay and that will return height okay and that's pretty much all we need to know okay we just need to know the actual width and height of the Sprite sheet that we're loading in pixels okay and then um we could just pass in the parameters here but then we that we shouldn't have to right because Sprite sheet should know how big it is um that that's just one of the requirements okay so the first thing we need to evaluate now is um essentially uh I guess the amount of Sprites okay now the Sprite sheet doesn't contain that information but we should know that information okay so let's talk about how we can work out um how many Sprites are in the Sprite sheet uh using very very simple maths so uh imagine you've got a Sprite sheet like this okay the width and height of the Sprite sheet is 32x 32 and the size of each Sprite as you can see down the bottom here is 8 by 8 pixels all right um so how can we work out how many Sprites are here if we just have the size of the Sprite and we just have the width and height of the um of the actual Sprite sheet well what we can do is pretty simple right we need to find out how many pixels are in this Sprite and divided by how many so we have to find we have to figure out how many pixels are in the Sprite sheet and divided by how many pixels are in the Sprite are in each Sprite so uh we know our Sprite shet is 32x 32 which is 1024 right if we multiply those two together and then we also know that each uh Sprite is 8 by 8 so 8 * 8 is 64 right and if we divide 1024 by uh 64 we get 16 okay so we know that there are 16 Sprites here you can you can obviously see it here it's 4x4 that's 16 but um that's how we that's how we can work it out mathematically so back to this now yeah we'll make an amount variable so that is the amount of Sprites that we actually need to create um and we'll set this equal to sheet do width uh sheet. get width right so that's the width in uh in um in pixels and then we'll multiply that by sheet. get height okay and then we'll divide this and I put this in brackets I don't you don't really have to obviously but just to make it easier to see um and then over here I'll simply put up uh the size of each Sprite right which for us will be sheet do width time sheet do height okay I really should call this like Sprite width or Sprite height or something um in fact I probably will just because um I'm going to refactor this alt shift R um just because uh it's um it it's probably hard to read okay so Sprite width and Sprite height simple as that um these should be equal to pretty much size if our thing is square so I could have put Sprite size times Sprite size but just in case in the future we want to um load Sprites that are not Square in then we'll have to uh change everything so let's just write it normally now okay and then we'll set the amount of Sprites that we actually create will obviously be well amount right that's how many Sprites we want to actually make um so in our case uh it would be um what is this 13 * like 6 right what is that 13 * 6 52 uh 78 I think am I right there let's check 6 * uh 13 yep 78 so we want 78 we have to return 78 um Sprites so that's in this case amount should equal 78 okay now uh what we want to do now is essentially it's going to be made up of uh four for Loops okay so the first thing we actually need though is a way to keep track of I guess the current Sprite that we're actually dealing with okay I'm actually going to write out the for Loops first so that you it'll be easier for me to explain um but essentially YP is going to be the Y position of the current Sprite that we're up to okay so this will simply be um sheet do uh get width divided by sheet uh do Sprite height okay Y ++ and then we'll uh do the same thing for X XP XP support ended for XP recently by the way L topic I guess all right not that I use XP or anything anymore Windows XP but uh you know end of an error I guess all right China still use they basically live on Windows XP anyway um so XP uh for sorry this should be shape width what have I done here I butchered that so that should be um height this should be width okay great so what this is going to do is because since we're dividing by Sprite width this will be basically the amount of Sprite wres that there are horizontally okay that's it um yeah okay pretty simple stuff um so in other words this number for our Sprite sheet will be like 13 okay because that's how many of these there are okay um and this this sorry that that's what XP will go up to XP will go up to 13 YP will go up to six okay simple as that it'll actually go up to five but you guys get my point okay great so cuz it'll start at Zero from 0 to 5 um now that we've done that though we are we basically get to work with the current Sprite but what we need to do now is read every pixel of that Sprite so to do that we have our y equals less than simply sheet do Sprite height right Y ++ and then the exact same thing for X all right except of course we're changing all these to be x uh X and then Sprite width and then X all right simple stuff now um what we need to do now is basically uh we need to create a pixels variable right so in pixels these are going to be the actual pixels of um of uh of the act of the individual Sprites so we know that Sprites is 16 x 16 right so we can simply go ahead and set it equal to sheet do Sprite width times sheet do Sprite height which both those should be 16 so 16 * 16 of course will equal um uh how many pixels we have in our Sprite all right uh great so now that we've done that um we can basically set pixels X+ y * uh sheet do uh Sprite width right equal to the extracted pixels so just to see what just to show you guys what we're doing right um I'm going to um resize this to like 16 by 16 um and then I'm going to generate a grade that has so this is a single Sprite yeah what we want to do is we want to go into our file here right and what we want to do is we want to um the these for this for Loop right these two what they kind of do right is they find out the index of where we are so let's just say we're up to Q okay the Y here would be one right and then the X would be 1 uh 0 1 2 3 it'll be three okay so 1 uh by 3x 1 right 3A 1 that is the coordinate of this now what we need to do is we need to physically take these pixels these 16 * 16 pixels and pop them into their own pixel array and then make a Sprite out of that pixel array that's our goal here so one thing we have to realize is that you know how I seted these two this will be like up to this will go all the way up to five from 0 to 5 this will go all the way from 0 to 12 right so 13 values for this and six values for this we need to actually convert that into basically pixel Precision because this coordinate this one being down one isn't going to help us it actually needs to be like okay 1 * 16 so we're down 16 pixels start from the 17th pixel essentially well the 16th pixel the first one is zero all right simple as that so to do that whoops let's not delete our full Loops um to do that we need to make some kind of offset um and uh I'll show you guys basically what it's going to look like so we want to set we want to grab the pixels from our sheet right uh and this will have to be get pixels um we want to grab the pixels from our sheet and we want to read uh the appropriate I guess version of those pixels so XP * X right sorry XP * um uh sheet do Sprite width okay um and then we also need to add on X I'll actually add the X1 first all right so X being the current pixel that we're reading and XP uh times sheet time Sprite width will be the starting horizontal pixel of the Sprite okay now because this is very long I'm actually going to take this cut it and make uh two variables so XO will be the X offset that's the X offset y offset will be identical all right but the idea is this finds um this will simply find the current pixel that we're reading from the Sprite sheet so for pixels it's really easy because it's just going to be you know it's going to start from zero but because the particular Sprite where the sprad sheet is not at 0 0 we have to figure out these offsets okay now um here we'll just simply go x 0 plus y z time sheet do get width which will get the width in the pixels of course all right great so let's do that now what's up with this get pixels method it's undefined we don't have that okay let's go let's open our Sprite Shake class and see what we've got here so we've got uh yeah so we don't okay looks like we don't okay that's all right um let's go ahead and make okay under the constructors under here we'll go public in get pixels return pixels all right so we' got a read only way of getting pixels now fantastic okay that's it that's pretty much it that's not really it but that's pretty much it what we need to do now is we need to add these pixels we want to create a Sprite out out of those pixels now okay how can we do that well um basically uh you know it's it's I mean okay if we look at the Sprite class which is our current class you can see that we have a way of actually making a Sprite out of Simply pixels yeah simple stuff okay um now uh that's pretty much all we need to use for this okay um so after we've added all of the pixels remember we we don't want to do it in the middle of the fallet we want to add all of our add all of our shap pixels into this pixels variable and then all I'm going to do is I'm going to hit up uh Sprites now this is where it gets interesting because what I want to do is I want to hit up new Sprite uh size and sorry not size and color um let's find the correct Constructor here um pixels width and height right that's the one um that's the only pixel thing we should have uh so pixels and then the width of course of the actual Sprite will simply be sheet do Sprite width and then this will be sheet do Sprite height all right now this is what I want to do this is want to this is actually physically the Sprite object I want to add to this array but this isn't an array list so I can't just go do add I actually have to know which index in the array I want to add this to so what we need is a manual way of keeping track of which which uh which element number which index we're actually up to so to do that we can actually just make a variable called current okay this will be the current Sprite that we're actually working with okay so over here I'm going to set um Sprite Sprite current equals new Sprite all right so the current Sprite that we're up to we will um we'll actually add to this uh we'll add a new Sprite based on these pixels to that okay and then what it will do is it'll go back up to this and it will deal with the next Sprite in our Sprite sheet extract all the pixels from it and then add it into a new Sprite all right I'll keep doing that until we uh do it for the entire sheet now uh one thing we need to do is obviously increment our current um Index right and we can do that by just simply typing current Plus+ what that will do is add this right then uh basically add one to current now to make this shorthand you could just add the Plus+ into here okay what that will do is it will look up the current the value of current okay so for example zero for the first one uh it will evaluate this expression um uh this new Sprite stuff it will um it'll actually uh you know run the Constructor for that whatever do what do whatever it needs to do and then it will add that into the current index of Sprites and then it will increment the current variable after it's added it okay if you do something like plus plus current right what that will do is that will increment at first so the first one will be zero U the first one will be one um and then it will actually set sprit equal to current so we want to do it after obviously that's why we put the Plus+ after okay anyway that is the idea okay um and then at the end of course we want to just return Sprites and we've already got that that's it that is the entire method what that will do is extract every single Le Sprite in your Sprite sheet into um into its own Sprite and return that so just to test if this works okay this is already here um it's telling us we haven't used it but that's all right what I'm going to do is I'm going to make a new instance of the font class in the in our main class okay and we're going to see because obviously when the new instance gets created for the first time it's going to run these two static Fields all right because they're static um so if we go to game okay let me just verify okay so fonts aial PNG is indeed I think it should be um let's see fonts aial PNG yep it is indeed in here there it is wonderful um let's go ahead and go to game and then I'll just you know maybe after game start I'll just type in font font equals new font now I think we're actually using Java's font here okay so I'm just going we don't need this anymore um that was just for the Mouse stuff so I'm actually just going to grab this Cod and uh and delete it okay so this set color just gone all right gone and then up here um I'm going to grab font and just delete that as well the import and now it'll tell us that it doesn't know what font is so we can import our version of it which is com. the. r. Graphics that version not the Java awt version okay and there we go that should work now let's try and actually run this okay I'm going to hit the debug button I was actually expecting it to crash um but it didn't okay let's actually um oh one thing okay one thing I did add actually without telling you guys uh is um inside the Sprite sheet I think that's where it is yeah I added a system out to print line thing that says trying to load okay and that'll actually tell us to okay let let me just let me go through this quickly um and I'll I'll show you guys this is like a bonus feature for the episode the episode's done by the way all if the only thing you guys wanted to know was um whether it loaded or not uh then um uh yeah you can you can probably hit the like button and then just get out but um this is like a bonus little DVD extra um so uh I added a system out of print line that says trying to load plus path path of course being when whenever we set the Sprite sheet thing to path it will come up here um great so what I want to do is um we got this trying to load plus path I'm actually going to remove the Ln from that okay um and what I'm going to do is in this catch block okay what I'll do is I'll put in um system. error. print line um and then something like failed okay so it'll be like trying to load path and then failed right and then we can put like a new oh it would be a print line so it'll be good all right um and that what that's actually what will happen if it fails to load okay if it's successfully loaded though um you know we'll be fine I guess okay so B yeah so what I mean is um if it's successfully loaded we actually want to um say that it loaded successfully so we'll put this up here this print line um uh and we'll just um put like sued or something in all right so uh just a preview of how this will work uh if I just make this console a bit bigger so these are all the these are all the sprad sheets we're loading if I run this you can see um it says succeeded uh I might actually add a like a dot dot dot to make this look a bit better it's all it's all about the Aesthetics really but uh if I load this up um it'll say succeeded for all these uh whereas if it failed so if I miss Bel aerial put an S in there or something and I started this um it uh actually didn't say failed for us which is wonderful but let's go back to um let's go back to Sprite shade um okay it's because we didn't have this thing if we actually run it though um and then go over here um that's okay that's interesting so it's it's generating an exception in okay I think that's part of the reason um we're catching an IO exception here but I think what it's doing is uh it's actually catching it's actually generating an a exception initializer error and the reason it's doing that by the way is because um this is static and it it can't initialize the class because we get an error so it probably won't really work in this case but the idea is that if we um let's just say something that we don't oh that that's that's like the only way that we load spry Chase isn't it h interesting interesting interesting interesting so what we can do actually um if we wanted to um to make it because it is throwing an exception initialize error what we could do is simply add another catch block that says if we catch um an exception I don't think we're using Java 7 though um let's see we're using Java 1.6 if we w we could do a multi catch but we could do a catch uh exception initializer right um okay and then we could actually put the uh failed into here and the stack Trace I mean um we you just keep that there anyway okay so system err print line failed okay and that's what happens if we throw an exception initializer out so if we run this um what we should get okay well right now everything succeeds but if I go to font and I misspell aial or something go back into sprad it run this it uh actually okay no it won't so there's a number of exceptions that get thrown let's go ahead and just make it exception okay and let's run that so now you can see that what happens is it goes trying to load all these things succeeded and then at the end trying to load fonts real there's no such thing so it failed okay so it tells us what gets loaded and what doesn't so this is a bit of a debugging thing as well but that's basically what I added and um yes so I hope you guys enjoyed this episode of game programming it is pretty long but uh next time we're actually going to talk about rendering text so by the by the end of next episode 109 we should be able to draw text onto the screen all right be sure to hit the like button if you guys enjoyed this um and I will see you guys next time goodbye [Music]