Hey, guys! And welcome
to this Spine animation tutorial! In this video you will learn:
how to create a rig for the character, how to use meshes and weights in Spine and many more small tricks
that will make your character look alive! But before we start make sure
that you subscribe to the channel and hit the bell to be the first one to know
once the new video is out. Ok, so let's get started! Here is our king of vegetables
or as we call him King Broko. And I'm going to use this exact character
in my game Fruits Against Vegetables. Broko is already sliced
into a number of images or layers. And each image has already
been attached to a different slot. We'll start from creating meshes
for each one of the images. Just click on the image
and choose "mesh" option. And then click "Edit Mesh". A new panel will pop up. And here I'm going to choose
"New" mesh. Great! Now you see that Spine shows
only a specific image that you are working on. That really makes the process easier. And don't worry! The rest of the images will be shown again once you finish creating the new mesh. Okay! So, to get started simply choose a spot
somewhere close to the image outline and click it! You don't need to
hold the mouse key. It's just a single click. Then go ahead and click
somewhere close to the previous spot. And try to follow
the shape of the image. If you want to zoom in or out, just scroll with your mouse. Try to stay close to the edges. And don't worry if the mesh
doesn't look perfect. Because you can always make adjustments
and modify it later on. Now, here is something important
about the meshes: all those dots are called Vertices. And you can see the vertices count
here at the bottom of the screen. The more vertices your mesh has, the more calculations
your animation will require. And in the end,
it might affect your game performance. So, on the one hand,
if you add too many vertices it might slow down the game. And on the other hand,
if you add too little the image will look distorted
and the movement will look unnatural. So, how do you find the balance then? Well, actually you'll want to make
the meshes more detailed and add more vertices just in the areas
that are going to bend. In the rest of the areas, you'll want to keep
the number of the vertices to the minimum. And again, if you feel like
you've added too many vertices don't worry, you can delete them
by using "Delete" tool. Close the mesh by clicking
on the first dot that you've created. Okay, congratulations! Here's our first mesh. However, we're not done with it yet. Let's switch to "Create" tool
and add some more vertices on top of the image itself, to allow smooth movement
later on. We'll start from the top. And here, right in the middle, click and move the mouse down
while holding the left key. I'm releasing the left key
when I'm between the next two dots, trying to make a straight line
between them. Then I'm clicking
the last node I've created, holding the left key and moving down again. Just about here, between the dots
on the both sides of the mesh. And same, once again: clicking the last dot, holding the left key, moving down and releasing the left key. I'm switching to "Modify" tool
to adjust the position of these new vertices. Now, let's switch back to "Create" tool and connect the dots on the sides
with those in the middle. Clicking the node, holding the left key, moving to the center releasing the key. Same actions
over and over again until all the nodes are connected
to the yellow line in the middle. I think it's about time to explain
what I'm actually doing right now. Basically, these yellow lines help us
control the mesh deformation more accurately. Like, preventing these areas
from looking distorted. And they also will help us
build a 3D feel later on. And I know that it's time-consuming, but trust me,
the effort is worth the outcome! Because the movement is going to look
much more smooth and natural than without these additional vertices. So basically, I'm going to add such lines
to most of the parts of the image. The process is the same
for the remaining part, as well. So, I'm going to speed up the video
to save up your time. Okay! So now, when we finished
with the crown, I'm going to add a little bit more nodes
in the important areas of the image that I want to be
less affected by the deformation. Like, the lower part of the crown.
It should be pretty solid. The forehead. The cheeks. And the upper part of the King's garment. Then I'll go ahead and continue the yellow line
that starts at the central tip of the crown. And I'll make it go all the way down until the part where the garment splits in two. Then I'll connect the nodes
that I've created before to the central line. Just like we did previously. I delete the nodes
that feel redundant to me and adjust the position to the central nodes to create some nice straight lines
in the bending areas. Same about the lower tips of the garment. Creating the line in the center and connecting the nodes. Pretty straightforward. Now, I'm going to follow the same
procedure to create the meshes and additional vertices
for the rest of the images. So again, I'm going
to speed up the video and continue my explanation
when I'll start to create the bones. Alright, so now
when we have our meshes ready let's switch to "Create" tool and make the bones
for our character's skeleton. Now, don't think of a skeleton
as something anatomically correct. Because it's not! After all, broccoli shouldn't have
any bones at all. But this is how the skeleton animation works and we're going to create bones
for the important parts of our character. And the areas that are going to bend. Like even the hair will have some bones! By default, each Spine skeleton
comes with a root bone. You can see it here below. I usually keep it unchanged
as a point of reference for the floor. And I create a different bone instead
that will be like the core bone for the rig. To do that:
choose the root bone, hold "ctrl" on Windows
or "command" on Mac, choose the image to attach and just click. Here! Somewhere around the hips
or waist area should be fine. Great! Now let's create another bone
right above this one. Hold "ctrl", choose the image, click above the previous bone and hold the left mouse
key to create this long bone. Somewhere in the middle
of the bending area should be good. Let's follow the same procedure
to create another bone. Hold "ctrl", choose the image, hold the left key and release. Okay! Basically, now each new bone
is a child bone of the previous one. What does it mean? It means that if you move the parent bone all the child bones will move, as well. Even if it sounds complicated now don't worry, it will be clear
once we'll start animating our character. Now, if I want to break this hierarchy
and create another child bone to the same parent, I simply need to choose it
and follow the same procedure as before. You can see those small red arrows and they show the hierarchy of how
the new bone is affected by other bones. Okay! Let's do this once again: choose the bone, hold "ctrl", choose the image and create a new bone. Same for the lower part of the garment. See? Each side of the garment
should move independently from one another. But both of them
are affected by the upper part. Great! Now, let's connect the belly
to the core bone. Choose the bone, hold "ctrl", choose the belly image and create a bone. Same with the legs. The first one. And the second one. Good! Let's proceed to the arms. And I'll create two bones for each one of them
to make them bend in the elbow. Alright!
Now the second one. Great! Now, let's move to the hair and let's connect it
to the bone on the forehead and the lower part of the crown. Choose the bone. Hold "ctrl". Choose the hair. And start creating bones. I will connect all parts of the hair
to the forehead bone so that they can move independently. Awesome! We've completed
a large part of the rig. We have bones for the body, the arms, the feet and even the hair! But we still didn't touch the face. And I pay
special attention to the face, because obviously, this is what makes the character
show emotions and really start to look alive. We're going to add bones
to every single part of the face to make it look awesome. And we'll start from
the core bone for the whole face. I'm going to connect it
to this bone and the eyes. And I usually place it
somewhere around the nose. That will really help us move
the whole face up or down or sideways. Okay! Let's proceed to adding
some bones to the brows. So, hold the control key, choose the brows and start adding the bones
one after another. I don't recommend adding
more than three bones per brow because you simply
will not use more than that. Even three bones might be an overkill.
So, keep it simple, guys. Okay, so let's connect the second brow
to the central bone of the face to make it move separately
from another brow. One. Two. And three. Then, let's add the bones to the mouth. You can see that I create
a central bone for the mouth, as well, so that I can move the right half
without moving the left half. And vice versa. Again, that might be an overkill.
But I just like to make it detailed. Great! Now, the eyes. Same principle as before. Creating a central bone
somewhere around the pupil. And then creating the bones
on top of the lashes. The hierarchy here is important! So, pay special attention to it. Moving to the other eye. Central bone. And the lashes. Again, you might want to use
less bones for the lashes, and that's absolutely okay. Then, let's proceed to the mustache. He should be able to move it, as well. Left one. And the right one. And lastly, the beard. Great! Now we've got a nice and quite detailed rig
for our king of the veggies. But before we start animating we need to bind the bones to the meshes and calculate the weights. That's actually quite easy because Spine does a pretty good job
calculating all this stuff for you automatically And you just need to tell it
what bones would you like to bind to the mesh. Let me show how it's done! I'm choosing the "Weights" tool,
here below. And let's start
with something simple, like the arm. I'm just clicking on the image
and the new panel pops up. I'm pressing "Bind" button. then clicking the bones
that are on top of the image. Then, pressing "Bind" again. Great! Now, if I choose the "Rotate" tool
and test the arm. See how it's bending nicely
around the elbow area? Cool! So, let's go ahead and bind the bones
for the second arm as well. Choosing the image. Clicking "Bind". Choosing the bones. And clicking "Bind" again. Checking the result. Looks pretty good! Now, the body is going to be
a bit more tricky than that. And we'll need to make
some manual adjustments here. First, let's bind the bones
as we did before. That's the easy part. Click "Bind". And the weights are
automatically calculated. So far, so good! But here is a small problem: here, in the bending area,
you can notice a bit of pink color. This color means that
the area is affected by the pink bone, which is related to the garment below. If I move that bone it moves the back of the head as well. And it definitely shouldn't do that. So, let's fix it! Going back to the "Weights" tool. Then, holding the "ctrl" key on Windows
or "command" on Mac and starting to click on every node
affected by the pink bone in this problematic area. Then, I'm choosing
the pink bone from the list. In my case, it is bone number 15. Holding the left mouse key and moving it down. The pink has disappeared
from the area! And you see that
the back of the head is not affected by the movement
of the garment anymore. Let's check the rest of the bones and make sure
that they move correctly. And then bind the bones to the hair just as we did before. The hair moves in a really cool way! And that's because we've added
those additional vertices. Okay! Now, what's left is to bind the face bones
to the meshes on the face. Let's start with the mouth because that's the easiest part. Same as before,
picking the bones and clicking "Bind". Yeah, should be good enough! Now, the brows. And here we should use the same trick
with the manual adjustment again, because I want the brows to move
independently from one another. Well, of course, you could just make
two separate images for the brows, but I like to keep the eyes
and the brows in pairs. Because I have a lot of different
eyes and brows for a character. Basically, each emotion
has a different set of them. So, this is just how I keep them organized. Great! Now, we need to do the same for the eyes. Binding the bones to the mesh. And then adjusting the weights so that moving one eye doesn't affect the other. Let's check how it works! That's actually pretty good! And the last thing left to do
is coloring the bones. This is not mandatory, but I highly recommend doing this because it really makes it easier
to notice the bones while animating the character. I usually color different parts of the rig
in a different color. Like, let's make the arms red. The feet orange. The body and the garment purple. And so on. You just hold "ctrl" or "command", select the bones, then click this gray area near "Color",
here below and pick the color.
Like this. Just make sure that these colors
are easily seen on your character. That's it, for now! We've got our character
ready for animation. So, join me in the next video to learn how to make it
move like this and create your first
idle animation for the character. Thank you for watching
and see you soon!
