8 direction isometric character rigging in Spine 2D

foreign [Music] animation I'm Arman time to rig multi-directional character so what options do we have which is the better way to approach this rig it all depends how you will use your character there are two ways to rigid the spine first and most easy way is just to treat all directions as a separate spine skeleton you can still manage separate skeletons inside one spine editor instance it won't allow you to export all skeletons as one Json however you can pack the atlas inside one spreadsheet using these settings this is very helpful for improving fill rate of your GPU by reducing draw calls the main drawback of this approach is skeletons can't communicate with each other meaning you can't add smooth transition animation between directions so switching between the directions will happen instantly with a noticeable snapping there is really nothing more to add here with a second option all directions should be rigged in the same skeleton and the best part of it that we can use the same set of the bones for all directions this is very helpful if you want your character to switch directions smoothly by adding transition animations or mixing directions together in an animation think of an animation where the character Swings with their sword rotating and revealing their back while still showing side view of their legs so as you have guessed this video is about the second option the important thing to understand here is that we can't read all directions in the setup mode if we want to use the same set of Bones we will need to switch to animate mode and continue rigging there if you try to do it in the setup mode and move the bones so we can bind them to the New Direction we will lose their previous positions in the animation mode we can save the poses as keys and then just copy past the keys whenever we want to use any of directions now you can see I have a lot of bones for each body part for each Direction They will be like groups for timelines here you can see each bone showing its own timeline and we can hide and show the part of it don't worry about this setup this is really optional you can remove it and to put all images inside the bones or wherever you want anyway when we are binding the meshes it doesn't matter where they are actually located they will be following the bones they are bound to and since in this project we will be binding all of the images to the bones it really doesn't matter so what we'll be doing basically in animation mode moving the pose here aligning the bones to that new pose and binding it in the next animation or in the next frame wherever you want to save the pause moving aligning the bones and saving it it's important to do it in an animation as I said one thing you might see that is missing is leg ik so let's do it actually I will select upper leg create an ID select that bone and call it knee and then I will put this bone inside that newly created Target which is a bone and create another ID well I you can use this bone as and create a Target at the tip of it which is totally fine but I want to use actually this bone as a target for now if I do it it won't allow me because this bone is inside the lower leg bone we don't we can't create ID with that setup we can move this up to the character bone I'm meeting P to re-parent it and now I can click on the character bone after that select this lower leg and create an I key and hit this one have my eye keys and last thing I want to do for this setup is Select both I keys and compress and stretch great I have my knee setup which is great for this pose I will do the same for the other leg but before that I want to create also the main IQs which will be controlling um the other poses these two and this one this will be exactly the same as this one but we need that I Key Bones so important thing is that all leg bones will be bound to these bones so that ideal structure should be layered over this so these bones follow that I key I will select the hip bone and create ID there I will select this bone as a Target here's it this is the wrong direction because we are looking at these directions so let's reverse it by selecting I key and hitting this positive now it is reversed I will adjust it so it is matching here pretty much it's fine I think it's enough and don't don't worry about this snappiness here and we will be posing it for each of the other poses manually you can see that like doesn't follow the ID we need to add last setup here select the knee create a constraint select this lower leg of the ID and call it knee helper write hit much and now if I give 100 value you can see everything is breaking which we can fix by reordering uh the constraints here maybe automatic reorder will help us which is doing great job most of the time and now it's working great but we don't need that key for this pose so maybe we can go and disable here and see what we have you can see it doesn't follow anymore wait so I will do the same for the other leg and we will jump to the animation mode and bind the other poses I want to enable name here so it is easy for me to grab those bones and not mistakenly grab the I keyboards yeah this is working fine um now let's go to animation mode and I have saved this under down and you can see I disabled rest poses by disabling attachments and setting opacity of the slot to zero I will do the same for the Left Post so you can see because right now the down is pretty much working for us let's do the same for the Left Post let's create animation I want to hide or roses so for that I will select this down left with right click I will disable it in the hierarchy and in the viewport but don't confuse it with the actual disabling attachments because right now we don't have any Keys here so this is not something will be exported in Json to export the state of the slots in Json you need to actually go and hide the attachments and create key for that you can see I have here great now that we disabled it we can select any mesh and hit Ctrl a which will make sure that we select all the meshes that are visible except the pose that we don't want to hide and right now we need to disable attachments and then sell set slot opacity to zero I want to set a slot opacity to zero so later maybe I can fade it in and fade out so I can overlap them nicely to do smooth transitions so but if I disable the attachments now I won't be able to select the slot so I will have to manually go ahead and select them so for that let's first set all slots opacity to zero right now I have selected attachments I need to filter slots that will change selection to the slots that are containing the attachments that were selected actually so right now we have slots under selection the ones we want and you can change the opacity to zero and you can see that we still have attachment selected let's disable filtering and now we need to make sure that we go back to attachment selecting even though we see the selection of the attachments in the viewport but we still have selected this slot so there are two options either you can hit Ctrl a again or you can just uh select and deselect any of the attachments now if I click on this icon here next to any attachment that will disable all attachment this is why it's important to have all selected or you can go ahead do it manually that's it we have all hidden and now it's time to bring back our bless you going here finding it and hitting right click here or just hitting Ctrl H which reveals all the hidden attachments and any object in the spine actually okay we have our pose now we can move attachments here at once and align the bones but this is very tricky if you have attachments in your slots that are hidden for example here that they won't move they will still be there so you I can clearly show it to you now if I switch the attachment you can see it's here so you can go ahead and bind it nicely here be happy with that and later see that some of the attachments are off so for that reason I would suggest you to not move the attachments but rather move the bone here so anyway you can go back and move it back and let me actually move this new bones to character and move the character here I'm looking at the hip bone and we'll try to align everything here and now that we have everything aligned okay we can highlight keychain wait let's bind it I have a quick button here shift B will right away select this button and we can right away select the mesh shift B click on the bone click space and same for all the other meshes no exception I have everything but one thing to not forget that we have attachments that are hidden right now so if we don't bind this closed eye or maybe we have arms different if we don't bind them now we will later have problems so let's do it always remember to bind everything it's really important I think we have some feed here that are hidden I will try it let's move this and switch the images yeah everything is following this Bond yeah we are good here and we have finished binding for one pose it was not that hard right let's say the initial pause or each of them and one thing we still need to do is to move character bomb back now images will follow nicely let's go to the setup mode and see what we have you can see we just right away lost the second post down left but if you look closely here you will see we have overlapping things here and this will happen for all the other poses they will come here and stuck one over the other that means that it is impossible to work in the setup mode to modify or do something so we will have to come here and bind and do things here later on and now let's enable IDs and see how we are working with them because this pose clearly needs some my keys I will move this down and see how much I key I actually want to work we already have our constraints we just need to move this let's move it 70 and 70. and don't worry about this I will just reset the order again select constraints and result order and yeah this is the way or like it can work maybe I will do 19. anyway we can move them around don't worry about that so yeah let's remove the key and this will be our post and the value of constraint will also be saved in this pose you can see we will have that um key here and we similarly we will go to this animation key constraints that have zero value great let's do the third pose which will be left let's create an animation oh this is actually down left as you remember we started by selecting this bone hiding here with right click selecting all the meshes uh enabling the filter here then setting color to zero disabling filter here for slot and now that we have all attachments selected we need to make sure that they are also selected in the tree right now we have steel slot selected so previously we hit Ctrl a right now we can click here and with Ctrl F and click back so what we need to do is just uh click on this icon boom and lastly we can click Ctrl H to reveal what we have hidden from the viewport here's it I actually forgot to key the attachments that are visible so right now you can see this attachment is visible but it's not keyed so if we want to do the transition and copy for example all the keys here we will only copy the keys that are hidden and we need to key the visible attachments for that I will select this one hit Ctrl a so every measure is selected and then change back to slot and here I can click any of this green key to key the attachment state which is visible right now you can see we have our keys the same thing I will do here select the mesh hit Ctrl a a few of them are keyed and hit key icon let's do the same here great now it's time to bind it remember how we did it we're moving the main bone here and looking for hip bone it's fine and let's start by opposing the waistbone and we have our chest bone this will be our arms now I can set the full value here it actually jumped down since it is fully listening so maybe we need to move this up I don't like how I key is not matching but I can fix it let's move everything down I don't want to move it too up from the heel bone the heel of the leg so maybe we can select this and move it down here let's see if this will work now that I bind it let me actually hide this attachments you can see how easy it is hiding them just letting okay let's be careful here and binding to this bone not I key but this bone that the ones that have the names the moment we bind them the mesh key disappears and what we need to do is now continue binding this and this okay we have our leg so you remember that I moved down the knee mesh deformed it and then bind it so we lost initial pose maybe now we can relax the foot a little bit more by moving it up and then bring the leg up a bit so we get our initial pause this is the way how you can find a solution through tricky issues so actually we altered the pose by moving foot up without all the leg is being like in an initial pose now I will hide this leg let me show everything I will hide this leg so it doesn't confuse me and then let's hide this bones here so we have clear view of our other leg let's right away enable uh constrain fully we want our full I key and see where it stands I will be doing the same thing here we'll move the leg so you can see that I will later bring the knee here back by just moving foot up so for that let's move it down we have keys here created the moment we bind it to this bone they will disappear so it binds and then removes the key automatically let's do the same here see it's super hard to select the bone only names will actually allow us to do it great now that we have all here I will move the foot up and move all structure up so this way I I regained the initial position of the knee by just moving the foot all up let's reveal all back and see how our IQ working I like it now let's continue binding everything yeah everything is there I'm deleting this key to reset character's position okay now we have three poses read easy right and I will leave this character so you can train yourself in the description section wait let's go back to setup pose and see what we have nice we also missed the third pose and that you can find here overlapping with the other ones you can see they are all moving with these bones we still have the same set of Bones and we will continue having only them even if we add all these poses let's create up animation I will do it quick here since you already saw how I did it previously selecting up pause which is our current one hiding it in the tree and the viewport now selecting any of attachments Ctrl a enabling slot filter setting color to zero disabling slot filter selecting the selecting any of attachments that are already selected so we'll regain attachment selection in the tree View and here we can just click on this icon any of it next to the selected attachment row to disable attachment and let's bring let's show our character or current pose and make sure we have a kid the visible state of attachments for that select all meshes hit slot and click on this green key that will create keys and you can see right away we have keys grouped by these bones that I created here it will be very helpful in a moment you will see an animation but again this is optional you can go ahead do it however you want it has nothing to do with the actual rig moving the bones here let's hide our case we don't need them down move this down move this down I'm not sure if I should rotate it this way uh let's leave it I will see how it works in transition but maybe I can leave it like this because the previous pose is like this and this one can be like this let's see how it works start binding so let's see what we have here it might look okay but you see that we have uh cutting in the leg we have that portion here is it but it's not there so maybe we can bind it also here um not exactly what I'm looking for but can work and same so I will leave it like this I don't want to concentrate on polishing the bindings this will work if you add more vertices and spend more time here nice Let's uh key uh constraints that have zero value here for that select consent and key this is important because when we do the transition we need this animation to say that hey I am having Zero Effect from the IP otherwise if we select and copy all the pauses we won't actually have that value here and it won't do the transition great we have the other pose things move faster and faster let's remove this bone and check our four poses nice leads to our final pose and lastly we will do testing of transition and maybe create one animation where draft version where we are actually using a few poses pieces of different poses write an animation call it up or up left moving character here to pause it we have similar problem here let's check I key and give it like 90 values do the same here you can see they are not matching with the knees I will try to solve it maybe we can work with scaling the I key actually let's try that I don't like in general scaling I guess but maybe this time we can try it because if if two if I do scale that means I will have to go and key the scale in the other animations and yeah make sure I always keep an eye on that something like this even more now let's bind it with this way we have original proportions I don't want shorter legs and I'm really happy that we are facing this difficulties here so you can see how to fix it um let's check if we have yeah 90 value let me try again and see maybe I can go with uh yeah it's working let's continue binding and we are almost there Stay With Me so um I know that I have some bones that I kid in one animation but I didn't kid in the ad animation such as the scale or the I key chain you can see we have a scale here but we don't have that scale and if we do the transition this will come up as an issue I promise you so to solve that we can um select IDs and make sure that we in all animation we just hit the scale value here so even though in only one animation we did attach the scale it is important to to fix it to keep so later when we do transitions it actually works nice let's move it back time to start animation before actually starting make sure to key translation and rotation keys for all the pauses so we make sure that poses are transitioned properly and even if the bones are not moved they do have their keys placed accordingly otherwise transitions will have some minor issues when we copy past the keys now that rig is completed I will start transition animation let's transition from down pose to down left I'm selecting down animation deselecting everything so we see our keys here let's copy it and pass it the transition similarly copy down left keyframes and paste it here at fifth frame so what's happening here it's important to understand because right now we will see an issue here it's not a transition actually I mean the zero frame and last frame are actually doing the transition but we are seeing some issue here everything is fading out and then snapping back at fifth frame already in final pose so with this approach we need to do some manual adjustments what we need to do to select attachments of down left pause filter attachments here and you can see that only at fifth frame we are enabling attachments actually so what we need to do is just move it at zero whenever we want to start transition of the slots being fully visible so now we will see it doing transition nicely this is important step another step you might want to see is maybe you want to show up the last pose and then start fading out the initial pause right now they do all in the five frames so at the middle we might actually see uh pixels from background because they are all transparent at some point or maybe this is not something you want to see and to fix that I will select down left add color to the filter and let's make sure that it is getting visible at second frame yeah so this is it at second frame we are already seeing our down left fully visible so this is the moment we can actually start fading out the initial post down post so similarly I will select the attachment of down and make sure that starting only from second frame we actually do that fading out so this way it's certain that at any time we will be seeing any pause at 100 opacity and this is the result the difference is very subtle but at least you understand how to manage your keyframes using these bonds and last and very nice thing that we need to do is to animate it I mean to animate the bones we have the keys of transition which is great and here maybe we can add some little steps of the legs and some body adjustments weight shifting Etc something like this how was it or maybe we can make some blink here I know I'm sure you will do better here let's continue and animate a super slab which we'll use multiple poses and importantly it will use part of the poses so it's going to be like combination of different body parts in different directions let's name it and this is where you really need to plan everything because you will be working with tons of keyframes of attachments and Slots color so be careful let's do that planning actually we start from down left we do the anticipation go top portion to down and then we do that actually animation and rotate with all body to the left and quickly continue transition with the top body upper section to up and continue head rotation to this side which we don't have so basically we need to flip the head and use the left pose for that great let's start select down left and copy everything to Super slap we are starting from here 5 frame I want the top section of the body of down animation and only I want this section I don't I'm not copying the legs so I only select the stop section make sure to select down animation we want the keys from down now let's copy but the important part is here we not only need the keys here for down section of top SEC top body we also need the down left of top because we need keys where we hide this section because if I copy this we will show it but we need the keys where we hide down left of top body so I will also select this portion which will show timeline for down left and in down animation I'm copying all the keys that I can see I hope you got the idea let's copy it to five frames and now see what we have so at zero on five we have our rotation you can see it's not looking great but it's pretty much what we are looking for except the bone position are not there so to fix that I will also need to select down animation select the top part of the body and copy the keys for positions see I know it's not looking great but just keep with me don't worry about draw order we can fix it at the end of the animation as long we get the transition and timing right so remember that we have the issue with transition where we get a transparent so for that what I need to do is actually at fifth train what we see we see top section showing up but we need to select top section here for down filter attachments and move all the attachments to zero frame where we actually want to start transition you can move it to Second frame it's up to you as long as you know that it should start from second frame great so I will move everything to second or third frame making sure that the top section is fully visible at second frame then I will select the down left and similarly as we did with transition animation move the first frame here that will start transition of fading out here so we basically did the same as we did in transition but only for top portion let's delete the last key and see what's coming next so we're having our anticipation we will basically just create a pose here where we have our arms spread so we deliver the best love in the world but I'm not posing the bones right now I just want to remind you what we were actually doing what we have planned so far okay so let's assume at fifth frame I'm hitting Ctrl shift L to key everything that I used so far and at six frame let's think of a transitional pose where we using full left post so for that I'm going to the left disabling all filters copying and super slab casting it here everything works fine and on Seventh frame I want to use and next I want to bring this portion at the seventh frame so select up animation select these bones and think of the animation from which we want to transition because if I copy it here I will show this post but I will also need to hide the previous post so which is the previous pose in our sixth Dimension it is left that means we need to select these bones and also these bones selecting these bones will make sure that we are selecting keys that are responsible for hiding this top section let's copy the keys at past it on seven frame for super slab you can see we have our body turned back and then as you might remember we also need to bring the pose of the bones so actually the the rotation and translate Keys let's go select up copy the keys and bring it at seventh frame boom so what's happening we are anticipating and one transitional animation and boom this is what we need for now and maybe add eight frame I will use the head of the left let's select left select this bone and also select this bone because we are transitioning from here to here we need to select both of them because this one contains the hidden frames this Keys include the transparent and disabled state of the attachments they will help us to hide this state of the head while this case which are inside this bone will help us to show the left I hope it's not complicated so let's copy it and pass it here what we need now is flip it and I need to flip the y-axis which will be this one and maybe I will disable interpolation here I don't like the pose actually but it works fine for now so pretty much we are in a correct way of doing the solution we just need to manually polish these portions because right now we still are fading out and not showing the keys so to fix that I will select these keys filter attachment and move the left to one frame back where we actually start transition so that will mean we are showing left pause at the exact time where we start fading it in let's create our anticipation pose now we are almost there stick with me this is our own special pose this is our anticipation pose this will be our transitional pose we have our arm fully horizontal I want clear silhouette and this leg is starting to plant and this is the final pause for the body this is where the slab happens actually maybe we can fix the draw order we need to hit here fixed I see some overlapping transparent slots maybe we can shorten that um duration I don't want to transition this long I see the problem is with the down left they disappear slowly here is it so maybe I can move this here and move draw order a little bit early I do see their legs are switching incorrectly but you can fix that by just not switching the hip I guess because the frontal hip right now um is incorrect we need to rotate it maybe we need the left hip which I will not do it now because it really um so for now I will just leave it like this this is where I will be leaving you make sure to subscribe to not miss upcoming polls about next videos and also consider supporting us by joining as YouTube supporter or on patreon and special thanks to these people they give me hope to invest my time in this channel thank you bye

Channel: Armanimation

Views: 16,344

Keywords: spine, spine2d, 2d, game character, animation, 2d animation, rig, rigging, spine 2d, spine 2d animation, spine 2d tutorials, spine 2d tutorial, 2d rigging, animation 2d, game art, game animations, VFX, fx, photoshop, spine animation, spine tutorial, spine pro, 2d spine, 2.5d animation, 2.5d, 2.5d vfx, spine 教學, face rig, spine vfx, spine 2d vfx, characters, game characters, 8 direction, character, multidirectional, isometric

Id: pxP87em31e8

Length: 44min 8sec (2648 seconds)

Published: Mon May 01 2023