Creating a Rig From Scratch | Smack Studio Tutorial

let's create an animation rig from scratch to do that we'll open the editor in smack studio and let's select create a new blank character this will pop up and the first thing we're going to want to do is go to the top right and select this character rig section here and now we are presented with this view I'm going to create a new Sprite and I'm going to call click the very left here I'm going to call this ref you don't need to do this but I like doing it as a way to kind of make it easier to assemble all my Sprite parts so ref has been created on the right we're going to select new Under Sprite sheets and I'm going to select my Sprite Parts PNG and one thing I've already done is I've gone through on this character and I've created Sprite parts from this Sprite and by the way this is fighting robot created by Red shrike and is hosted at opengameart.org if you want to check out that but I want I want to use this character because it's a great Showcase of what you can do so I've gone in and split up all these Sprite Parts into head body torso feet Etc and they're all labeled properly so assuming you have all that done again the first Sprite I'm going to import is this reference one and that's going to be the entire fully intact default pose and you're going to want to make sure that they're facing to the right that's super important and also a few things that you might notice is if you import it and there's issues with like rendering the outline or part of the side of the Sprite make sure that none of it is transparent or semi-transparent I shouldn't say completely transparent that's okay but semi-transparency is gonna not look great and it's gonna cause visual issues another issue is if you have one line that is one pixel long that's not going to show up either and also your Sprite might just be too big if you're having issues with importing it this entire canvas is 256 by 256 you can see this kind of glowing outline that shows that this character is about 80 pixels tall for reference all right so the other thing you want to keep in mind is for every Sprite that you add there's a front and a back side right now back has nothing on it and a really quick shortcut is copy front image to back and when you do that that's going to automatically copy it for the back side all right so this is a good place to start so reference is actually not going to be used in the rig itself it's just going to be a helpful tool for you to kind of assemble your Sprite Parts in a way that looks correct so the next thing I want to do is click new and click to the very left here and type in head head will be the first one that I add in so I'll go to the right click this and I'm going to click this head and here it is now I'm going to want to make sure I'm on the move tool down here I'm going to click and drag it right in the right spot and again the reason why we have this reference is I can really easily see where it should go otherwise you're kind of Flying Blind a little bit the other thing you'll want to do every time you place a Sprite is you're going to select copy front image to back and you want to do this so that every single Sprite that you have has a front and a back so I'm going to continue doing this and I'm going to speed up the footage and you will see how that works for the remaining Sprite parts all right so just a quick review of what happened I initially incorrectly labeled right and left you want to keep in mind that the right should be the characters right not your right so that kind of tripped me up in the beginning but I relabeled them I made sure each Sprite has both a front and a back Sprite and with that before we start binding these two bones I'm going to click accept here and I'm going to save one thing you want to do is you want to save very frequently so I'm going to change this to fighting robot and click save okay great and of course if you make a mistake you can always quit out and open your saved version and it's just a good practice to make sure you save frequently all right so back to our Sprites in fact speaking of saving one thing you'll want to note is in your steam install directory under steam apps common smack Studio smack Studio data character backups contains a backup history of all the the updates that you've made to your character so if you colossally mess up and destroy your character by accident you can actually revert back to one of those previous saves if I open up let's say this version of the character you can see that whatever progress I had at that point is maintained and saved in in here so never fear there are backups that exist we now have all of our Sprite Parts added to our character which is great the next thing you'll want to do is go to edit bones and here's what where we're going to create our skeleton and this is how all the Sprite parts will interact with the skeleton itself so to start you'll want to make sure that you on the add option here and we're going to start with a base all right so this this base bone we're actually going to call Root because it's going to be the bone from which everything else uh Works off of it's going to be the parent bone so let's click and drag that and we're just going to do something like this and I'm gonna I do a perfect 90 degree rotation here you can actually change the values like that so it's perfectly straight up I'll make sure that I'm on the move tool to put the 3D position tool or the the 2D position tool and I'm going to click and drag it and put it about here so basically be the center of it and we're going to call this root so now that we have the root bone set up we're going to create the Torso bone next so I'm going to click add here and I'm going to click basically from where the start or where the root bone ends and I'm going to click up and go up to about where the head starts and click there now I've created another bone and I'm going to call this one torso one thing I'll notice is this one down here has a 90 degree rotation and this one says basically zero let's actually zero this out for a second and the reason why this is a zero rotation is because it is the child bone of the root one the root one's going 90 but this one's going zero degrees in relation to where this one is and the reason why that's significant is now if you ever make changes or movements to the root bone like let's say I want to rotate that I'll select the 2D rotation here and I'll do this you can see that the child bone is also moving along with that parent bone and so you can kind of understand now when you make a move when you make a change to the the root bone it's going to change all the bones all right so that's kind of how the parent-child relationship works there I'm going to use the move tool again to move it a little bit higher and I'm going to create another bone for his head and so on and so forth uh I'll do this I'll maybe make it about this tall to kind of roughly match up with where the bone would be and I'll select head I'll rename this head and I'll change the rotation here to zero so now we have a perfectly straight root we have a torso and then we have a head bone and you can see that the parent bone of the head one is torso and the parent of the Torso is the root all right so next we're going to add a shoulder bone for the right shoulder and I'm just going to click do something like this and you can use f to move it just in the right spot that you want it and what you'll notice though is this is currently a child of the head bone and I don't want that if I were to rotate the head the shoulder would move along with the head and we don't want that we want the head to move independently from the shoulder so I'm actually going to do something else I'm gonna make sure that it is the parent of the Torso because whenever I move the Torso I want these shoulders to move but I don't want it necessarily be tied to the head so to do that I'm going to click and drag and drag it under the Torso so now this one which I'll call right shoulder is the sibling bone I guess you could say to the Head bone all right it is the pen is the child of the Torso which is exactly what I want so that means if I were to rotate let's say the Torso the shoulder will move along with it which is exactly what we want the next thing we're going to do is we're going to add a forearm bone so let's do that now do it something like this and by the way you can make whatever you can make whatever sort of Bones you'd like you don't have to match this formula exactly but this is a pretty helpful one for most uh characters that are Loosely humanoid and concept all right so we're going to rename this to our forearm and then we're going to create another one called arm make it like this we'll create another bone called r hand great so now let's say we want to make another shoulder instead of like just adding one from here we can go and click torso and then when we click add and we create this other left shoulder here which will be something like this you can see it's automatically become a child of the one that we selected so now that's a helpful way to avoid having to drag and drop everything it's just automatic at that point so you want to continue these steps for the left arm here which I'll kind of skip through okay next we're gonna add the legs and at this point you might be tempted to make another child of the Torso bone but actually in this case we're going to want to make children of the root bone and the reason for that is if I were to rotate the the Torso you wouldn't necessarily want the legs to go along with that but so so in this case we'll be creating a child bone of the root so to do that we'll select add and we'll just kind of click and drag like this for the thigh we'll call this right thigh then we'll just continue like just like we did for the arms and lastly so then we will add a foot bone here and one thing that you'll notice here in the artwork is this foot is actually facing towards the camera because it's a 2d Sprite it's kind of hard to tell but one thing that we'll do here after we'll call we'll call this right foot we're going to use the 3D camera and we're actually going to use this view here and we're going to use the we'll use the 3D rotation and we're going to do this so now what's happening is this is facing the direction that the foot's in so it's a little bit more accurate foreign so that means now that this will match up so now I'm going to move it down a little bit and yeah that matches up pretty nicely and then we'll do the same thing for the left leg all right as you can see here I've actually angled this because the foot is facing slightly this way so I want to make the bone kind of match that and you'll get a feel for how these to kind of align the rigs and and all these bones and things A good rule of thumb is you kind of want the bones to be more or less in the center of whatever the Sprite might be that's not always true but it's a nice rule of thumb okay so we're pretty happy with our rig here so next we'll go to bind but of course before you do that we should definitely save what we have so far and hopefully as you've been watching this and working on your own character you've been saving frequently as well all right so as a quick review we have all of our Sprites in order we've just created our skeletons we have all of our bones the next step is to bind those bones so you want to select bind bones and we're gonna go through this whole list but keep in mind the reference we won't be binding to anything because we're only using that in this step so let's do that to start I will bind my head bone and here I've made it pretty easy for myself I've noticed that I've named the bones the same thing more or less that I've named the Sprites here this is not a one-to-one necessarily but you just make it easier for yourself that way but there's also a visual guide so if I select head here it's very obvious which bone uh connects to that but if you can either select this or you can click it from this list whatever is easier for you and I'm going to select bind next I'm going to go to right shoulder and it's going to highlight the Sprite in question now here I've done something a little bit different so so for right shoulder in this case I'm actually not going to bind to the right shoulder bone because that's going to be one that gets rotated a lot I'm actually going to rotate it to the right forearm so that's going to be the one mismatch of naming here but again you can name your bones whatever is helpful for you and your Sprites and we'll just keep doing this and we'll match each of the parts up just remember that torso my equal torso but in this case waist equals the root bone here okay I have finished binding all of it one more quick note here obviously is if you ever needed to delete a bone all you have to do is make sure you select the bone you want to delete and then select this trash can icon and that will delete the bones so now we're going to go down to the 3D settings here and you can see it is attempted to generate a 3D version of the 2D Sprite that we've created and usually with things like legs and things that are more cylindrical it does pretty well but usually for something like the head it might need a little bit more fine-tuning so we're going to now adjust the depth of this head one kind of easy way to do that quickly is to click and drag this max depth and that will kind of let you adjust it in a pinch but if you want to get more detailed in how it's done you can select this and this is the depth texture all right so we're just going to start we're going to select the smoothing option you can lower or increase in height I'm just going to smooth it a little bit and I'm going to click around until there's not quite as much what white area so it's a little bit more evened out so let's see what that looks like update the preview and already it looks a bit better than it did before so I'm pretty happy with this if you ever you know really mess with this and it looks completely messed up you can select restore default depth and that will work great for that and we're also going to sync the back in the front now when we adjust this you'll see it's a little bit more even if you're stuck on this part one thing that's helpful to know is you can actually adjust the guide visibility and that will help you map what part of the depth correlates to the part of the spray that could really help with trying to figure out what's what there's also a little shortcut you can use here called retain close outline and that'll help make sure that there's no seams or anything unsightly between the back and the front half okay the head looks a lot better now and what you might do is you might go through and you might make additional adjustments to some of the other body parts and I would say if there are items that are meant to be more you know protruding forward sticking out you want to make sure those are the lighter areas and ones that are more receded you'll want to make sure those are the darker areas but for a lot of these we want them to be kind of more smooth so I'm pretty happy with these adjustments now you go to the preview and here's a preview of your character so with that in mind we're going to click accept all right so to get our newly created character into the scene you want to make sure you're on the idle basic movement animation on the left here and you want to click this button on the right to bring your character rig into the editor so here is the character that we have created and immediately you'll notice some odd of these maybe in how these Sprites are overlapping with each other so to do that one thing you want to do is go back to the character rig and when you go to the edit bones or you want to go to the edit Sprites you want to make sure they're in an order that makes sense in terms of the overlap so head's going to be always on top of everything else and like the right shoulder and the right arm will always be over the other body part so that's one reason I ordered my Sprites in this way and that makes things a little bit easier to manage so when you first import it into here there are a few tools you can use to make sure that those kinds of things are respected so one really help one helpful one here is the depth offset option down here on the right there's tons of options here that we'll go over in a second but before we do that I want to kind of show you how this part works if I click and drag you see the head will either recede behind the other Sprites or it will go in front of them right now they're kind of competing with each other but if you if you select the proper bone and use this depth offset option you can get the bones to appear the way that you prefer so I'm going to go through and do that right now I want the I want the the this one here to be a bit of a neutral position but I want the arm here to recede in the back background I want this to be behind but not behind the hand here all right so that already looks uh much better and now we'll create our first animation this will be very very basic um one thing you'll find very helpful is copying and pasting keyframes which I'll also cover in a little bit here so let's say we want to put his arm out this is an eye animation so let's say we want him to wave or something for his first animation I'm going to pick a place in my timeline a bit in the future I'm going to rotate his uh forearm here in fact I'll probably do his whole arm and if I notice the different options here there's the rotation with r which lets you rotate in 2D space there's the F option for 2D movement and there's also 3D options too and spin options so first off let's just stick with the 2D ones so I'm going to rotate this and he's gonna do this and he's gonna start waving so let's do that maybe on this keyframe he'll wave his arm like this maybe on this Frame he'll wave it back like this and then I want to put him back into his neutral position and the easiest way to do that is to go back to my original keyframe here hit Ctrl C to copy the frame and then go right about here let's say and then paste it so now if I click play check it out we have our pixel art character waving that was a very simple animation very easy to set up and uh it looks actually looks pretty good so now I'm going to demonstrate kind of the 3D rotation of it all let's say you want something a little more wild you want him to to rotate in 3D space so this is where it kind of gets exciting so I'm going to have him I'm going to have him face the the group Face the player with a spin with the Y rotation and I'm gonna do that about here he's going to face directly like more like this and you're going to see him twist and go back so let's remember that value that we used to rotate it looks like the Tilt and spin were about negative 100 negative 90 each so we can go back here and do something similar to that and we'll do that again here and let's check out what that looks like so that's him basically rotating in 3D space and facing the camera and waving you can do all kinds of crazy rotations you can do you can move them in 3D space you can rotate in 3D space and the Tilt option is nice if you want them to kind of lean backwards let's say you want to lean back like this so now he's leaning backwards while he's waving and this could obviously use some Polish but you should hopefully understand the implications of the kinds of things you can do with this editor now you'll just want to make sure that you're selecting the right bone for what you're wanting to manipulate and you you can click and drag to make the changes or you can change these options here all right so now let's do a test play and let's see this character in action okay there's our character in his idle looping animation that we just created and that's for for not much effort that's a a decent a decent amount of frames displayed so now that we have that I want to explain one more thing and that is baking Sprites so obviously this is a this is a you know in a state that we can easily manipulate by rotations and it's going to automatically between utilize tweening to go from point A to point B in each of these keyframes that you've created right let's say you want to do some extra nice polish right uh what you what you can do is you can select all the frames that you've done which is by just clicking and dragging like I've done and then select the big option and that's going to create a brand new layer of Sprites I'm actually going to hide this top layer here the rig that we just imported and now we have all of these Sprites and what's nice about this is if we like we can like reduce the frame rate by let's say deleting some of these frames so it looks like this that might be a bit bit too much maybe I'll undo that but you can also change with you can adjust the frames per second that way but what you can also do is you can actually go in and make polishing adjustments so let's say for example on this Frame we don't like how his eye looks in that and you want to retain what it was from another frame let's say you want to keep that highlight for example what you can do is you can actually select the paint option from down here and you can actually literally draw on top of the Sprite so I'm going to select the brush color I'm going to select white click OK and I'm just going to start painting on each of these frames to maintain that eye highlight right so now there it is and you can do as much polish as you need so you know if you don't like a stray pixel you can fix it let's say you wanna this Frame you want to add this again so now we have it so that the highlight's always there right so that's an example of what you can do if you'd prefer you can even export these and edit them on your own so you can either do it in the editor like I've done or select the export option it's going to generate a preview and here is a literal Sprite sheet of this entire thing I'm going to click export and here is our exported Sprite sheet which you can use in any other editor that you like and make a polishing a polishing pass on each of these frames but check it out it made all these frames of Animation in very few clicks and so what you can do of course is after you do that you can import that back into the editor and actually make adjustments okay so now you understand the basics of character creation creating a rig from scratch we went in importing the Sprite parts and creating the Sprite parts to begin with rigging it to a skeleton adjusting the depth and then beginning to animate it in the editor so hopefully you're able to get a character from scratch thanks for watching

Channel: Smack Studio

Views: 37,175

Keywords: smack studio, platform fighter, fighting game, indie game, pixel art, pixel art generator, creat characters games, create a character, stage editor, stage creator, 2.5 d unrela engine, 2.5 games, 2.5 animation software, pixel art game, competitive platform fighter, create character online, pixel art rotation, rotating pixel art, 3D Pixel Art

Id: A94-b6yDR4g

Length: 23min 31sec (1411 seconds)

Published: Tue Aug 01 2023