GameMaker Studio 2.3 - Beginner Tutorial: How to Import and Animate Sprites

greetings and welcome my name is aaron craig with let's learn this together now there are three ways to bring sprites into game maker studio once you've found ones that you like like this cool warrior animation from klembod on itch.io you'll want to download them and bring them up the first and easiest way to bring in a sprite is to go into where you'll find the actual sprites themselves as individual images here they've labeled them out which is really really nice so i'm going to grab the idle and then i'm just going to pick one of the frames or one of the sprites and drag it into my sprites folder now in game maker 2.3 and above the asset browser over here you can actually put your sprites wherever you want in any of these groups like over here in the scripts folder but i'm going to keep mine inside of the sprites to make it make sense and that way you can follow along with older versions as well now you can see here that this has brought up the sprite it's named it the exact same thing as in the folder so that's a good thing to know but this is actually a full animation that we want to play through here and how do we bring in more of them well we can't just select more and bring them into the sprites because they actually come in as individuals that's not a very efficient way i'm going to go ahead and delete those instead you bring in one of the sprites then select the rest and drag them into this sprite specifically it'll tell you that it's an undoable action do you want to continue click yes and now they're all here so if i press play well it's animating really fast and that's because the default is set at 30 frames per second now there are two ways to animate your sprite as well that is the frames per second and frames per game frame frames per game frame is even faster which you'd probably not want to use very often i always use the fps and we're going to set this down to 10. now if i press play that's a good idle animation speed that looks really awesome let's go ahead and rename this spr warrior idol i'm going to click on edit image and go to image auto trim all of the frames to get rid of all of that excess space now this method works really well if they are all the same size if you have a sprite that has different sized images it's going to look really weird because it's either going to scale up or scale down scaling up is usually fine because you don't really lose any resolution and it just adds a larger canvas for you to work on scaling down you're going to lose quality and it might cut off portions of your sprite so don't scale down if you have multiple sized images if you do have multiple sized images they might be coming in on a sprite sheet so another way to bring in sprites and i'm going to show you what a sprite sheet is is to right click create sprite i'm going to name this spr warrior run and then i'm going to click on import and then from here i'm going to go to where i have that at i'm going to go to sprite sheet specifically i'm going to click on the one with no effect and here we go now a sprite sheet is a collection of all of the animations for your character you can see this is all of the stuff that our warrior can do but we only want to actually grab our running animation here so i'm going to click on image and convert to frames now i know the size of these because looking at the actual sprite dimensions on where i got the sprite from it says 64 by 44. using that information i can put in the frame width at 64 and the frame height at 44. and if i bring this up a little bit larger you can see that this covers it up completely now the number of frames i want are actually going to be 1 2 3 4 5 6 and 7 which are right here so i'm going to say there are seven frames all together and there are six frames per row now we're actually starting down here so i'm going to drag this to right there and i click on convert and now we have all of them inside of here and i think that looks really really good then i'm going to do the same thing as before with auto trimming all of the frames to cut off that excess space let's come out here open this up and i'm going to set this to 15 fps and there we go so that's a really cool running animation and now i'm going to show you how to be able to switch between these although before i do that the last way to bring in a sprite is to actually right click and add existing now adding an existing sprite is when you bring it in from a project such as a project like i've got here so if i go to my game maker studio projects i'll bring in fluffy heroes which is part of a book i'm actually working on a project for that book you can check out the kickstarter for that if you're interested the link will be in the description down below but if i bring in this dot y y file i'll actually bring in a completely animated sprite now i didn't bring it into the sprites folder even though i clicked on add existing from there because in my other projects i actually have it in a player folder and down here you can see it's right here and this is the idle animation it already has the fps set the name is already set and all of that information is in there so that's the third way although i don't use that too often it is really nice when you are working on a project and you want to make a new one to do some changes or test something out you can bring in objects and everything game maker related if you already have it created in another project the last really important thing to know about when you're importing sprites is the origin now i have mine set as a default to middle center but you can see here there are a lot of options including custom which allows you to actually just take this origin which is in the middle and drag it anywhere inside and you can see the origin changes over here now the origin is important because that actually dictates where your sprite is at when you say x and y now for your sprites here you want to have them both be middle center because otherwise when you go left or right and if you add more sprites down the road they'll actually look really really funky if they are not in the middle center if this was on the middle left over here or way over here somewhere when i clicked go right i would actually jump over like 15 frames from where i was standing idle and if i went to the left then i would jump over 15 frames to the left and it would just look really really janky so make sure you have middle center on your sprites that you're bringing in you can actually change that by going up to file preferences and you can go to the sprite editor and change where the default sprite origin is at most of the time you're going to want middle center so i'd recommend changing it to that now let's look at how to actually put this in an object in our game that we can control and move around in so i'm going to right click on object folder and create a new object call this obj warrior and i'm going to assign the sprite you can click on here and assign it from there or you can actually just drag the sprite over there which is what i'm going to do for right now then i'm going to add a step event and the step event is an event that runs every frame of your game and oftentimes we'll actually put logic for your character or whatever it is that it is so here i'm just going to say if keyboard check vk right so if i'm holding down the right arrow key then i am going to increase my x by 3 and i'm going to set my sprite index equal to spr warrior run now sprite index is actually what controls which sprite this object has associated with it so by changing the sprite index to spr warrior run it will become spr warrior run if we run this well actually nothing's going to happen because i forgot to put it in the level so let's open up the level and you can see here that i just have a cool tiled level tile sets from klembod once again i'm going to grab the warrior object take off the grid put her right there now there are no collisions there's nothing on here to be able to do anything more than just move right currently and that's okay because if we move right you can see that we are now animating but we continue in this animation which might not be what we want so let's go over and back to the code and i'm going to say else if keyboard check vk left and then i'm going to do x minus equal 3 to go to the left and i'm going to say sprite index equals spr warrior run and the reason for that is we can go to left or right from the idle so we have to change our sprite index in both of them and lastly if we're not pressing left or right then sprite index equals spr warrior idle and that will actually take care of animating our sprite moving left and right now there is one funky thing as you can see there when we go left we actually aren't looking left so what we have to do is change our image x scale this controls the x scale for the current image that we have when we're going left we need to set it to negative one that will mirror the sprite that we currently have now if we do that we have to set it back to one when we are going right we don't need to do anything on the else because if we stop going left we want to be looking left that just makes sense and there we go we are now having an animated sprite going left and right and stopping now a few important things to note is these are all built-in properties that control parts of your object and your sprite if we open up the manual here you'll actually be able to see a lot more of them such as the image index number speed x and y scale all of these things control the sprite that is attached to the object you have in your game i encourage you to go in read some of these they're really important the ones i want to hit on are the image index image number and image speed so first let's take a look at image speed that is actually a number that starts at 1 for every object if we go in and make a create event and we set image speed equal to 1 this is going to play the sprite associated with this object at the speed we set inside of the sprite to change it we can set it to 2 to double the speed and we can set it to 0.5 to half it you can see here that setting it to 2 our sprite is now significantly faster and if we set it to 0.5 it'll be half of that speed what i prefer to do is actually get the sprite looking good here and then just leave image speed at one for most situations if you had something where you were sprinting in your step event and you didn't have another sprite to show that's faster then that's fine oftentimes i'll actually put the image speed at 1.5 or 2 for something that's supposed to go significantly quicker but the sprite itself stays the same just make sure you change image speed back because if you change it once it has changed for everything else every other sprite inside of this object then we also have image index and image number which are both related inside of your sprites you can see that there are five frames here but game maker actually starts counting at zero like it does for a lot of things and most computers do so this first frame which shows one out of five up here is actually the zeroth image index and that is important because we can actually take over manual control of the image index so if i set image speed equal to 0 here and then i wanted to increase the image index by something very small like this image index plus equals 0.1 and we'll just do it one more time over here this is going to have the exact same effect of having our image speed at a certain number pretty slow number as you can see but it's still up and running so if we changed it to something like 2.5 it might be a little bit quicker so being able to change your image index is actually super important and you can set image index to a specific number or check which image index you're on which can also be very helpful if you have a sprite that you want to play half of the animation pause like maybe for a enemy attack to let the player get out of the way and then continue you can do that by checking which image you're currently on using the built-in variable image index and the last one is image number and all this does is hold how many frames this current sprite has so this image number if we did a show message of image number when we start and what we'll actually get because we're starting in the idle sprite is five if we wanted to access that number as image index it would be zero but this built-in variable does actually start counting at one which is a little confusing but that's kind of how it goes so image number is great because you can check to see if you're going to go over it or how many you have and then you can do something with that piece of information and that is the basics of how to import and animate sprites in game maker you can see that just by using keyboard checks we can change the sprite that we're currently on you now know how to check which image number you you might be at using image index and how many frames in your sprite you have and you can switch between them and we've been using these two sprites but there's nothing saying you can't completely change which sprite your object is attached to just because we've been using a warrior sprite doesn't mean we can't change it to a button icon later on if we wanted to that would be really weird and i don't know why you would but you can just because one object uses a certain number of similar sprites like a character doesn't mean it's actually locked into those they have nothing to do with each other besides you setting it right here that's the only connection that they actually have and that's important to know because any object can have any sprite and you can change between any of them at any time and that's a lot of enemies in one sentence and personally the best way that i have found to solidify and make these things actually stick in your brain is to build a project with them and i've got two great solutions for you the first one is a book i'm writing aimed at beginners making a full platforming game from scratch it's going to cover everything we talked about in today's video and a whole lot more you can check it out on kickstarter using the link below and pledge today to get it at the best price possible it's almost done so get on that now the second way is to go through my beginner games course this is going to cover again everything we talked about and you'll make an awesome top-down space shooter with a final boss fight and as an added bonus if you use the coupon code newbie when you sign up you'll get 20 off of this course and a shout out to all of the awesome people supporting me over on patreon if you want to see your name on the screen or get other perks like joining my discord or one-on-one training with me check it out in the description down below some links are going to be coming up that you might find useful if you want to keep watching from me but as i always say keep making keep learning and i'll talk to you later

Channel: Let's Learn This Together

Views: 8,485

Keywords: GameMaker Studio, GameMaker Studio 2, GameMaker Studio Tutorial, GameMaker Studio 2 Tutorial, GMS, GMS 2, GMS Tutorial, GMS 2 Tutorial, LLTT, Let's Learn This Together, GameMaker 2, GameMaker Projects, gms 2.3, gamemaker studio 2.3 tutorial, Beginner Tutorial, Sprite, Animate, Import, Import and Animate, New project, New Series, convert sprite sheet, trim sprites, how to animate, how to import, gamemaker basics, gamemaker simple, game development tutorial, gamemaker 2 tips

Id: po8TMV9y9SE

Length: 15min 54sec (954 seconds)

Published: Mon Oct 05 2020