Spine and GameMaker Tutorial - Easy Equipment System

hey guys lost here so today we're going to be looking at spine and Game maker and how you can combine these two pieces of software to create uh you know cool looking animations and a quite an easy sort of equipment system as well uh and I'm just going to show you today how we can mix the two and come up with something quite cool so the way that you spine is first what you have to do is you obviously you have to create your image your character it can be anything you like really and what you have to do is you just have to split the uh body parts up into their own Sprite files uh spine automatically comes with um a couple of scripts that you can then use with things like Photoshop and I think and stuff like that now you'll have to find out how to use these in your program of choice um but in in Photoshop um in order to do this as long as you have like the layers um visible you can click on file and then go to scripts and then choose this um script wherever your spine is uh located and it'll just save all the images automatically and that's that's the process I went through so as I said we have these images and we're going to come up with an animation for for these images and we're gonna like try and uh get things attached like equipments and stuff and equipment and stuff like that so the first thing we then have to do is you you first have to click on images and you see this icon down here we need to just say where the path is to the image folder so in my case it was in pictures pixel art uh YouTube spine and images and then you just select the folder so now we have a bunch of images here we have the body the head and well just all of them so now we have to piece this together in here uh I mean if you use the script as I just showed you then what you can do is it will give you a Json file if you do it the way I just showed you so what you can then do is if we go to um yeah if we go in here and you see this is what you call a Json file and if we double click this and skeleton name is Rupert uh whatever and then as you can see it's pieced it together the way it will go but I actually I actually accidentally just clicked this new project then when I shouldn't have done sir uh let's just link the images folder again and there we go so spine is automatically just put this together for me uh with the Json file so what you want to do to start with is we need to start creating the burns for this so if you see this tool here this is the Korea on it sorry I'm lines here down here you can see the create tool this is how you create a bun so the first burn we're going to create is for the head uh like this so yeah as you can see we now have the the head burn except it's not attached to anything if we tried to like rotate this burn it's it's not really doing anything so what you have to do is you grab the head from this uh root folder here and you just drag it into the burn and you can rename the bun let's just call the bun I don't know headbun keep things neat and then as you can see now you can start to do cool things with that so I'm just going to do the other bones and I'll be back in one sec at something I probably should show you because I've just done this by accident is um you can create parent buns and what that means is if the head burnt is apparent then the body will move as we move the headboard I don't really want that that is actually quite useful for some things but that's not something I want to be doing in this one so what we then need to do is just drag the body button back out into the root folder and then they will behave by themselves like that okay so this is now all set up with the buttons so what I want to do to start with is I just want to move um Rupert into the origin so this here if you think about game maker this right here is the origin this is zero zero this is where the character is going to be drawn from uh it's exactly the same as game Maker's origin so let's just oops I could have done this better but it's okay I'm just gonna put this a roughly like here and I'm just going to reconstruct this because I've just messed up I should have done this to start with to be honest all right so that'll do we now have it in roughly the right position I'm sure I could probably improve this a bit but whatever it's just a demonstration so what we need to do now is we need to look at the drawer order so something that I like to do is I like to have the left um draw especially from this perspective I like to have the left arm um on top so that it can be in front of the head and I like to have the right arm sort of towards the bottom so that it's it it will go behind the body if you see what I'm saying so let's have one probably the head under left arm and the body under the head and I'm gonna have the legs and the arm behind the body so what do I mean by that well let's have a quick look so if we're then I don't know get this right hand this right arm and as you can see it is below the head and below the body so if we then start to manipulate this it will go behind those whereas the left arm is going to go in front of everything you see okay sir let's have a look at this so I feel like what I'm going to do for this is we're going to have um we'll do weapons and we'll also do uh a piece of like body armor so the way that you do that and we're gonna come on to this later but I feel like just because I've sort of put everything into the burns and stuff I should probably explain it a little bit so what the body as you can see here right we can hide it and we can show it this body is what you call an attachment okay and it stores this Sprite here okay so what you can then do is you can then store different Sprites within within this body attachment and you can see a right well uh you know in in game economy you can say right let's change the attachment from the body Sprite to like an armor Sprite and then that armor Sprite will appear there now let's say you wanted the body visible for whatever reason let's just imagine like he was sort of topless and you could maybe put on like a I don't know like a leather strap or something I don't know you know what I mean just whatever you want you could then create uh a new slot and you could just call this like I don't know so imagine you wanted his body visible while you put on this armor well now what you can do is you can just leave that alone again and instead apply the Sprite to the armor slot and that's where it will appear um we're going to come on to that later however so for right now let's get a really simple animation going in fact I'm just going to save this okay so I've just saved the project so if we then go into if we click this setup button it's going to change to the animation uh functions so we're going to create a simple idle animation so I've just dropped down the folder of animations and I'm double clicking animation and I'm just going to say idle so what we can then do um is what I like to do first is I like to just highlight all the burns so I click pose highlight all of the bones like this and then what you do here is you start creating keyframes so if we click root it and translate we have created a key a keyframe for both the rotation of the object and translate which just means the position right so if we then go to I don't know let's say for M5 right and we then say so we want the body to drop a little bit like that uh we want the arm to just come in a little bit like this maybe this arm can come in a bit as well we want no head to then drop like that and we want the arms to come down with that so we then have something like this oops now I don't know this is gonna look this might look absolutely gash but it doesn't really matter so what we then do is we've moved everything so we're just going to select everything again and we're going to create the new keyframe so now if we look at this it looks a little bit Spazzy doesn't it like that that's clearly not the sort of Animation you want now what I like to do is I like to create perfect sort of Loops for my animations so what I'm going to do here is I'm going to select uh the zero the very first as you can see it just says idle I'm going to click this one and I'm going to hold I'm going to press Ctrl and C to copy it and we're going to control and view it at 10. and then you have something that looks like this and that looks a bit better right it's nothing special but it works right so there we go now we have our very first animation now I'm just going to quickly create a run animation as well and to do that I'm just going to duplicate idle like that and we're just going to call it run because the only difference we have to do is if we delete the keyframes on five now we're back to normal so it's not going to move but we have our initial keyframe set up here so at position five again this arm is probably going to want to turn like this that arm is probably going to go back let's see the head maybe wants to rot it forwards just a little bit and the body may want to come back slightly I don't know let's just see how this works now what I like to do is just to make it simple is I like to replace the positions of these so for example this is going to go forwards and this leg is going to go backwards and it's also going to like kick out like that sort of thing while this one is gonna kick out forwards now I will say that this spray isn't very good like this leg is way too thick in comparison to this one but again I'm not too worried I'm just sort of demonstrating the possibilities of you know what we can do with this so again I'm just gonna keyframe all of these and let's just have a quick look and you know that's good enough that's fine that's all right okay sir we have our animation set up now we need to export this Okay so uh let's export it then so what we then do is I'm just gonna go back to setup for a second and I'm going to click on uh export oops not in part going to click on export and we wanna we don't want to export them as like PNG files for each animation we're not going to do that instead we're going to create a Json and we're going to create the atlas as well now what this will do is well I'll show you what it'll do I'll explain it I'm just going to show you so I'm just going to choose the folder I want this to appear in and I want this to appear in so spine and GM images and let's create another one called Atlas now this is where I want to start the atlas which is what we're about to create as you can see here so we're just going to hit the export button and we're just going to say yes that's fine uh and now let's see what we've got so in the atlas file we then have a new image file that contains all of the Sprites if you can see that can I zoom in a little bit not really but it contains all of the Sprites um inside the spine file I'll start here so I'm just going to go into game maker now I'm going to create a quick a quick project and I'll be back in one second okay so I've just created a quick project here I've just called it spanning GM I've just created a room I think the room is yeah 640 by 360 and I've just put a background in there as well all of this is not important at all really so what you want to do now in your projects is you need to create a new Sprite and I'm just going to call this s Rupert for those of you that remember the Dirt Style Series so let's grab him from where did I just save it in here now what you want to do here is we need to go to the atlas you don't want to select this here we're not we're not trying to select the PNG file or whatever this is this is um Rupert's texture page if you like what we want to select is the Json file here so as you can see we have Rupert now I know this looks a bit blaring so if this is just what the Json file does it's not going to look like this inside of spine itself I'm just going to set the speed to 14 and see how that looks uh so yeah there we go and as you can see the origin down here we can actually move this I mean it we can and it'll tell you it's smooth but it won't have it's just going to be the original dialects this is set in spine uh was it I can't remember it doesn't matter right so the origin is actually dictated by spine and not game maker in this case so let's create a couple of objects the first object I just want to go with other control I don't really need this I just want to set the room speed at 60 in here to keep it separate from Rupert so uh I'm just gonna drag that in I guess wait what am I doing stop you know what let's get room at it over here because it becomes too complicated so let's just drag that in there and now let's create uh throughput so let's link the Sprite to Rupert like that and in the create event let's do some stuff in here so let's just say initialize uh now there's a couple of interesting things we can do with spanning game making out uh first of all you can smooth animations together you can make them transition really well uh I'm not sure we can do that very well in this instance because the animations are going to be pretty quick like we're just going to immediately stop so we can't it's quite pointless really to transition from the Running Animation to the adult animation but I'll demonstrate it anyway just so we can do it so what you want to do then is we have a lot of functions that start with skeleton right so the first one we're going to go for is skeleton animation uh mix down here so we're gonna mix from the idle animation which you have to put in quotation marks because it's just reading from the Json file that we have imported and we want to mix it to the Run animation and the duration can be in this case 0.03 um I mean I'm not even sure there's any point in doing this because it's just going to be instantaneous at that speed pretty much but whatever might as well just put this in anywhere and we also want to mix it from run to idle like that uh the first thing we'll have is we'll just say uh skeleton animation set and we'll set it to start at the idle animation and now I just want a simple thing where if we you know hit ws and D then we start moving so I'm just going to set that code up really quick in here okay then so here is Rupert uh he's maybe a little bit too fast but I've got it set up uh and I know this looks a little bit dodgy I'm not really sure why it's doing that uh but it doesn't matter so as you can see we have Rupert sort of running around and the animation as you it kind of mixes into it a little bit does it really quick and actually it works better than I thought it did like it's not don't just immediately stop and like just you know change really quickly and looks a bit down like it does kind of smooth into the animation a little bit so it looks kind of nice I think and that that's to do with the skeleton animation mix functions that we used a minute ago so so I'm just going to walk you through the code really quick I've got a couple of variables got move-ins stats Falls good 2X and go to Y start zero and what we then do is when we left click we'll just say moving to true we get the good we get the good 2X and the go to Y is the mouse's position we just say if go to X is bigger than our X so if the mouse is to the right we'll set the image X scale as one else and we're going to set it as minus one in fact I want to say bigger or equal there and then we set the animation to run if moving to true we're just going to do use this MP linear step function I'm going to make that a little bit slower uh and then we're going to use if x is go to x and y's go to I so if we're at the position that we specified here then moving will become false and we will go back to the idle animation so that is the movement curd in its entirety that's all I'm using so what I want to do now then is I want to create a um a couple of attachments for weapons let's let's do that first so going back to spine what I would like to do then is actually first of all let me just grab a weapon really quick so if I go out to pixel art and I've got a project Max this is the projects I'm currently working on and we'll go to images and weapons weapons there it is so I don't know let's get this uh silver spear why not so I'm just going to copy that and I'm going to bring it back to YouTube Savannah GM let's put it in here uh yeah I'll just put in here that's fine so what we can then do is if we go to the left arm burn because this is where I want to store the weapons so in left arm bone let's create a new slot and we're going to call this L weapon for left weapon right and let's drag the silver sphere into here right uh there we go so let's try and get it like this right and I'm going to translate it and move it into the hand like that now what I would like to do is I want a situation where it's drawn beneath the hand right so I'm just going to get the left weapon and I'm going to drop beneath the hand like that so it looks like we're holding it now if we go back into the animation let's just have a let's just see how this looks so that's probably not what we want right like it looks a little bit dodgy how does the idle animation look and the Apple animation doesn't look too bad but the Run animation yeah probably not uh so what we could maybe do instead then that to me doesn't really look right is what if we root it so we're holding it like this let's see how that then looks uh better on the Run what about the idol and that makes more sense to me as well so that's how we're gonna hold the spear uh I'll tell you what I'll tell you what we should also do is let's get the uh because as well let's get an ax uh there it is uh weapons and let's just get the 8x and yeah let's bring it back into here so we also have an ax now uh let's bring the ax iron into here let's just hide the spear for a moment and yeah that's it now let's rotate it there maybe we can hold it like this or something I don't know uh but we do want the Ah that's that's slightly annoying actually because uh I hadn't thought about that okay so the weapon's gonna have to be drawn above the arm really uh I mean you can get really fancy with this on what what you could then do is you could have a situation where the hand is just another Sprite so it's another slot here so you can have like in the drawer you could have like left arm hand at the top and then have the left weapon between the two and it would it would work much better so I'm just gonna do it like this for this demonstration because it's not supposed to be very complicated but uh yeah I don't really like the way that looks maybe if we rotate this a bit and make it like that in fact I know I know what I can do I know what I can do okay so let's put it back like that and let's put the left arm above the left weapon again how's it gonna look if we do it like that okay that's better that's much better never mind I like that so we have weapons now let's get uh some armor that we can put in in the body slot so do have one uh I believe it's also in Project mix so let me just grab it chest arm there we go just this rubbish one and we'll call it Chastain Okay so let's go back to setup then and we're going to drag a chest iron up into the body and that's probably not right what about uh okay what about 90 okay 90. there we go and we just need to oh actually it's not gonna work because as you can see it's got like um the the thing at the top we're supposed to see the chest we can't just have that invisible so what we'll have to do then is just delete that yeah delete that attachment bring back the body and then what I'm going to do is I'm just going to create a new attachment slot here and we'll just call this armor and I'm gonna bring the chest iron into the armor and a rotation of 90 that makes it straight and then let's just try and line it up so uh I mean whatever that's probably good enough right that's probably all right I'm not so worried about it that's fine uh wait where's the left arm gone stop that okay so back to the draw order the armor just wants to be above the body like that and okay so let's just have a look now if we go to the Island animation so as you can see it's all just animating perfectly the way you would expect it to and what you then have is a really sort of simple and easy um you know equipment system right so let's just save it and now we're going to export it again and yep just in the same space we'll override the old one and as you can see if we go into the atlas it now has all the Sprites on it again now one thing that I find important to note really is that once you've added more Sprites to the atlas you then have to delete the old Sprite just for whatever reason if you just update animations and stuff you can just uh you know import the old one over in Ultra sweat but when you when you add more Sprites and stuff it doesn't like that so I tend to just delete it and then recreate it and then you don't have any issues I'm not really sure why that's the case it just is uh Okay so there he is we're going back now what we want to do then is go back to object Ripper and Link the Sprite and in the create event we want to do this so we want to say uh skeleton attachment set and the slot was armor and we're going to set the attachment to minus one and we're also going to do this skeleton attachment set and I think what's it called L weapon I think it was and we'll set that to minus one as well when you set an attachment to -1 it just means nothing it just means there's nothing there let me just make sure I've got that right so armor uh yeah armor and L weapon with a space okay so when we start the game we should be holding no equipment okay so we're just normal as we was a moment ago no equipment or anything like that now let's create a system where we can equip the armor on the weapons so what I'll do then we'll just look for key presses we'll just say if keyboard uh check pressed and it's odd let's go with q why not uh and if we and if we press Q we'll just say um then uh skeleton attachment set and we'll just say L weapon um we'll use the attachment uh what was the spear called I think was it like uh silver spear okay so we'll equip the attachment to Silver spear like that and then we'll just say so else if let's just say I'll see if we press W and then uh we'll go with iron ax is that what it was oh God my memories my memory is terrible no it's Axion and that's silver spear wow that's great naming great name okay so ax iron and there we are and then we'll just say so else if I don't know we then press e we'll equip the armor instead so let's go to armor and that was called chest iron okay then so let's see if this actually works it's gonna be somewhat embarrassing if this doesn't work but if I press Q yeah there we go we've got the spear it animates the way that you you would expect I feel like we should probably lower the spear a little bit because that it's not it's not quite right is it but if we equip the ax that's better and the armor and yeah there you go but the important thing to take away from this is just how well it works like it's all animating together um and yeah it just kind of works guys like it's a really simple effective method for having like an equipment system so I could not recommend spine more like I really couldn't I think it's a great piece of software like I'm not an animator I'm terrible I I don't wanna sit here and draw like an animation 10 times to make it look nice do you know what I mean like I don't want to do that but I'm quite happy to sit here and mess with spine and make it look nice so I'm just gonna play with this level let me just get this into position and see if it looks better uh kind of oh that looks better that looks better see um what you can then do is if we just export that again uh back to game maker this time because I haven't changed any Sprites we can just import that again and it should just work let's have a quick look yeah so I think that's better yeah that's much better uh so yeah hopefully you enjoyed this video guys and hopefully I've sold you on spine and you've been able to take something away from that uh but yeah it's just these functions are just very useful they work really well and there's very limited coding involved as well like look how simple this is we just set in the attachment and if you want to remove the attachment all you would have to do is I don't know you'd have to set up a new button press but then you just say uh so you want left left weapons to become -1 and then it'll then wield nothing in the left hand until you reset it so yeah hopefully you've taken something away from that guys and hopefully you enjoyed this video if you did please give it a thumbs up uh and yeah I really do hope I've sold you on spine and like if you're after you know some sort of animation and Equipment system in your game then this honestly is probably the best way of going about it because the animations are so smooth um I mean what you want to do with pixel art really is avoid rotating like some aspects of it because the head looks a bit I don't know it looks a bit strange when it's rotating like that doesn't it but I don't know as I said I'm not really an animator I'm sure if you're practicing it better than I am but yep thank you very much for watching guys and I will see you next time hey guys lost here give the video a thumbs up if you liked it subscribe if you're new and want more content like this and please give me your thoughts Down Below in the comments catch you guys later

Channel: Talent Lost

Views: 54,491

Keywords: gamemaker, game, maker, gaming, funny, fun, gml, code, coding, how, to, guide, tutorial, develop, development, derp, friendly, games, make, spine, family, animation, gamedev, 2d, game maker, game maker studio, gamemaker studio, gamemaker tutorial, game development, 2d animation, skeletal animation, studio, sprites, game maker (video game engine), family friendly, equipment, system

Id: JpS3yslhu0Y

Length: 30min 58sec (1858 seconds)

Published: Mon Aug 07 2017