GameMaker Studio 2: Animations using a spritesheet only

okay so this is going to be a tutorial aimed at people following or have finishing the isometric tactics tutorial series that i made a while ago uh and it's going to show you how to avoid making all of these different sprite resources and having to organize them and still get the same effect so just to kind of refresh people's memories at the moment for you uh we have a list of grids that stuff is going to stay the same um it's only how we create the sprites that's going to be different uh we used to do the creation in the uh create event uh like or is it this bit here this for loop took care of it and uh i thought it was a good way to do it because as long as you organize the sprites in the correct order then you can just add them one by one um and you know uh they'll be in the correct order for the game but it's actually pretty laborious and there's a better way to do it uh that i've found i wish i wish i'd done it this way before it would have saved me and you a lot of time so um the way that i had to do it before was uh we have a new an enumerator zoom in on it so we have this enumerator which has all the the characters and uh sorry all the classes and the four characters and we had to um and we have these different states as well like these five states so for each class or character we have uh five different states and we had to add we had to create a sprite resource so right click create sprite although and i think now you can create more than one but it's still pretty laborious you have to create the sprite name it adds the uh the correct sprites to it the correct image indexes and also we had to organize it so that we always had west north east south for every state and it's just a really laborious process for example you can see in each of these folders there's four different sprites uh you know here's like one animation like this um it's easier for me just to use a bar than to have someone make a proper animation because the proper animations take a lot of work so um each state has four sprites uh sprites can have plenty of different images you know for the for the animation and then if you multiply that together that's five times four is 20 different sprite resources per character or class and we have 20 characters in classes so 20 times 20 is 400 400 sprite resources we have to create name add sprites to all that kind of stuff and maybe even organize into the correct order before we can even use them in the game and uh it's just like a really laborious way to do it uh so what is the alternative well let me open the final version so if i go into um the sprites here isometric units so all we have in this one now is the actor uh the default one uh the one that the player shouldn't see and i only kept in because i use some of it i reference this sprite sometimes during the game just to get the dimensions of the sprite um that's the only reason i've kept it in and here we have two sprite sheets uh one for the player units one for the enemy um you can use as many sprite sheets or if or as few as you want uh the process is exactly the same it's just we we're gonna have one list of grids for each sprite sheet and uh here is every sprite for one single uh character or class this would be a single grid this stuff here and and i've actually created uh a little paint thing just to kind of explain that in more detail so for every sprite sheet we'd have a global list so you guys just have one global list because um we didn't have separate sprites for the enemies um so we have one global list each character is going to have its own grid and each cell in that grid is going to have a different sprite so in cell 1-1 we have a character facing north with an animation and if we go to our states in the main objects so the first state is idle uh so that would be the idle animation this uh this paint isn't reflective of what the actual grid would look like because as you can see um our first entry is empty it's not used so in every grid we have for the characters uh this column wouldn't have any sprites in them because well we don't use it in the game so this this column here would be idle and then the second column here would be attack because attacks sec second one zero one two x etc etc and we're just storing this we're just creating a sprite resource and storing it in the grid and via code we don't have to manually do anything ourselves so it's uh it's really it's a lot faster to do it you know um it's a big time saver uh one person has asked me uh if you look at the sprite sheet so you can see that all of the sprites have the same number of images and they are the same width and height for every character and that's not always going to be the case that you want this code is just going to be for this but i'm also going to give you hints on how to change the code to allow you to have different sized uh different widths and heights or animations of different sizes within the same sprite sheet and for it to still work it just requires extra setup um i'll explain that as we code it so uh hopefully that explains uh the changes and what we're gonna do um in terms of making changes to the code yourself all you need to do is get rid of uh the the for loop let me go to the other one so in the project in obj main this is where in the create event so we have a region we have an area where where we create uh the global character sprite grid which is the list and then we just add all of our sprite resources uh to different grids for each character what one character has a grid and then we add the grid to the list we're going to be doing the same thing but without having to make 400 sprite resources but you can just delete this because we're going to do it in a different place now [Music] i'd make a backup your project before you do it just in case you make a mistake as well so uh what we're gonna do is in our main object we have a draw event it's a new event okay so let's get on with the code now um we start with if sprites created equals false obviously we have to initialize this somewhere so we're going to do it in the create event of obj main uh it's the right place yeah there we go so sprite's created equals false after we've created all our sprites we're going to set it to true so that this only ever runs one time because what happens is the game's going to start obj mains our first object it runs the create and the step event and then it runs the draw event and this is the perfect time to create our sprites so after we have created our sprites we just hit it back to true i'm only going to be showing you this region uh because this one is exactly the same same code as this just a different sprite sheet name and uh different global character grids list name so um and if you're just using uh the seams characters and sprites for both the player and the enemy you only didn't need this one anyway so let's open the region um if you just copy this stuff now so you have the basic outline so i'm just going to explain to you what's going to happen here so the first region is going to create a surface so we can't just draw the sprite sheet and copy from that we have to uh actually make a surface and the sprite sheets basically going to become the background for that surface and we can make sprites based on that then we're going to make our list of character sprite grids each entry is going to be a different character grid each grid is going to have a sprite in each cell for that character we're going to set up our variables and then we're going to go through our sprite sheet uh left to right top to bottom creating sprites adding them to a character grid saving that grid to our list and then uh you always want to reset the target for a surface and then free the surface so that's the overview i'm gonna go into this in more detail so like i said um the first thing we want to do is create a surface you always want to check to see if a surface exists um before creating it and just to make sure you know that it's still in existence uh the width and height of our surface is going to be the width and height of our sprite sheet and then we just create the surface based on that width and height you have to set the target for the surface as well and then we're going to draw our sprite sheet to it so that's that region and then we're going to create our list of character grids like that um so setting up variables um the first one we have is four and four images per animation uh basically every character in our sprite sheet if every animation just has four frames to make it simple you might wanna have a different number of animations uh per state for different characters so this number might want to change how would you do that well if it was me i would just create a grid and for each character for every state i would tell that grade okay well uh for this character for this state there should be five frames for the next state there should be four for the next state there should be six and then uh images per animation we'll just uh change based on that grid and then action start actions end uh if we look at the sprite sheet we don't want to start here because it's empty we want to start here when it's idle and actually the way the code is it kind of treats this whole sprite sheet as a grid and this cell here is 0 0 and this one here is 0 1. we want to start from here which is one one uh facing and total facings uh that's just gonna deal with north south east and west an image width and image image height is the width and height of each image again uh you might wanna have characters of different widths and heights and you can do that and have used the same code again you just need to do some extra setting up whereby you tell well you store data to say okay for this character for this state it's got a width and a height of x and y and then you just need to update image width and image height uh per character per state in this for loop here and it'll work um again if there's uh enough interest i'll just you know i'll i'll update the code and show you how to do it so um before i go into the meat of the code which is here this for loop i'm just going to show you the sprite sheet again and explain what's going to happen and then just show you show you the code so what's going to happen is um we're going to start here we're going to determine the x and y coordinates for this spot here then we're going to create a sprite sheet uh so we're going to create a sprite based on this image then we're going to add the next three images to it and we're going to save that whole sprite to the character grid then we're going to create a new sprite based on this image add the next three images to it and then save this whole sprite to the next cell in the character grid and it's gonna do this for all of these sprites um and then all all of these sprites will be saved into the character grid so hopefully that kind of explains um what it's trying to do or what it's doing and here's the actual code so for every character we have we want to create character grid um we want to make sure we create sprites for every one of our four facings and again we're doing it left to right top to bottom so for the first facing we we're gonna create all of our sprites and add them to the grid um action start and actions and is the uh is the idle to the dead state number x point and y point is is this sorry so if i zoom in on a market so this is the x point and y point for the first sprite this is the x point on y point for the second image this is the x point and y point for the third image this is the x point and y point for the fourth image so it's just gonna uh update x point and y point and then copy this image and then add it to the existing sprite which we haven't got to yet i'll show you that next so next point y point this one here this line which i've uh spread onto two to make it easier to see so i can increase the size of the font this one here um character grid x x y y equals sprites crate from from surface so give you our surface where do you want to copy at what point in this sprite uh the sprite sheet do we want to copy the image from how wide do we want to copy it how high do we want to copy it uh do we need to remove the back no because it's transparent do we need to smooth it no this point this stuff here um the x origin and y origin is the same as uh if you want into a sprite like this guy here and then if we change these numbers here that's exactly what that code does so it's just to make sure that um everything's being drawn in the correct place when we draw it in the game that's what x origin on wired is for so we've got a character grid we've created a sprite with one frame one image and then uh for the next three images we can now add from surface we're gonna add to this sprite stored in character grid x x y y which we created here we're going to add it from the surface we're going to update x point on y point and again we're going to give it the width and height and then that gives us the next three images for the sprite and then after all this is all after all this is run then we have filled a character grid with all of the sprites for that character so we can just save that character grid to our list like that so if i minimize this now so once we've done our for loop because it's still happening for every character because of this for loop we've got a global list with a grid for every character each cell in that grid is a different sprite with four images we can just reset the target and free our surface and that's it um i hope that wasn't too complicated to follow i will catch you next time bye for now

Channel: GameMaker Rob

Views: 552

Keywords: gamemaker, game maker, gamemaker 2, game maker 2, gamemaker rob, tutorial, gloomytoadstudio, samspade, spalding, spritesheet, sprite sheet, resource, sprites without resource

Id: pViqJcH33oI

Length: 18min 25sec (1105 seconds)

Published: Sun Jan 24 2021