DragonBones [DB] Updates
Since my last
DragonBones Tutorial Part 1 which was written on version 4.9.5 there has been major updates. The current version of DragonBones is 5.6.2
Humanoid: Stickman
Let's work on a new example from scratch.
We will learn how to set up bones for a character. An efficient way to do this is probably to practice on a stickman. Stickmans are an easier form of
humanoids.
Download it
here
2. Import Stickman in DB
If you are not sure how to import the character into DB go back to tutorial part 1.
When everything done properly you should have something like the picture on the right.
3. Humans Need Bones So Do Your Characters
3.1 The first bone, the most important bone
Pick the bone tool (shortcut: E)
Your mouse cursor will change to a bone icon with a plus sign. This means you are now in bone making mode. Always start with the bone that is the top parent of all other bones.
In a humanoid character this is usually the hip. All the other bones like arms, head and legs are eventually linked to this 1 bone. In our case we don't really have a hip but we have a body. So our body is the main part to which everything else is connected.
To make a bone click and drag LMB (Left Mouse Button) while your bone tool is still selected and move your mouse to make the bone have a certain length.
For the first bone you should make a bone that covers up the body of the stickman.
Now you should have noticed several things here.
The first thing is while you were dragging the bone the image under the bone was surrounded by a blue rectangle.
What does this mean?
It means that the current bone you are making will be the parent of this image. In other words the underlaying image will be automatically attached to the bone you have just made.
This is pretty awesome! It takes you away the work to do it manually. Bef
ore you had to make bones then go to the hiearchy panel and link each image with the associated bone.
That took plenty of time especially because you wanted to make sure each image is attached to the correct bone etc.
Second thing you should have noticed is under the "Scene" panel there is a new bone object added. This bone object already is called like the image attached to it.
Because the image was called torso so is the parented bone also called torso.
Important: To make DB attach image to the bone you always have to make sure the bone is within the borders of the underlaying image.
Let's see what happens if you do otherwise
As you can see the surrounding blue border is disappearing as soon as the bone leaves the border of the underlaying image. So understand it that when you make a starting point of the bone outside the image or when you drag the bone so long that it goes outside of the image area then the image will be not attached automatically.
When you make a bone outside the image area you get a default bone added to the scene panel. If this happens you have to adjust the bone, manually attach the associated image and rename the bone.
3.2 Parent Bone - Child Bone
Lets move on. Having the torso / body image linked with a bone we can now proceed. Pick again the bone tool (shortcut: E) and select the torso bone either by clicking it on the editor or picking it up under the scene panel and then make another bone for the neck. Continue with the head.
You can see that the 2 new bones are childs of the torso bone.
That is why we have selected the torso bone first.
The head is child of the neck, the neck is child of the torso bone and the torso bone is a child of the root which is always there by default and cannot be deleted.
When you would move the head bone now only the head would move. Because moving a child does not affect the parent bone which is the neck here.
Same way when you move the neck bone it doesnt affect the torso bone but it does affect the head bone because it's a child of the neck bone.
..moving a child does not affect the parent bone. But moving the parent bone does affect the child bone.
3.3 Stickman got some bones
Continue with the remaining parts.
But be careful: Your last bone you made was the head bone. So if you just continue to make a new bone for the arms
while your head bone is still selected your arm bone will be connected to the head bone.. And it would be a strange character to have a arm bone on the head right? ;D
So select the torso bone first to tell DB that this is going to be the parent bone and whatever bone you make after will be the child of that selected bone.
Now that you know how to make bones and attach images to them proceed with the full character like below.
Make a bone for each body part.
Bone the following body parts:
- Head (already done)
- Neck (already done)
- Torso(already done)
- Right Arm
- Right Lower Arm
- Left Arm
- Left Lower Arm
- Right Leg
- Right calf
- Right Feet
- Left Leg
- Left Calf and
- Left Feet
Notice how I keep the bones I make always within the image itself and within the surrounding blue area.
So each time I made a bone it was auto renamed and automatically all of the images were linked with that bone on top.
4. Play Time
When you are done pick the pose tool (Shortcut : W)
Pose tool allows you to rotate the bones easily. I actually find it not very useful. I'll explain the why to a later time.
Now we can play around with the character. If you have done everything properly you should be able to move the bones with the pose tool and the images should move with the bones, rotate with the bones etc.
I made some ninja flying kick pose kyaaaa :d
5. Fixing
There are a few issues with the current setup of the character. You may or may not have encountered same problems. But in any case check them up and fix wherever it applies.
5.1 Fixing the root
In my DB project somehow the root got displaced somewhere floating around my stickman character.
The red line shows where the root currently is located
The cyan line shows where it actually should be.
If your root is not at 0,0 then you should move it to that location or coordinates. My root is at [ -490.00 , - 973.00] . Not a good place to be in..
So just change the numbers to [0,0] and your root will transfrom to that location
But now this causes another problem which is that together with the root the entire character moved.. That is expected since the root is what contains all the images and all the bones and everything else we are going to add in future.
Pick the select tool (shortcut : Q)
Make a selection box to select all images and bones currently on scene then while everything is selected go to the scene panel and deselect the root only. How do I do that?
On Windows you press the [ CTRL ] Key and click on the root to exclude it from the selection
Then you will be able to transform everything except the root. And that is what we want. Because the root is on place, we no longer want to move it. But we want to reposition everything else. Try to put the root somewhere in the center. You can place it on the body where our first bone is. But I find it the best practice is to put it centered down like I did in the attached GIF here.
Done
I think this is enough for part 2. There are still a few issues with the current setup but we can deal with them the next time.
In tutorial part 1 we have learned how to import a character into DB and assemble it. We got to know our DB enviroment.
In part 2 we got to know how to make bones, how bones are connected with images and how bones are connected with other bones. And finally we learned how to use the posing tool to move bones and give a pose to the character.
Next Part: Character Animation III
If you like this tutorial comment, like and share.
Thank you and stay in touch !
