GameMaker Studio 2 Tutorial - Making Sprites from an Aligned Sprite Sheet

hello everyone in this tutorial I'm gonna show you how to create a set of sprites for use in a game where you have a character that's walking left right up and down as you can see on the screen right now as you see I've got this character here if I press up he moves up and walks left and right and down so the first thing we need to do is we need to get a sprite sheet that shows this now they're kind of sprite that you're gonna want to find for this the kind of sprite sheet you're gonna want to find is one that's got our characters laid out in rows and columns as shown here you will see this an enlarged a little bit in just a second here typically what I will do to find one that's like that is I will type in the word sprite sheet and then 4x4 that team seems to give me what I'm wanting if I'm looking for a particular character I will type the name of the character at that time as well but I'm just looking for a general one right now so I go to images here and so the sprite the kind of sprite sheets you were looking for are ones that have characters walking in the four different directions here's down left right and up that sort of thing we've also got you got to watch out for even though they're lined up you don't want like these cars that are turning around or something like that the other thing you want to look for is ones that typically have a white background if you get find one that has like a colored background like this you have to go through the extra step of erasing that background now this is actually going to be the one that we're going to use for the tutorial but we will and so I can show you how to delete the background if you do need to so first thing I want to show you how to download these from the internet and what to look for and again the best way to get the best copy of it so I'm going to open up a folder that I'm gonna store stuff where I'm going to store the images it should be near your project folder this is my project folder for the for the tutorial I'm running right now so what you don't want to do is once you find a sprite let's say we select this this one here you don't want to just download this one download it from here and just drop it over here you see it it looks okay but when you when you go to use it you'll find that it's usually a lower quality image and it's got a lot of distortion in it so we are not going to do it that way what you can do though is you can click on this image and get to this screen and what you're going to want to double check for is look inside in between these characters I'm not sure how well you can see it on the screen now but this is a faint there's a faint checkerboard pattern behind them that indicates that this sprite is a transparent which which means we won't have to delete the background or erase the background off it so this is a good one to use now even though this looks ok here what's the best practices is to go and click view image here and make sure you get the best quality image that you can now we can take this guy and drag them over and download it now this doesn't always work when you drag when you drag and drop this way sometimes you get a shortcut instead of the actual picture so I'm going to show you how to the other way to download it so I'm going to go back to our search sheet and I'm going to download the one that has the colored background click that guy do the same thing I did here click view image and drag this guy over and I'm going to do one more that I'm through previous experience shows me that it's it doesn't let me do it download it directly so I'm going to take this one again view image and I'm gonna drag it over and you see I get a slightly different result here I get a shortcut here so if this happens to you what you have to do is download it the old-fashioned way I'm going to delete that where you just right click on the image here and go save image as and then you'll find your folder find the same folder here and just save it ok so we've got them now this is going to be the one that we're going to be using so let's get to that let me close these down and now I'm going to open up my game maker project I've already got it open and got it named and and setup and everything so I'm you if you're at this point you should know how to do that so I am going to now import my sprite to use now I'm gonna I'm like I said before I'm gonna use the one that has a colored background so that you can see how to get rid of that background so first thing you undo is over here where it says sprites with your right mouse button oh if this is not showing then there's this little button right here this little double arrow thing going to the left here just click that and it opens up this window so if you go to sprites here you right-click and again right clear there's three mm you normally three buttons on your mouse the one all the way to the right is the one you want hit create and this window pops up now if you if your picture does not have a colored background the background is transparent the steps are slightly different but you can still do what we're doing here even with those so we'll just stick with that first thing you want to do is import the picture okay so we click on that and hopefully it'll open up right to the picture if not take a second pause and go find your picture wherever it is you saved it again I'm gonna pick the one with the colored background and click open so now you see I've got my my image here with the colored background so now what I have to do now is I've got to edit this and take out that background color and it's it's there's a hard way to do it and an easy way to do it and we'll try and get the show you the easy way which works in most cases here so I'm gonna hit edit image and you'll see this opens up a an image editor window this is very similar to paint those remove that or it's a very very simplified version of Photoshop something like that have you used some other photo editing program this is a very simple version of it alright so what we want to look here we again we want to get rid of all this so the tool we need is this guy right here it's called magic wand tool okay you see you hover over it it tells the name and so that's the one you want and then the trick is here you click somewhere in the area you want to get rid of now notice how it just gave me this tiny little strip of a area that it selected we even want a lot more than that so let me pull back here a little bit and you see this tolerance thing right here you click you click and you drag this slowly across here until you start getting everything you need now notice I still got a lot more but I got all this blue area down here so I'm gonna crank that up just a tiny bit more and again you don't want to go too far because then you end up getting like his you'll get healed started taking out his eyeball see like right here you see his eyeball got selected and his sword and everything so we've got to crank that back a little bit so we don't get his eye there you go so just be just be cautious with this and try and just get as much as you need okay I'm just and I'm gonna move around here so I can if you ever make a mistake just hit ctrl Z just move it around here I'm the way I'm moving this is off of the screen off of the image Here I am with the middle mouse button I'm clicking down and moving around to zoom in I just to go up and down I just spend the wheel to zoom in and out I hold the ctrl key and zoom and spin the wheel if I click on here and move it you see what it did it took all that stuff it would definitely want to do so I'm going to ctrl Z again and then once I'm sure that I got everything selected the way I wanted to I'll go ahead and hit the Delete key and you see that clears it up now I probably could have done a little bit better job because he had kind of got this little halo effect so I'm gonna undo turn this up a little bit more and again I want to avoid right on the threshold there okay I go and then go hit delete there we go that's a little bit better now but you'll see I've got a couple places here where I've got like a blue dot there and a blue dot under his chin here between the between the sword and his body so then I will just zoom manually and with the same tool again I'll go through and just delete or Zeeland there it is again if you get if you want to get really technical I can go and see all these little halo things with this blue right here you can go through and get that cleaned up a little bit as well okay so let me back out so there is our image now the trick is we got to get this chopped up into our piece of we've got another one little one right there let me get that real quick okay we back up all right so now again the trick is now to get this chopped up into our 16 sprites that we can use for our for our image the way you do that is in this same screen here you go to image right here and you're gonna go convert to frames right here okay and click that and then right here is where you tell it how you want to cut up I'm gonna extend this a little bit so you can see everything here in this kind of sprite it is gonna be very simple because everything is aligned and and it's all evenly spaced there's no extra space that we need to worry about so first of all you asked for a number of frames we need one frame for every sub image here or a character sheet that we got here so we look we got 16 4 times 4 so I just changed this to 16 and I click to the next next thing now it's asking for frames per row you see there's 1 2 3 4 going across here that's how many frames per row now you can click this little button right here too to do the same thing so you know I got 4 by 4 just like at the images but they're not fitting in the boxes so now the next step is to fix that the way you do that is frame width and frame height this one controls the width of each of these boxes here it's 32 pixels which is a dot on the screen there and I just click this button and keep clicking it until it they all evenly fit across there if you go too far you see that you go off the screen there you don't want to do that so it looks like this one at least is 48 and then we do the same for the height just double click this and we get to where we need to go too far so 72 it looks like 48 and 72 these other things are meant to for if if you want to do like say just this middle section you know I can see if I click one there see how it it doesn't give me it takes out the first row they click the one here then it's not giving me the top row so leave those both the zero for this case horizontal pixel offset that what that does is if there is some sort of border around it that that moves over the all the boxes over a little bit again in this case we just want to leave that to zero and as you can imagine vertical does it for in the vertical direction see it drinks the Box down a little bit so sometimes you have to mess with those to properly frame all of your characters here and then horizontal and vertical separations that just puts a space between them and in some cases you may need it in some cases you may not I see I've got them overlapping here son but both of these again you can set to zero but that's what they're that's what those are therefore in this case we don't need to worry about them so we're just going to leave them all at zero okay so I click invert and then it gives me a warning if you do this it's going to erase anything that's in there now which is fine this is not we want we don't want this big picture we want the 16 individual image so we hit yes okay so now you can see them all up here I'm gonna zoom out a little bit so you see the whole character and I hit this animation button right there and it goes through all the sub images you see all the sub images going okay so that's not this won't be helpful for us in our game so we're going to get these arranged so that the each direction has its own spread so go ahead and close this sprite and before we exit this we're going to give it a name here let me zoom in here so I can show you talk about naming conventions in game maker and in a lot of other game making programs it's good to have some sort of naming convention for your different assets in this case this is a sprite so I'm Ben this is what I do and again whatever you decide to come up with is fine just make sure you're consistent I always start off with the with lowercase SBR to indicate that it's a sprite and then I'll put the name of the object and let's go with something a little more classic than person how about night okay and then I will that that's how I'll name it now in your naming convention it can be whatever you want again just somehow indicate that it is a sprite some people do this they just go s night like that or if you look in the game maker tutorials a lot of times this is how they do it the SPR underscore night all lowercase like this so however you decide to do it it's fine just be consistent so I'm going to go back to the way I do it I'm going to zoom out and now I'm going to go ahead and exit out of out of this there's a little X right there to exit out of it now what I need to do is I need to duplicate this one for each direction now I want to keep this original one here intact so in case I make a mistake with one of the other directions I can always go back and duplicate it and create another one so the couple of different ways to duplicate if you right click on SPR night you come down here uses duplicate it right there you click that and it does it but if you notice it'll say ctrl D right there which means that if I have that selected like that and I hold down the ctrl key the ctrl key for those who don't know is on the lower left corner of your keyboard I'm gonna take a second look find it okay you just hold down the ctrl key and then tap the D key as many times you need to do create the four extra ones see so now I've got that I've got my original one up here and then I've got these four extras okay so now I'm gonna just simply open up one of these and I'm gonna go over and I'm gonna rename it I'm gonna call it night left because this is gonna be the sprite I used for the left character and i zoom out and you'll see if I look along my sprites here I'm gonna open this up a little bit so I can so I can see more here so you see there's all my sub image that make this guy up and again if I hit this this play button right there you can see all the different animations okay avoid clicking down on this thing you'll see why I know later we'll before we exit out the creating sprite we'll make sure that everything is lined up here but if you start clicking down here you can cause problems later on alright so I'm gonna pause this and I'm gonna see okay here are my left my left sprites okay so what I need to do is get rid of everything else but those four there's a couple different ways to do that you can click on the image and hit the little X right there okay and just confirm that you want to do that you can also click on the image like this and hit the Delete key now for those of you who are used to Mac's the Delete key is not the backspace key okay it's a different key look around on a keyboard normally it's near the back scape backspace key but it is actually a different key so make sure you got the right one so hit delete and it does that as well if you want to do more than one at a time you can select the first one in a series that you want to get rid of see I want to get rid of these two so I hold that one and then I can hold the shift button down and get them both at the same time and hit delete you can also do a several that are out of order if you hold down the control key so you can click them out of order but you can if you want to see like right now I just want these four so I'm gonna get rid of all eight of these so I click on the first one hold the shift key down hit delete there they go okay so now if you look over here you'll see my sprite now looks like he's pointing to the left if you take a look at yours okay so we are done with this guy so I'm gonna go and close it just open up the next one I'll walk through it again I'll go a little bit faster this time this guy we're gonna call night right and we're gonna find the ones where he's facing to the right which are these right there okay so I'm gonna click on the first one hold the shift key click all the way to the one that's right before the one I want to keep hit delete say okay then delete the last four okay so now I just got that and I can click this just to see how it looks okay it looks good okay so we close this guy do the next one we're gonna do something I'm gonna do up and the order that you make these in doesn't matter as long as the name name matches the images now for the up key just to avoid a little confusion when he moves up on the screen screen he's gonna be facing away from you so this is these are the four that you want so I want to get rid of the first 12 here so I'm going to click that guy scroll over here and click this guy I'm holding while holding the shift key click this guy and you see all 12 of those are selected hit the Delete key and okay alright and last one night down down is when he's facing towards you that's why he's walking down the screen that's why we're picking me so I'm gonna pick the last 12 now mm-hmm okay there pick the LAT and pick the first one after the down sprites and go to the last one image hit delete and there we go okay now now we just confirm that they they all look good okay so now I no longer need this original one here okay so I'm gonna go ahead and just delete it at this time and then the last thing before I end this tutorial is I want you to go through and make sure that your handles for your sprites or your origins are all in the same spot so I'm gonna just double click this first one and you'll see this little arrow this little crosshair right here if you click it see if you wanted to do not to click over here because you'll see this is your origin right here now depending on how you want your game to be sometimes you want your origin up here in the corner sometimes you want it in the middle sometimes you want at the bottom at his feet different situations require different things but for this game just leaving it in the top left corner is fine so you want to go through all four of these and make sure that this says top left here and these two will say origin okay and let me show you something a little something while we're here if you click preview mask this right here is what the computer sees of this character okay you see this you see you see this right here the computer sees that gray square so when when it's interacting this again it makes it simpler for the computer that's what it sees now you may wonder why it's got all this extra space on the side here but if you go through your sub images here you'll see that in one case see that sword goes all the way to that edge there so it picks the largest or the smallest volume that it can it can use to to fill that space and in the game you may have other problems that you want to address with it in fact is it's probably something we should talk about right now anyway all right so I'm gonna open up all four of these and just make sure they all say top left and then the next thing I want to do is we want to make sure that the collision masks match on all of these now the one where he's walking up and down are probably the straightest ones you want so if you go to collision masks right here and you see he's got a square now you see his sword and this one is dipping down so this is something you need to worry about his sword is dipping down almost to the end now if you look on your other characters his sword does not go down that far and he will this will cause problem so what you got to do now is you want to set your collision mask here and change it to manual and what the gold the next goal we're gonna have here is to try and get these so that they are all the same in all four of your directions here so I'm gonna bring this up to his feet here like this okay and I'm gonna look at the bottom 68 is the number I want the head and the sides look okay okay so I'm gonna remember these numbers 741 1 and 68 okay so I'm gonna go to the other ones let's start from the top collision mask manual and if I think it was 741 and let me refresh my memory on that other one one and 68 so I go back again to go back and forth I just double click over here so just 1 and 68 now 68 was already set so now this shape the computer will see this guy in the same shape here and any other one it's the box is exactly the same if you double click down here see that box is exactly the same so let's do the other two same thing collision mask manual make sure you exchanges to manual and was 741 I'm usually men on this so you can see a little bit better and then one and sixty-eight gain if i zoom back out you can see it matches [Music] it'll match the other ones here say so the square is about the Sun 741 168 seven 741 168 in this guy we got to do also as well so collision masks manual 741 168 now this is for this right okay your numbers made be different but just make them all the same it will make your life simpler in the end trust me okay now okay now I think we are actually done with this tutorial let me go through and just close these out and we will use these frights in another tutorial okay alright we'll see that

Channel: Eric Gallery

Views: 29,670

Keywords: GameMaker Studio 2, Tutorial, Sprites

Id: qfZxQYxLshE

Length: 25min 6sec (1506 seconds)

Published: Tue Sep 05 2017