Character Editor BEGINNER'S Guide | Smack Studio

hello everyone and welcome to the beginner tutorial for the character editor in smack studio today our goal is going to be taking a blank template character and transforming them into a boxing fighter in this tutorial you'll learn how to draw your own pixel art adjust the 3d depth of your pixel art edit the animation and hit boxes of attacks and finally adjust character properties from the initial opening window you're going to want to click create character from template far on the left from here select cayenne template if you accidentally skipped that first menu you can simply click this button up here to bring that menu back up now before we start editing our character i'd like to go to test play to demonstrate what our character looks like without any changes to do that we're going to go to the testing area and click test play if you're using a keyboard you might want to go back to the main menu and go into controller settings to refresh your memory on what your controls are if you're using a controller simply click this controller icon and then press a with the controller that you'd like to use and you're good to go now just click test play and you're ready to start here we are in the training area and here you can run around you can walk attack do everything you can in game just to give you a sense of how you move and what your attacks do what we're going to edit today is the jab attack and it's kind of got this combo hit of a multi-hit so we're going to be modifying that when you're finished testing the character just click exit test play so the first thing we're going to do is we're going to go up to the top right area under content expand this little arrow here and click the character rig button i'm going to click just to the right of the name here we are on the animation rig settings first you're going to learn how to navigate this screen if you use the scroll wheel you can zoom in and out pressing the wasd keys lets you pan the camera to start we're going to edit the head sprite so on the left here you can see a list of sprites i'm going to click the first one and then head over to the drawing mode and select paint i'm going to zoom in a little bit with my camera so i can get a nice view on what i'm doing here and then i'm going to click this brush color box here and change it to black then i'm going to click ok i'm going to start drawing all right i'm pretty happy with that face it's no work of art or anything but it'll do now click fill and i'm going to pick a skin color for my character let's say maybe something like this i'm going to click ok and i'm going to fill in that color once you're finished drawing on the head then you can go to the rest of the sprites and color those in also so i'll just go down this list one helpful feature you can use is this eyedropper tool you click it and then click the color that you want to copy it'll copy that exact color and you can use it on the other part so i'm going to move on to the forearm for example i'm going to use this fill tool i can just use that same skin color on all the rest of the parts i want to use on when you're all finished coloring your character it should look something like this i've gone ahead and made his fifth screen for the gloves but we're going to edit those later the last step that you're going to do is you're going to use this button that's copy all front images to back so every spread has a front and a back side and right now you can see all the back sides are all the same as they were before so we're gonna click copy all front images to back and that's gonna make a complete mirror image of our character which is pretty convenient you'll also notice there's this stray pixel out in the wild here sometimes when you're drawing on this canvas you can mis-click or something like that so what you'll want to do is you want to highlight each of the sprite parts until you find the culprit and in this case it looks like i accidentally dropped a pixel on the head so i'm going to use the eraser tool and erase that all right so things are looking pretty good right now but one thing i want to do is take a break here click accept and i want to hit the save button so i'm going to click save and i'm actually going to rename this to what i want to call it so we'll call this boxing fighter excellent now a character is named and saved so i'm going to go back to the character rig and before we move on i'm going to make some more modifications to this sprite i'm going to go to the head sprite and i'm going to add give him some hair now this can be pretty simple i'm actually going to use the paint tool i'm going to select the existing eyebrow color that i used before and i'm just going to kind of draw some spiky hair all right he's looking good what i'm going to do is i'm going to click the back sprite for a second and i'm going to check this box called show reverse side outline this can be really helpful to show you where things aren't quite lining up and i'll show you why that's important later so what i'm going to do is use the copy front image to back feature and that's going to just fill it in for me and we're good to go next let's adjust the hands all right that's pretty good now i'll start on the other hand and for both the left hand and the right hand we'll want to use the same technique we used earlier with copy front image to back there's that we'll go back to right hand do the same thing awesome now we're all in sync and things are looking good so i'm going to click accept again and i'm going to save again you'll want to make a habit out of this all right so the next thing we're going to do is we're actually going to modify some bones because since i've drawn outside of the constraints of the previous sprite it might look a little strange in game so what i'm going to do is i'm going to click bind bones and i'm going to find the sprites and the bones that i want to adjust in this case i want to unbind the head the right hand and the left hand now to rebind them all i'm going to do is match them up so i'm going to click head and i see this is highlighted and this is the matching bone so i'm going to click that and click bind then i'm going to click right hand find that it matches up with this bone and click bind and lastly i'm going to click left hand and click this one you'll see on the on the right here it matches up pretty nicely here awesome so before we get into our animation we're going to look at the 3d preview and right now this head's looking a little bit flat so what i'm going to do is i'm actually going to increase the roundness of it a little bit to maybe 16 or 17 and then to really polish it up i'm going to click this first image right here select retain closed outline and it's going to modify the edges a little bit and i'm going to do the exact same thing on this texture and what that's done is it's made it a little bit more smooth overall i'll also do the same thing for the right hand and the left hand so right now it's looking a little flat so i'm actually going to increase its depth a little bit and that looks fine as is i'll do the same thing for the left hand perfect so this preview is looking pretty good i'm going to click accept and our changes are reflected on the character i'm going to save again all right now that our character is set up and ready to go let's go into an animation and edit that so under the animation section you're going to open attacks to reveal the list of attacks and just for clarification the language here is used with a controller in mind so a is kind of the standard attack b are all the special attacks and things like strong attacks and side a those refer to what direction you're pressing while you're pressing those primary buttons so let's click a that's kind of our standard attack here and i'm going to click play and that's going to kind of play this animation and there's going to be these gaps in the center as you'll see in this example and that's because this is a combo hit so we've introduced these gaps to make it very clear when the first hit starts the second hit and then the third hit in our example we're going to modify the first one the first hit and then we'll modify some of the rest of it too notice the different layers here there's the animation rig there's hurt boxes hitboxes actions and comments the animation rig is how you animate the character the hurt boxes are this blue box which means this is the reason where they can get hurt and then this red area is the hitbox so this is where your attack does damage we'll cover actions and comments a little bit later so the first thing i'm going to do is we don't really need to just hurt boxes here it's actually tracking pretty well with the model and there's no real need to edit it so i'm just going to hide this here which makes it a little bit easier for us to edit this now i'm going to click and drag here so i can scrub through the animation this is looking pretty good but i want his boxing gloves to kind of pop a bit more when he's punching so i'm going to find this part of the animation here and i'm going to edit it i'm going to click this keyframe and i'm going to hit delete and that's going to simplify the animation a little bit all these dots represent keyframes and so they're basically moments in time where a change happens so now that i've deleted this keyframe i'm going to select this keyframe and i'm actually going to temporarily hide the hitbox as one too just to make it a little bit easier and i'm gonna click this bone because we're gonna wanna enlarge this fist for our full punching effect and we can see on the right is a bunch of options we have a bunch of values here and we have rotation mode and position mode to manipulate and transform these bones so what i'm going to do is i'm going to change the scale from 1.2 to 1.5 to make a little wider and i'm going to change the scale y to 1.5 as well that's going to make a little bit taller so now we have this kind of larger fist that goes up so what you can see is it interpolates to go a little bit smaller and then larger which looks pretty cool and it actually kind of goes down too quickly so i'm going to find this other keyframe which is just after the one that we edited and i'm actually going to increase it to let's say 1.4 so slightly smaller but still bigger than it was before and that's going to give us a more boom effect where the fist gets bigger for a second and then goes back down to normal size so i'm pretty happy with how that looks so what i'm going to do now is i'm going to hit save and now i'm going to click test play alright so let's see if it's changed look at that the fist is bigger than it was before that's really good and our character's looking pretty good too i'm going to exit the test play area and now i'm going to show you a bit more customization for this animation i think instead of three hits i'm going to change it to just two hits and so there's a few things you should note in this actions uh layer here this controls things like visual effects sound effects and special little actions that's why it's called actions so for example if i if i click this one right here it says play sound this means at this moment in time this sound effect will play now that's an example of an action another example of an action is at the very end of an animation there's usually something called return to idle and what this means is when the move is completed it's actually going to go all the way back to our idle animation which is the very first one under basic movement which is this one and that makes sense right after every attack when it's completed it's going to go back to the idle animation so that's kind of a universal action that'll be on nearly every move if not literally every move so i want to kind of give you some context around that so because we only want two hits not a three hit attack i'm going to click and drag and i'm actually going to just delete this whole block what that's going to do is it's automatically going to just loop at this point because this is the furthest out keyframe and this action also is returned to idle so we're good there so real quick i'm going to save again we're going to see how it is in test play all right so i can do two jabs but they're very very fast so i'm actually going to make some adjustments here so for the second hit i don't want it to end so quickly because right now the second jab hits and then it immediately loops back so what i'm going to do is i'm going to move this return to idle action to do that i'm going to hit ctrl c to copy this i'm going to pick frame 40 and hit ctrl v to paste i'm going to delete the old one now what this is going to do is it's actually going to wait before it loops back to the idle animation a bunch of more frames and you'll also notice this this keyframe here is is turning off the visibility of this animation rig so i'm going to click this i'm going to delete it and now we have it visibility for longer i'm going to use the same copy and paste method to take this very last keyframe and put at the end because what we want is we want instead of just immediately from one frame to the other we want this pose to last all the way until this frame so i'm going to copy this frame i'm going to paste it and then i'm going to delete this old one so now what's happening is there's this gradual movement from this pose to this pose whereas before it was immediate frame now it's a nice graceful easy pose so we're again going to test that see what happens now what's funny is you'd expect there to be end lag at the end but there's not and the reason for that is we haven't deleted quite all the remainder of our combo yet so if i click here you'll notice this says start input listener and you don't need to quite understand all what's here exactly but what i'm going to do is i'm going to delete this because what it's doing is it's saying it's looking for an attack press between frame 25 and 31 which means at this point in the animation if i press a again it's going to jab and go back to the beginning and i don't necessarily want that so i'm actually going to delete this it was useful when we had three but now we only have two so i'm going to delete this comment also which is kind of explaining what i just what i just mentioned i'm going to delete that and now what we should find is there's going to be some end lag to it so let's try it look at that that's doing exactly what we expect now so instead of three jabs i'm mashing a right now and there's still that end lag at the end which looks really polished now let's say that we really wanted to customize this move let's say instead of a second punch we wanted him to do a skull bash instead i'm going to give you a quick and dirty version of how you would do this so what i'm going to do is i'm actually going to keep the beginnings frame right here and the end frame so these keyframes are not going to change but all these ones in the middle i'm actually going to delete all of them now at first it's going to look weird it's just doing this but it'll all make sense in a second what i'm going to do is i'm going to pick kind of a center keyframe maybe this one i'll pick this one and i want him to lean forward and jut his head forward and i didn't touch very much on these rotation tools but i will now to demonstrate what how they work so i'm going to start with the root bone because the root bone is going to control all the other bones which are child bones meaning when i move the root all the other bones are going to be moved along with it i'm going to use the wasd keys and the scroll wheel to zoom in a little bit to kind of get a better frame to work with i'm going to press the r key which is going to select the 2d rotation mode and i'm going to have them lean forward a little bit i'm going to use the f key to change the position onto the 2d plane push them up a little and i'm going to continue to make little fine adjustments and pretty soon this will become second nature to you you'll be hitting these hotkeys and using all them like it's second nature all right so he's definitely leaning forward now so i think what i'm going to do next is i'm going to increase the scale a little bit to kind of exaggerate the movement that's pretty good to do to make to make things more obvious i'll do a 1.3 so now his head's pretty large and he's leaning forward and his head's large so let's see what that looks like okay so that's kind of what we want but it's not quite as polished as i would like so a little bit further along i'm going to make further adjustments so i want to i want his head to kind of linger there for a little bit in its large state to kind of have a full woof effect and in fact i'm going to move this keyframe just a little before with a copy paste and a delete just so it lines up pretty nicely with our hit boxes here all right so that's that's looking okay but i think down here i'm actually gonna do some tweaks so i'm gonna lean them forward a little bit kind of reset this value to something larger like 1.2 i'll do 1.2 here also and what that's going to do is it might hopefully will make it look a bit easier let's see okay that's that's perfect so the rest of his body is resetting to where he's going but his head's kind of lingering there and that's exactly the kind of effect that we want so i'm going to hit save and test all right let's try it out look at that we got ourselves a head bash let's give it a try very nice and what you'll notice is the hits aren't quite lining up with his head so we're actually going to make one last modification to our modified uh double multi combo hit here and we're actually going to edit the hitbox so let's make the hitbox layer visible again with this eyeball icon and you can see the kind of constraints of this don't really quite match up with our new hitboxes they did really well for our old punch but our new one's kind of in a different spot if you can see here this punch lines up perfectly with this hitbox so we're going to move this by doing that we're just going to click this red box where to click and drag and get it in a better spot i'm probably going to decrease the width a little bit increase it maybe slightly and i'm also going to change the hit sound so right now it makes this sound i'm actually going to change it from punch hit light to let's say punch it heavy all right so now it's going to sound like a big wolf sound and i'm actually going to increase the damage to let's say 5 and the bass knock back to 2 and these are just random numbers that i'm picking and i'll change the hit effect 2 to let's do hit heavy to make it very obviously different and that's going to actually change the properties of the hit when i hit the player but to change the sound effect right now this plays so that's whether or not i hit the person if i don't hit them at all it makes it sound like i just whiffed the attack but and that fits pretty well for punches like this but for a massive head bash like this we're going to change punch swing light and we're going to find one that fits a little more like let's say punch swing heavy alright that sounds like it's got more gusto to it i'm going to save my progress now in test play let's see how it sounds very nice and that's lined up a lot better than our previous one lastly we'll cover editing the characters stats and then finalizing the character so maybe you want to adjust things like running speed or size you can do all of that in this stats button right here under the global settings i'm going to make them a little bit larger i'm going to change 0.85 to 0.95 and i'm also going to increase his running speed he's going to be a freaking fast guy we're going to give him a 9.1 instead of a 6.1 and click accept i'm going to go immediately to test play and you can already see that he's larger than he was before and he is much faster than he was and i encourage you to mess around with the stats until you get them just right you can increase these to really high values and just go absolutely nutty or you can do something that's a bit more balanced it's whatever you prefer but it's a lot of fun to mess around with at this point it's time to finalize the characters so we can use them in vs mode to do that we're going to go to portrait which is right under the global settings area and we're going to select an image to upload for their portrait and this is going to preview what it's going to look like on the character selection screen the recommended image size is 64 by 64 pixels but you can kind of use anything you want i happen to have this image ready to go but you can use anything here's what it'll look like i'm pretty happy with that so i'm going to click accept and from there i'm going to click finalize for vs and what that's going to do is it's going to bacon all the sprites we've made into a character you can play in the main game this is going to take a little bit longer than when you save your character but there's good reason for it awesome so let's see how he plays in game i'm gonna click vs mode here alright so i'm gonna select our boxing fighter character here and i'll fight a granite why not and our character is fully working complete with our new animation that we made and the brand new look and feel that we gave him so there you have it your own playable character in smack studio and about half an hour or less not bad so there you have it thank you very much for watching and be sure to check out the rest of our tutorials if you'd like to learn more i'll catch you guys on the next one

Channel: Smack Studio

Views: 48,058

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, howto, guide, create, character, tutorial, walkthrough, animation, rig, skeleton, test, play, smack, studio, beginner, new, character editor, tool

Id: w3Pob7EnQvc

Length: 21min 12sec (1272 seconds)

Published: Fri Jan 21 2022