Assets and Sprite Management | Farming RPG Tutorial: GMS2 [2]

hey there guys so today we'll be doing sprites so we're going to set up the sprites for our character and a couple NPCs so now I'm sorry this video has taken a bit longer to put up I realize halfway through that I wanted to do things a bit differently because a lot of the tutorials out there already about sprites they show you how to set up the sprite like this so we have a player character and all the frames for its animation we can play the preview here we can set the speed set up its collision masks here and you can imagine in our game we need a couple other sprites like this to represent the full range of our character's movement so this sprite is for when the player is moving to the side but we'd also need separate ones for up and down so we need three sprites for movement and we're actually going to be doing things differently but let me just show you how you go about importing a sprite from say a complete sprite sheet so this is my sprite see right here you can see it's got a lot of different animations here is the walking ones we've got shooting a bow and arrow I think here if you have also got dying and we could use all of these for a lot of different player actions but if I just wanted to grab the ones relevant to moving say I only wanted to import these frights right here for the side movement I would want to import just this strip so in game maker X I just start off with a fresh new sprite here what I do is I double click here to go into the image editor so we come up to the image here we've hit import as a strip image right I don't want import the entire image I want to just import a bit of it so import strip here is my sprite open and this little window will pop up let me just make it a bit bigger and remember to move around these little windows like this used are holding the middle mouse button and to zoom we hit ctrl and scroll okay so here is the sprites that I want this is the walking to the side animation so the first thing I want to do is come up here and it's asking me how many frames are in your sprite in your animation so we can count them here and we can see that there's nine so we're going to put nine and then it's asking how many how many frames per row so rows go across so this nine and then it's asking how big the sprite is just for one frame so if you haven't made the sprite you might have to go into this frame and see what fits but I can tell you that there are 64 by 64 each so let's put 64 by 64 and now we're going to want to set the location so I can just click around and I can kind of approximate it but I want to be really precise I want it to be in multiples of 64 so for the horizontal offset I know that's going to be zero because we're starting from the start of the image and for the vertical offset what I normally do is I just kind of approximate it like this and then I bring up the calculator and I'll just go 713 divided by 64 okay so the closest is 11 so 11 times 64 is 704 so that's the coordinate that we want seven zero well there we go so that's the strip that we want if we wanted to do the downwards movement or the upward movement we just subtract multiples of 64 from this but we've got it all set up so let's hit convert yep and it's imported it for us and we can preview the animation here and we just do that a couple times to import all of the directions that we want or all the actions that we want and this is a fine way to do it this is the way that most people will show in their tutorials it's sort of the classic way to set up your sprites it's certainly game maker is certainly set up this way to help you do this and help you preview your animations and it's great for action games or platformers or games where your characters they have a specific design that doesn't change throughout the game right it's always the same person they've got the same clothes but for our game and for a lot of RPGs you might want to allow your player to gain new clothing over the game and change the character's appearance change their hair or even just have a character creator so what we might want to do is instead of drawing our complete sprite we might want to break it up and draw everything separately so we'll draw the base then the clothes whatever our clothes are that we currently have equipped and then our hair and we're going to be drawing those all separately in layers and that's what I want to do today so we'll be setting up sprite layering system I'm also going to take it one step further in an effort to reduce the number of sprites we have so instead of importing everything as strips for all of the different movement directions we're actually going to import the entire sprite sheet and then manually draw part of the sprite so this is a bit more advanced but I thought it would be interesting to do things a bit differently and I hope you can appreciate why you might want to set it up this way and why it's heavily dependent on the kind of game that you're making so let's jump back to where we left off last time and let's get started all right so first things first we're going to be getting the assets for our sprites so I'm going to be using sprites from the liberated' pixel Cup and this is a sort of repository on github that just has a bunch of the different assets of the characters if you've got your own sprites to use that's totally fine or you can go and make your own if not just follow this link and I'll link to it in the description and you can get them all from here so what I want you to do is design a few characters so design a player character and maybe a couple NPCs and what we're going to be doing is we'll get a base which is kind of like a skin color a hair some shoes pants and a shirt and you can have different ones for all the characters or if you want you can just make them all the same or whatever you want so if you scroll down you can also preview all of them all the assets in this link here so this is sort of an online character creator so let's just open it and so you can come into here and you can preview what everything looks like and show it up there so you can build your characters and then come into the assets and and download the matching PNG files let's come back let me just show you a couple examples so let's grab a hairstyles it's coming to hair mail let's go playing and so here you can grab whatever hair color you want let's discard rain here it is let's save it and now make sure that you're saving all of these in some kind of consistent way so what I've done is I've gone gender and then I've labeled the kind of asset that it is so here I've got male hair the style of hair bad head and the color and for all the other kinds of assets I've named them in this sort of consistent way too so I've got gender per asset type Sophie's style to the Brutes and the color and I've done similar things for the parents and the torso so yeah once you've got a bunch of these kinds of assets we can start importing them into the project or you can just download the ones that I have selected I will leave a link in the description to that as well all right let's come back into the project all right so let's start importing the assets so just like before I want to maintain a consistent naming strategy so I'm going to be creating distinct folders for all my different kinds of assets so I'm going to add a group when I call this characters and this will be the kind of umbrella that holds with the other folders so going to create another group the basis and another one to have sir legs and feet and let's start importing the bases so let's create a new sprite to import we're going to be importing the entire sprite sheet and I've stored them here put in put all of them one by one so where it's on first and I'm going to call this fur face female 1 and do the next one yeah - and might just fall for this a bit all right and that's finally done so you should have something that looks like this and all your naming should be consistent it's fun if you've got more or less than I have but we're done with these for now so we can collapse all of them and close this so let's start coding so it's coming through objects and go into the player object and we're going to be using the drawer event so for now let's just try and draw part of one of our sprites so the function that we're going to be using a lot today is draws right part and let's just open up the documentation on this one so we can have a look at what it does so you can see here all the different arguments that we have to give it we have to give it the index of a spike to draw and then the frame so remember because we're just importing it we only had that one frame and then we have to tell it what part of the sprite that we want it to draw so what we have to do is give it the left coordinate which is the x position to be this point right here in this part the top so the Y position of the top left corner of area to draw so that's up here and then the width how big is the area that you want me to draw and in the height that is enough information for the function to draw a specific area of the sprite and of course then we give it the coordinate to draw that part - all right so let's give it a sprite let's give it to give it the base of whatever your character was going to look like when you were designing the player character so I'm going to give it base 5 this SP our base female 5 and now I'm giving it the sub image so we're putting 0 because remember that sub images start at 0 instead of 1 just like a lot of things in programming now we have to get the coordinates so let's open up this sprite so we can have a look and just like before I'm going to get the coordinate for this square of the walking so if you remember our frames they come in 64 by 64 and the coordinate for this frame was 704 for the y offset and it was zero for the horizontal and that's the top-left corner that we want to be giving it alright so let's go back to the player so if the left we put zero so that's off we've got seven at four the width of the area that we're drawing 64 same for the height and let's just draw this at the objects XY location so hopefully it will draw that one frame of the sprite we're not going to be drawing that white square that we made anymore because by making a drawer event we're overriding the default where it would just be drawing whatever spark it's assigned to instead we've just got a drawing this sprite so if we run the game hopefully we should just see our little frame yep and there it is so the first thing I want to do is come into the room I'm just going to change that background color because it's a bit harsh and we can't really see the character I'm just gonna make it a greeny colour yeah that'll do so we'll just leave it like that for now so the next thing I want to do is get it animating it's going to do this will have to be changing so let's just come back to here so we want to be changing that x-coordinate of the frame we're getting so the Y will be saying the same we still want it to start here but we're changing the X so we want it to be jumping in multiples of 64 to draw each frame come to the player and let's set up a few variables so instead of just having these direct number input like this we're going to put variables instead and we're going to be changing these variables so let's put X frame here and y frame here and for now let's just set X frame to be that variable zero before and the y frame to be 704 now let's try and change x-frame let's try and get X RAM to increase as time goes on so we're going to be increment increment frame for animation so let's go X frame let's just plus equal let's just add to it one this should move the area that we want to draw over in our sprite sheet let's run the game then just see what that looks like it's not going to be perfect I just want to show you so you can see it's kind of scrolling over so it's not going up in those multiples of 64 we want to be going up in multiples of 64 and also you can see here that it's run out of frames it's just it keeps increasing there's nothing setting it back to the start so we also need to do that so let's set up a variable for the total length of the animation let's go there and in length and remember it's nine frames long so nine I'm going to say if X frame is so less than the total animation length but we actually have to put minus 1 because remember the frames they started 0 so if we haven't hit the maximum length of animation then go ahead and increment it otherwise we're going to set it back so I'm just tapping forwards here to 0 so that will fix the looping problem but now we have to fix the scrolling problem so we wanted to be going up in those multiples of 64 so we can actually do that from inside here so first I want to set up one more variable let's go the frame size and set this to 64 and now we can put this variable in place here okay and I'm going to have X frame instead of going up in pixels I'm going to have it going up in complete frame so I want to be 0 and then 64 128 and etc so I'm going to go X frame and I'm going to times it by the frame size let's have a look at that so that's working but it's going way too fast right let's decrease the speed so let's set up a variable for speed so and speed and if we come back to the sprites you can see that it defaults to 15 frames per second and I've had a little play around and I think 12 frames per second looks pretty good for our sprites so I'm going to put 12 but to get the per second thing we need it to be a ratio so we're going to put an in speed over 60 which is our frames per second now this will bring back our problem of scrolling because X frame it's going to be equaling zero and then zero point two three four until it hits a full number again and that's when we would be getting one time 64 two times 64 but we'll be getting decimals so it's going to be showing the scrolling again so we need to make X frame only ever equal a whole number so we want to round it there's a few different functions for this we can round it up down or to the nearest whole number we want to run it down completely so we're going to put we're going to floor the variable what's called so I'm going to put the floor to X frame all right let's have a look at that there we go so the next thing to do is get us right to change depending on what direction we're moving and the thing that we want to be altering for this remember is the y frame so that we can get this coordinate instead of this one this one for left and this one for up so depending on what button we're holding down I want to change the Y frame to be a different value so how can I get what direction I'm facing we could do keyboard check that's how we set up the movement if you remember but we also have these variables that we set up right here that will also carry the information for what direction we're facing so if you remember if we're pressing the left button move X is going to be negative and if we're going right move X will be positive for going up move Y will be negative remember if we're going upwards it's actually negative and if we are heading down then move Y will be positive so we can use this we can go if move X is lot is smaller than 0 then the y frame so let's get the Y offset for each of our movement directions so starting at 0 0 1 2 3 4 5 6 7 8 so up is 8 9 is left 10 is down and right is 11 so let's make a note of that and let's come back so if we're moving left I want Y frame to be 9 and before we forget we should also make Y frame be a multiple frame size and else--if move X is larger than 0 then would be moving right and the y frame to the right movement was eleven copy a couple more times and if Y so now this is for up and down so if move Y is negative then we're moving up and we want the y frame to be eight and finally if we're going down move Y will be positive and the y frame we want at ten great so let's run that and have a look I think it started up off blank because in the create event we made why for a bit cool zero but that's fine but you can see that the movements working left up right and down perfect so one thing that you might be noticing is one of the frames is sort of off and it's actually the very first frame because that's the idle that's how the artist is made nice bright sheets so all of these are actually the idle sprites and they look a little bit weird in the animation so we want to exclude them so instead of going back to 0 I'm actually going to be going back to 1 so we're sliding it 1 we can change X frame I'm going to change it to a all right and let's just quickly check that so you can see the animations a bit smoother now and finally we want to make it stop when we're not pressing any of the buttons so we want it to go to that Idol which will be frame zero so if we're moving this is all of our movement cases so if we need if we're not pressing if none of those are true and that will mean that we're standing still and we want to change to the idol so else and we can go so would be X frame we want to be zero okay there we are so I'm making a lot of progress next thing to do is to draw on the clothing layers and now because of all the setup that we've done this bits actually a lot easier because all of the coordinates for all despites are going to be exactly the same so if you open up one of these you'll see that they will correspond exactly to the base sprites so I'm going to put in some comment sections so we're going to go draw character base I'm going to copy this and put feet and clomp flags shirts and hair and now the order is important here because this is the order that it's drawing all of these so we want the base to be drawn first because we want everything else to appear on top of it you don't want to be drawing that last and depending on sort of the style of the clothing that you're going for you also want the pants to be appearing on top of the feet or you'll get shoes sticking out over your pants and we go with that so be careful with the order of these as I was saying we've done all the setup to get the coordinates of the sprite pads to draw now we have to do is change the sprite that it's drawing surface both feet we can go spur feet and pick whatever shoes that you gave the character the legs shut and finally the head great and let's run it there you go there's our carry Joe there's a couple more things I want to do in this video so to account for the collision that we set up before we've kind of messed things up with collision boxes and everything you might be wondering what it's even using so to check out where our collision box is I'm just going to show you a quick little way to visualize it so we're going to draw rectangles good color and so I'm going to draw a rectangle around whether collision boxes and there's a few coordinates for this so it's called a bounding box let's go B box left B box top B box right C box bottom and I'm going to draw this in yellow I'm going to give it the color yellow it's asking for a bunch of different colors because you can actually make it multicolored the different parts of the rectangle so you can do that if you want and I'm actually going to say I do want this as an outline because I'm only trying to visualize the box so I'm gonna put true let's have a look so this is the bounding box and this is because it's collision masks here is set to the sprite that it was assigned so remember we're not drawing that sprite anymore because we were overriding the default with outdoor event but it's still treating that as our collision box plus we've got this problem that the sprite is sort of what is actually drawing a sort of offset from where the bounding box actually is so if we're colliding with something it's not going to be accurate at all so we've got two problems to fix so what we're actually going to do is set up a general collision mask that all of the people are going to have so I'm going to come into one of these I'm just going to grab one of these sprites just for reference and I'm going to copy one of these I'm going to make a new sprite I'm going to call this per character mosque so what I'm doing here is I want to snap it to a certain area so I'm going into the grid hitting snap and I want to snap it to 64 and that will let me paste it exactly where it was in the other spot so I'm going to paste I'm actually going to paste it completely black because I just want the outline and then I just color it lighter and I'm going to manually set the coordinates to be it's not appearing right now because I think it's zeroed everything so let's just give it some coordinates there we go bring it down to here that was okay we can change the side everyone I'm doing it only added fee for our illusion of depth and you'll see why a bit later but basically I want it to if as a wall like here you can just imagine a wall here I want to be able to come right up to the wall and kind of have its body overlapping so I only wanted to be colliding at its feet so we also want to set an origin so let's turn up the mask and I want the origin to be a little bit above the bottom center because our sprites aren't exactly at the bottom and we're going with it up and we'll put it about there okay let's come back to the player and we're going to set its mask as this so you can set whatever sprite you want and then you can set a different mask we can put the same for both doesn't really matter maybe we'll put a cons later so that we can see everything a bit easier you know project hierarchy but so now that will be fine so now we should be seeing a smaller box as the bounding box there we go that takes care of one problem but we're still good at flying way off here and that's because when we're drawing part of the sprite we're actually we're starting at its top left corner so it's drawing it right there but the sprite is this big so it looks like it's being shunted down so we have to correct for that when we're drawing it so so instead of drawing it at x and y we're actually going to set up a couple new variables so we're going to go bar X X and bar what life now we want this to be equal to X but with some kind of correction so and I'm going to call this variable and we haven't set this up yet but I'm just going to call it X offset and Y minus y offset and let's change all of these to be xx YY you okay and we're going to set these in the create event let's come into the create so X offset and y offset I'm going to use a function to get the value for this variable so basically we need something that gets us from here down to here so it's going to be roughly like 60 and then 32 or something but we can get the value of this precisely using a function called sprite get X offset right and the sprite whose X offset we want to get is the mask and I don't specifically have to type in the character mask I can actually just go whatever mask because you've assigned me so there is a variable called mask index and that's just going to get whatever this is set to and so we're doing the same for wife all right and so these should now correct where we're drawing the sprite so let's run the game and have a look there we go so we put it working now so the final step for us is to generalize the system a little bit more so that we can swap out the clothes so if I pick up a red shirt I want to be able to change the shirt that she's wearing so instead of straight up telling it what sprite to draw again we're going to substitute this with a variable I'm sure you're seeing the pattern by now about how useful it is to generalize the system and be speaking in terms of variables instead of just numbers so instead of this we're going to set up for base and then we'll make that equal to this for tosser for legs for cab and piece and let's grab all of these you okay and we'll serve them in all right and that should work exactly the same so now it should be drawing whatever these variables are set to and we can change these at different point in the game so this allows it to be really flexible and we'll just run that to make sure there's no problems yep oh good all right so now we can make NPCs I'm just going to duplicate the player I'm going to call it Oh Vijay Sylvia is one of my NPCs and now all I have to do to get this to draw someone different is change these variables because we've done all of the setup so I'm just going to change this to SPR face now and just put in whatever you want your NPCs to look like you you there we go and I'm going to make a couple other ones Elina and amazing so just do that for a couple other NPCs okay and let's add them all to the room go and it's wrong the game and then we go got all of our characters so obviously they've got all the cards for the player movement and we'll delete that later but just to have a look see how doing a lot of work earlier on can kind of save you time later obviously there's other things that we could do to improve the system so at the moment our sprites they're kind of there's a lot of empty space that we really don't need and there's a lot of superfluous rides that we might not even end up using so I think we have sprites for like attacking and everything we might do that later but I'm not sure if you'd even want those in the game so obviously if there's anything you didn't want by the end of the game you would want to delete all of these you also want to sort of compress all of the sprites so that there's less room in between them you can see there's quite a lot of room here you might also want to use shaders to do the coloring of everything so if you remember so especially for the hairstyles you might want to have like 50 different colors for the hair but you you're not going to want 50 different sprites for every single different kind of hair you just want one kind of base unfortunately there aren't shaders in the trial version but this will do for now and you can easily see how the system could be expanded and made more efficient so I hope you guys found this helpful in the next video we'll finally be looking closer at this room editor and setting up the views so as you saw before when we run our game right now it's zoomed out quite a lot and the window is not a great shape so we'll be changing that next time and we'll also be doing some tiles and importing more assets to start building up a little game and making it look more like a farm for now I hope you found that helpful and I'll see you next time

Channel: FriendlyCosmonaut

Views: 87,238

Keywords: farming rpg tutorial, farming rpg tutorial gamemaker, farming rpg tutorial gms2, sprites gms2, sprites game maker, friendly cosmonaut, friendly cosmonaut farming rpg, game maker studio 2 tutorials, game maker tutorial, gms2 tutorial, game maker, gamemaker studio 2 tutorial series

Id: _lmezTscLHo

Length: 35min 13sec (2113 seconds)

Published: Tue Jul 11 2017