Character Editor Tutorial (Advanced) | Smack Studio

hello everyone this is david from the smack studio team and today we'll have a comprehensive look at the character editor in smack studio this tutorial is going to be a bit on the longer side so if you want something more succinct you can check out our shorter tutorials also a quick overview of the layout as the top left will have some global settings for the character animations will appear in this section down left is where you test the character down right is where you can import and export sprites for the character the top right will be the characters rig projectiles and other properties which we'll cover later on and on the top right we have some action buttons like the undo and redo buttons creating a new character opening existing character saving finalizing and getting back to the main menu when you open the character editor for the first time you'll be presented with this screen you can create a character from scratch you can create a character based off of a template or open an existing one for our purposes we're going to be opening an existing character which is going to be granite all right now here's granite as you can see up here we have a several timelines and it's going to default when you open a character to their idle animation so under animations on the left here you'll see a populated list and under basic movement the first item is idle this is their idle animation this blue box you see over the character is their hurt box and you can see that here on a timeline right here and if i hit this eyeball button it'll actually hide that layer the same thing is true for the rig itself you can hide the rig and we'll show you why that's useful later on so here's the kind of basic timeline on the top and depending on what you have open you might see additional timelines so let's find one that has a lot of timelines like let's say i think forward air that's a pretty big one yep so here we have a like we saw earlier we have a hurt boxes timeline so this blue square that decides where he gets hurt this character we have an animation rig layer but notice that it's hidden so there's there's another layer here called sprites and if we hide that he'll be invisible and there's actually a layer underneath it that's actually the rig so we'll go over that in a second and then for hit boxes this determines what what part of the character hurts the other player and all these things can be edited on the top here we have actions which we'll go over also so that gives you an idea of timelines you can actually make as many timelines as you'd like with the exception of the animation rig right now you can only make one of those but as many actions as you need there's also a comments area too so you can add comments in actions which is really helpful if you're trying to remember what does what in your character so before we get into the real meat and potatoes of this i think it'd be good to kind of show off how test play works if you're using a keyboard and mouse you can just hit test play and start moving with whatever controls you have set up but if you have a controller you can click this controller icon press a so that it detects the correct one and then you can begin a test play session so here is granite he is unmodified and you can move around and test the movement out and you have an opponent a stationary opponent you can test moves on and hits done and all that and we're gonna be adding more to this down the road but for now it serves its purpose um so that's what it looks like just click this exit test play to get back to the editor and i think the next thing that we'll go into is the rig itself because if you want to make your own character chances are you're going to want to mess with the animation rig so to make this a bit simpler what i'm going to do is i'm going to open a version of granite that has no sprite layers at all so and i'll explain why that's useful in a little bit but just know that this version of granite that i'm about to open called granite demo is going to be a modified version of granite okay so this is the same character except he has no sprite layers enabled on his attacks okay so with that understanding we're actually going to go up to the character rig up here we're going to click down this drop down menu and then click here and here are we are presented with the animation rig settings and on the left we'll go through these options we're going to start on the sprites the edit sprites section and i'm going to go in and make some edits to to granite's face we're gonna use the built-in drawing features and let's see i'm gonna i'm gonna make his eyes red actually his eyes purple make things a little different here so i can go in change his eyes maybe i'll do a slightly lighter shade for these parts of his eyes and now he has red eyes but not only that i'm going to give him some spectacles too all right so now he's going to have much larger eyes and this should be very uh visually distinct so all i did was draw on this single sprite piece i'm going to click accept and what you can see is the actual in-game model has those new eyes that we gave him by just drawing and every frame of animation is it's already applied so we'll do another test play i don't need to press a again because i didn't change my controller and look at this we have the old granite on the left here and the new one on the right and all these attacks have been animated automatically so that can happen pretty instantly what's really cool about that too is let's say you know if you wanted to make an edit to your character well you can do that when that one tiny edit and it applies across every animation and from there you can actually export those animations and use them in external programs like a sprite or you know whatever photoshop whatever tool you happen to use and this these are all the sprites that that make up this animation so it's really powerful what you can do with that uh we'll probably cover that in a separate tutorial down the road but i just wanted to throw that out there that that's possible so now that we've made our little edit to the sprite let's add some bones so every sprite every sprite part is attached to a bone and what i'm going to do is i'm actually going to add two new bones to his head i'm going to add click this add button up here you can also hit the number 4 on your keyboard and i'm gonna give him two ears now i'm actually gonna i wanna make sure that they are children bones of the head bone i can call this something like ear right and ear left cool so i don't have anything like they're bones but there's no sprites on those bones yet so in fact one thing before i created the bone i probably should have drawn the sprites first because it's helpful to start with sprites and then apply the bones later so i'm going to do here l and ear r okay ear l um there these are not gonna be sophisticated ears they're gonna be very very basic okay so here is his left ear obviously and you also want to note that there's two sides to these sprites so if i click back there there's an opportunity to draw a back part of it also so i'm going to fill this in with black and then i'm going to hit back and then there's an icon up here that says show reverse side outline and what that's going to do is it's essentially going to guide me on where i can draw that so that it matches up perfectly with the front so it's basically a one-to-one match but we have a little shortcut here we could use this copy front image to back and it does all the work for us which is really handy so now that's all finished i'm going to draw the right ear now and let's see i'll look at my bone structure here then i'll probably draw this something like that again we're not going for sophistication here just for demonstration so i fill that in i'm going to go back i'm going to make sure this is checked then click fill front image to back and that has already finished so we now have two ears now what i have to do is i'm actually going to move the bone a little bit to match a little more with the sprites that i made and then i'm going to bind these bones so i'm going to go to bind bones everything's already bound except for our two near or two new bones so i'll pick year l and i'll match it up with the bone that i want which is erl on this list and click bind and then ear r i'll do the same thing okay there we go so now what you can do in 3d settings it's generated a 3d object for black a better word based on the sprites that i just drew and what you can see is there's also 3d been applied to these other items too of granite so here is the preview of our character and you can see you can actually move and rotate just like it's part of grant so we're gonna click accept and see what happens okay so we have we have ourselves we have ourselves some uh some granite ears and one thing i want to bring up earlier than i did the first time i made this tutorial is you'll want to utilize the save feature very often you never know when something might stop working so saving is a good idea to do regularly when you click save it'll freeze a bit and then after that it will save your character so we're going to mess around with these ears a little bit because i want to take this time to show some of the properties you have in the animation since they're bound to the head bone they're going to be moving already with the head so they actually kind of look pretty good as it is but i think they could look a little bit better so i'm going to do is i'm going to click this bone and make sure i'm on the animation rig timeline which i am and what you can see here is there's a bunch of little options here where you can scale it you can move it spin it and um there are little buttons here to change what kind of transformation you're doing so let's say for example i want his ear to bend down at the beginning if i'm on r rotation mode all i have to do is click and drag this and it'll rotate in a 2d space if i hit t it rotates in a 3d space and that's that's when changing the camera is helpful because what you can actually do with smack studio is rotate things in 3d it's pretty insane so we've done that what i'm going to do next is actually change the depth offset and if you just want to change what layer the sprites appear on and not actually change their their 3d space placement you can use the depth offset option after we've gotten that settled i'm actually going to do the same thing for this ear too i'm going to click this and change the depth offset so it becomes in front so it's very obvious all right so i'm only changing this on one of the animation frames so it's going to go back into his head a little bit but that's okay we're not going to worry about that that was just for demonstration purposes so let's say you get really stuck though if you're making your own character you've deleted a bunch of bones or what have you and you want to look exactly like this right you might be really happy with how things are lined up here but you'll go to your timeline and it might look completely different what you can do is you can select a frame on this animation rig timeline and then there's an apply bind pose button if i click that it's going to apply the exact same pose that you have in this view onto this and that can make things a lot easier if you want to you know animate from this or just you know use this as a reference you can easily just kind of port it over from there you can adjust depth offset from there and all that so so there you have it there's there's kind of an overview of how the character rig works there's a lot more to it obviously but i want to kind of keep moving so that this tutorial is not too long all right so anyway i've added these ears to this custom granite character let's see how it looks in game okay look at that we have ourselves some ears on granite with very little effort and it affects every animation and it moves along with his head and it looks pretty natural all things considered now if i want to go in and make little edits i can do that i can rotate them and you can see there's a little bit of ear movement here that it's not cleaned up at all but that gives you an idea you can actually from there make additional tweaks and edits if i want to move the move the ear back in front and then rotate a little more that way you now have this little movement there that wasn't there before so just you can play around with that and get it just just right and this is a lot simpler than the normal frame by frame animation required by pixel art one thing i touched on that i want to revisit is this notion of rotating this in 3d space so obviously this is a 2d sprite but you have a bunch of tools available to you so let's say i want to change his upbeat right now what does it look like i click play it kind of does a preview of the animation i'm turning off her boxes and hit boxes just for simplicity here and i'm going to change this i'm going to i'm going to have him spin around while he does it so to do that i'm going to greatly simplify this animation i'm going to delete these keyframes so it's going to look a lot more odd and he's going to hit his fist in the air and spin around so here i'm going to click his root bone which is right here just kidding it's right here make sure you have the right bone selected and then i'm going to use the spin tool to rotate him in 3d space and then i'm going to switch to the 2d rotation tool i'm going to move his arm slightly there then i'm going to pick and what you're going to see is he actually starts to turn but i want to do a complete spin right so i'm going to pick a time later into the timeline select root go back to spin by pressing y and do this and what should happen is yeah he is spinning he's not spinning quite the way that i want him to spin so i think i'll increase the direction a little more that way there we go that's the kind of spin that i wanted and this again this is a spin in 3d space pretty much so it's pretty amazing that i can generate this i remember seeing this at pax west and my mind being blown so that's an animation that i made in very little effort and again if i want to export these sprites i can do that here's the animation that i made and all the sprites rendered this renders at about 40 frames per second the game runs at 60fps but for each frame is about 1 40th of a second and you can see our modified ears our modified eyes and our brand new animation have all been turned into sprites so just for fun let's see what that looks like in game kind of what you'd expect not not super polished because i didn't really take much time in polishing it but yeah it works pretty neat let's say you had some of your own sprite work and you wanted to actually replace part of your character what you can do is if you go to back to the sprite list in the animation rig settings you can find the item that you want to replace so let's say that we want to replace the right arm here um what i'm going to do is i'm actually going to replace the right arm of this granite here with cora's right part core is another character in smack studio and i'm going to find this right arm which looks like it's here i'm going to click and drag left click and drag and i can right click to immediately import it or i can click this and here we have our our arm now this these are very different sizes so um who knows how it'll look but we'll give it a shot i'm going to click the back side and i'm going to click copy front image to back notice this big red icon here that's because we have this show reverse side outline checked so i'm actually going to turn that off for a second and then really line this up let's do that that looks pretty good and i'm going to turn it on and see that it's completely mismatched click the back then click copy front image to back now we have a nice seamless arm that's perfectly happy on both sides so i've done that and there it is let's without re-rigging or binding or anything let's see how it looks it looks a little wonky but i mean hey it works if i were to re-rig it though let's see let's see how it changes so i'm going to go to this list of bones to bind i'm going to find the right arm which is going to highlight when i click the right one which is this one i'm going to unbind it and then i'm going to rebind it by clicking the bone here and you can see this it doesn't really quite line up so to really do this properly we'd actually edit the bones themselves so i'm going to try that now it's going to move things around in ways that i might not like so we're going to address that we're going to move this here we're going to rotate this to kind of match the arm best we can we're going to move this and it's not going to be perfect but it might be a lot closer so if i click right arm i look for right arm on this list or i can click directly and hit bind let's see what that looks like now that looks a lot closer the animations are going to be a little odd because they weren't animated with that arm in mind but now you can see that it's connected so let's try it in all right so yeah you can see the angle is a little different of the arm because i basically moved the shoulder bone but when it comes to the animations they work and it looks it looks mostly complete which is pretty amazing so you can really take any sprite work that you work on and import it and it should work like that something else i want to mention is that not only can you draw and import sprites directly within the animation character rig but you can actually do it directly on the timeline also so to demonstrate that i'm going to make sure that i'm on the idle animation for granite i'm going to create a new sprite layer and then i'm going to start drawing so i've created i've clicked the first frame and i'm going to click paint and oops actually that then only made a little mark there i'm actually going to draw my own flame and it's going to be a little on the crude side but that's okay we're just demonstrating here all right there's the fire that i've just drawn on the timeline now there it is it's not really doing very much but you can animate this also so if i move it on this point in the timeline it will actually move in in place which is pretty cool i can kind of have it copy this frame add it later and it'll create some kind of subtle movement and if i want to i can actually turn this sprite layer into an effects layer and to do that i just have to check this box and all of a sudden i can add glowing effects i can increase or decrease its opacity i can change its scale and size so if i want to move it i can do that and that can interpolate between keyframes too so if i go from this keyframe to this one it can shrink back to its size and go back to how it was before so that's pretty neat so for this sake i'll just paste over all these keyframes and what you're seeing now is a glowing fiery effect and again this is nothing fancy but it's pretty easy to create some pretty cool effects in game so let's check that on game really fast there it is there's the glowing fire effect all right so pretty neat that that works but if you'd rather import something a little bit more polished and professional let's say you've done some sprite work that's ready to go i'm actually going to create a new sprite layer and then import an existing sprite so we're going to again utilize our cora sprite parts here and let's just for whatever reason say that we want a torso to be held by granite for whatever reason i'm going to hide the old sprite layer and i'm going to move this here there it is importing sprites like this can be useful for adding on to an existing animation so if you're just trying to add some polish you can do that if you want to make the sprite disappear you can right click and select new empty keyframe which will make it invisible so there it is appearing and now it's gone so you can have it disappear very briefly if you'd like i'm thinking something like so for example like a light bulb appearing over the head just for an instant you could use it like that there's a lot of applications you could do but when it comes to sprites one of my favorite things to do is to bake an animation rig and utilize those sprites so if you click bake it's going to create an entirely new layer of sprites and what you can do is you can actually completely hide the animation rig because what you've done is you've generated sprite versions of your animations which is really cool so now what i can do is i can go into one of these individual rendered sprites and i can i can edit it so maybe i'll whatever reason i'll make this arm gold okay so now it's gold on that layer now of course i would have to make it on this is what normal 2d animations like i have to make it on every single frame that same gold color but if whatever reason i wanted to really polish up the sprites frame by frame i can do that and we actually have some artists that do that for our characters so there's an example of some utility with this bacon feature i'm going to take this time to hit the save icon and save our progress so far which is a good habit that you should use and we're going to talk about hitboxes and hurt boxes next so i'm actually going to make these visible again if you want to edit these let's say that you want to change the shape of this this character's hurt box all you have to do is select the right layer which in this case i've selected the hurt box layer and then click this blue square that comes up you can adjust the size and the position you can click and drag you can change its width and height and then there's a custom property here called don't register hit the player and this is nice for counter attack so if i select this and somebody hits this it can trigger another event or it anyway and granite wouldn't get any damage if this particular hitbox was there now you can create multiple hit boxes if you'd like so if you wanted to create another one you can use this drop down under hit boxes and create and click new so i'm going to do that right here that's going to create another hitbox and that's different from this one right so i can give it different properties let's say for example i wanted the first you know seven or so frames to not register the hits of player but then after that i wanted it to register to hit the player that's where you might make a second hitbox right you can also copy and paste keyframes so if i were to copy this and paste it it would copy the exact attributes but i could just change this so that it did start to register hit the player so that's kind of where copy and pasting comes in and by the way you can copy and paste anything you can copy and paste animations so let's say i wanted to for some reason copy and paste this frame just hit ctrl c ctrl v to paste you can copy and paste keyframes there and let's say you make a huge mistake let's say you accidentally delete a bunch of stuff oh no i deleted all my hip hurt boxes and i remove i ruin my animation you can hit undo and this works in both directions so you can undo and you can redo it's very flexible and has been a godsend i have to tell you so uh that's hurt boxes for hitboxes there's a bit more going on because with hitboxes um obviously you have the sound effect of when it hits the player you have a hit effect so a graphical effect that kind of communicates that something's been punched i guess you could say in this case and then you can basically enable a bunch of conditionals so you can say ignore shield the hitbox itself could reflect a projectile in the case like a reflector attack or something like that you can have it so that only it attacks foes in certain states so if only if they're grounded or only if they're in the air and also you can preview the sound too so in this case this is what it sounds like if you'd like you can change it to something else though if you prefer so let's say you want to go from medium to heavy that's a bigger sound but also goes further than that you can change the volume to make it louder or quieter and you can change the pitch so let's say i change the pitch to three that's changing the speed 2 and the pitch but if i change it to like 0.5 so you can see you can get a lot of different sounds by just playing around with the pitch there and that can be nice if you have a bunch of multi-hit attacks that have similar punching sounds you can just adjust the pitch and it will sound pretty awesome so we're going to change that pitch to 0.5 and yeah the last thing i'd like to cover is this section these global settings what you'll notice is there's a stats button and this stats button lets you adjust the character's walk speed the acceleration and a bunch of other things so i'm actually going to make some tweaks we're going to change this to 5. we're going to make granite just a speed machine we're going to change his running speed to 10. we're gonna make him way too fast and we're going to reduce his ground friction so he's going to be very difficult to control and we're going to increase his gravity to 0.4 and he's just gonna be ridiculously hard to control we're actually gonna change his max jumps from two to four because why not and uh we're gonna make him a little bit bigger all right i'm not gonna change anything about his air friction i think we've changed him enough once i hit accept you can see he's already larger and everything that we've done for him is going to automatically scale up so let's try our changed granite here okay you can see he's enormous oh my word i just fell off a platform and i lift it off like a feather let's see how fast i am oh man i am flying fast and i'm light as a feather okay so obviously you probably wouldn't do something like that but that gives you an idea about what you can adjust under events now this is these are basically event based triggers you can set so for example every time i land i want to do i want to play a sound so let's say i want to play sound and i want this sound to be let's see brush whoosh all right this is going to be incredibly obnoxious but just for demonstration purposes let's see what happens when i land as granite so every time i land it makes that sound and events i mean you don't have to just do unbegin play on update on death on land or any of these which are all kind of the default options there's a whole slew of events you can do so every time that you short hop every time you fast fall every time you move into a ceiling when you get parried there is just so much you can do and obviously sound effects is just scratching the surface you can do if then conditionals you can set booleans and you can set you can jump to certain animations so one thing that i want to show is for side b there's a particular global variable set for for granite and there's some global variables and there are some local ones and that's what that will bring us to variables so under variables you can see side b ball form is a custom variable that applies here and actually if i change to b from side b and i click variables it's still there because it's a local variable and the boolean logic is false by default meaning that side b ball form is not is start starts out on false right and then you can check these boxes that says when you die make sure that this is at the false um and then returning to idle or being interrupted it will be set to the default value also this ensures that when the move side b is over it'll also reset so those are really helpful to keep in mind when you're creating these custom variables why is this important well because side b ball states basically when granite becomes a ball in his side b attack like what you're seeing here there's a boolean set of boolean logic that sets the variable to true and now that we're in ball form it's going to check to see if if you're on the ground and if you are on the ground it's going to create some dust particles like this but it's also going to make this sound but if you're in the air those things won't happen because it would look really weird to see dust in the air that doesn't make much sense but over here we can see that there's a getup animation and there's a few other animations too and this will trigger when you hit the wall or you hit the ground and that's all determined in these actions up here so if i go back to events you'll see some animation events for side b that are specific to side b on land what will happen well if the boolean side b ball form is true you're going to move at a certain horizontal velocity it's going to play a certain sound and play a certain effect and it's going to play frame 70 of this meaning when you use side b and then you land it's going to jump to a different part in the animation what we saw earlier so during ball form let's say he lands onto the ground it's going to jump all the way over to here so we're going to see that in practice so if i use cybe on the ground it's gonna create some dust effects and make those sounds but if i use it in the air and land i'm gonna bounce like that so that's how you can use variables now notice i didn't bounce that time because my move was already finished by the time i landed oh my goodness i'm so high in the air so there there's how it works and obviously you can get pretty granular with that and you can do some pretty cool complex stuff but those variables are not required to make a character and there are two last things i want to touch on one is back to kind of the user interface if you'd like you can move these timelines around and name them to whatever you like so for example you can move the animation rig up here if you want to call this something specific you can call it you know you can call whatever you'd like if i want to create a new timeline i just have to click this plus icon let's say i want to make another actions timeline and this one's just going to be dedicated for comments it's not going to have any of the actions or anything like that it's just going to be for comments i can right click and select new empty keyframe i can click new action and select comment say something like this is a reminder that granite has red eyes in case i forgot about that because my edit of granite has red eyes that's not a very helpful comment but you get the idea you can use this for certain things and what i might do is i might change this to say comments so now i know this is for actions for you know creating the dust effects on the character or playing certain sound effects or what have you right and this is simply for comments and that kind of makes it easier to organize my workflow and know what's what's what's what here um one more thing to note too is is for projectiles for a lot of the stuff you'll have existing stuff like projectiles already exist this character rig already exists but if you don't have that you can use these buttons to insert it so for example let's say i wanted for some reason the side strong to throw this projectile if i click this button it's going to insert it right here so that would throw the projectile if for some reason i have no animation rig let's delete the animation rig i can just insert it by doing this drop down menu and clicking this and that's going to insert the animation rig with the pose from the rig well i want to do that because i don't actually want to delete the old rig that i had but you get the idea so now i'm going to select i'm going to select the projectile here and as you can see when you press b this bowler rotates and it's a sprite layer right now but you can put anything in here that you'd like so just for fun i'm going to replace the bowler with something else let's open a sprite sheet let's use our trusty chorus sprite sheet and let's say we want to throw cora's head that's what we want to do not a boulder and what you're going to see is it's not it's not quite going to work because this is a sprite layer so what i'm going to do is i'm going to actually create a new layer for sprites i'm going to call it cora all right and i'm going to hide this layer for now and i'm going to copy copy this sprite paste it here i'm actually just going to delete the old boulder one so now cora's head is going to be what's thrown instead of the boulder and so we're going to return the character we're going to test that out to see if that works okay so i'm gonna press b and look at that we got cora's head instead of the boulder that works pretty great we're gonna save all our hard work again here and i'm gonna show you how to finalize your character so once you're ready to go you're gonna go over to the portrait button and you're gonna be able to pick a custom image now i don't have anything on hand and this will look really bad but the idea is you can use 64 by 64 pixels and it will generate a portrait icon to select on the character selection screen so i'm going to click accept that's fine and it's going to generate that for the character now the most important step is to click finalize for verses and this is going to take a little bit longer than your saves and the reason that why is is actually baking in all the animations that you created into sprites so what this is going to do is it's going to let us play our character in the main vs mode so if i go back and i select vs i can select granite demo which is the character we just made with this not so great profile picture let's turn on a cpu let's battle real granite and let's pick this stage okay so here's our character in battle and granite is so terrified of this monstrosity that he just bailed oh my word i jump so high but yeah here's our character in all of its uh glory and all the custom variables we set like making that obnoxious sound when i land and bouncing on the ground when i'm involved for them all work there's this there's the wall version of it and yeah your character is already fully playable so there you have it there's an overview of the character editor in smack studio there is so much you can do with this and we cannot wait to see what you create thanks and i'll see you guys on the next video

Channel: Smack Studio

Views: 11,596

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: 1RUKVelnEJo

Length: 36min 2sec (2162 seconds)

Published: Mon Jan 24 2022