Introduction
DragonBones is a 2D skeletal animation software created by Chinese developers.
You can design characters and animate them for your game. It has support for the major game engines out there.
This tutorial is for absolute beginners with less or no experience and have no idea where to start with or how to animate stuff in DragonBones.
After you finish this tutorial you should know how to:
- create bones
- create IK constraints
- create meshes and use them during animation
- understand the timeline in animation
- attach weights to bones
- basics like swapping images, tips and tricks.
And a more advanced tutorial:
- setting up your character in Unity3D and applying animations
I'll give you steps to do and explain them in detail wherever I feel it's necessary.
I'll also put a free download of the full project at the end of the tutorial.
So.. lets get started :D
1. Install DragonBones
Click this link to download
DragonBones
If you already installed DragonBones make sure it's up-to-date.
This tutorial was written with version 4.9.5.
2. Run it!
When you launch DragonBones after installation has finished you will see a welcome screen.
On the bottom are some useful example projects which you can explore and play with and on top you will see your projects.
Click on “new project”.
You will see a panel asking you what kind of project you want to create.
For now simply choose “Create Animation”.
From the resulting panel make sure “Armature Template” is checked and click finish.
The DragonBones editor will open. This is where everything plays together.
3. Know your Enviroment
There are lots of panels and controls. This might look confusing but you will get to know each later on. For now I'll tell you some of the important panels and functions.
Views
You can adjust each panel in size and place. Simply drag n drop them on different places to customize your layout. When things are messed up you can always reset everything to defaults by clicking on Window>Reset Panel on top bar.
Library Panel
The library is where all your sprites are located in.
The armature refers to your current character or whatever you want to animate.
You can create as many armatures as you want in a project. Each armature refers to the same library but does not share the same character setup or animations.
Scene Panel
The scene panel is the hierarchy of your project and current scene. So whatever you put in the scene you will see that object appear in the scene panel.
Right now there is only the armature object and the root. We will populate the scene in next step.
Scene View
Here we put our sprites, create bones, change meshes, attach IK and play around with our characters.
In the scene view itself there are different type of buttons and controls.
On below image in the left side you see a table. On the table you can select and deselect whether to show bones and sprites as well as whether bones and sprites are selectable or not. This comes in handy when you have for example overlapping bones or sprites.
On the right side you see the Transform panel. Here you can read and modify the position, rotation and scale of a bone or sprite.
Mode Switcher
 |
| Mode Switcher |
Mode switcher is very easy to explain. When you done setting up your character in Armature mode then you are ready to animate it in the Animation mode. In short:
Armature for configuring
Animation for animating
Tools Panel
 |
| Tools Panel |
The cursor is for selecting, transforming and doing the general stuff.
The pose tool is for posing your character similiar to IK constraints.
The bone tool is for creating new bones.
The weight tool is for modifying weights of meshes.
And the percentage just shows how far in or out you have zoomed in the scene.
Now you should really learn the shortcuts for the tools because you will use them a lot !
Cursor = V
Pose = P
Bone = N
Weights = G
Pan & Zoom
You can pan around in the scene view by holding right mouse button and moving your mouse.
Zooming is achieved via the mouse wheel.
That's enough to get going. Lets continue with next step..
Character setup will consist of 4 parts.
- Arrange Sprites
- Create Bones
- Set IK constraints
- Apply meshes
Naming Project
First of all lets rename the project. Right now it's called "NewProject".
Hit CTRL + S or alternatively go to File>Save Project .
A dialog will open where you have to give a name for the project and also choose the project path. Call your project "Skater_Guy" or whatever you want. You can't put spaces in project name so I put an underscore.
Now pay attention here!
The project path is by default called "NewProject" even you give a project name. We don't want this.
So in project path replace where "NewProject" is written with "SkaterGuy" or whatever you called your project like the image above. Then hit finish.
Now your project is renamed and saved.
Importing Sprites
We will set up a basic character.
For this purpose I have drawn a flat style skater character because obviously flat style is easier to animate than a complex shaped one.
You can get the sprites here fore free.
Download Skater
Unzip it. Open the folder in explorer and select all sprites. Then drag n drop them into the library folder in the library panel.
Keep an eye on the image icon in library panel where you just imported the sprites. It's white.
Throw in some Sprites!
Next, we want to put the sprites into the scene. You can drag n drop all one by one or a faster way is to select first item then while holding down left shift select last item. This will select everything in between first and last item.
When everything is selected drag n drop onto the scene.
Once again look at the image icon in the library panel. Woaah! It's golden colored.
The meaning of the color change is that it shows you which sprites from the library are actually in use. So golden means active sprites in scene, white means not in use. This is sometimes a very useful small information.
Okey. One small thing before we continue with next step is that we have renamed our project but we didn't give any name to our armature.
We should give a more meaningful name to it. So simply double click the armature in the scene panel and type for example "Skater".
Or you can click on Armature in library panel then press right mouse button and from the drop-down menu click on rename. Both do the same. Fine..
Arranging Sprites in Scene
Hips
Find the hips sprite in the scene and select it. If you cant find it search for it on the scene panel. Then move it on both coordinate axis to 0. To move it exactly to position 0 go to the panel on bottom of the scene view. This is a panel for transformation operations: moving, rotating and scaling
Right now we only want it to move. The two number fields next to the cross arrow icon define the x and y axis of a sprite. Set both to 0.
We do this because the hips is the base point of our character. When it is placed correctly everything else will be on proper place too.
Reference
If you have notices we put a full skater character sprite on the scene. This has a reason. It will help us to setup the character correctly and serve as a reference.
Click the full skater character which is called "skater_guy". It will be also selected in the scene panel. Then in property panel reduce the Alpha to around 50%. Doing so will make the sprite transparent as we only want to use it temporarily for reference.
If you can't find the property panel you can find it under Window on navigation bar.
After that try to match the hip of the full skater character with the hip we previously set to 0.
Puzzle
Everything else is just repetitive work. Put every sprite on proper position so it matches with the reference sprite.
You will also need to rotate some sprites. This also has 2 possible ways. The easier one is while a sprite in scene is selected move your mouse cursor outside the thin blueish rectangle of the selection area.
You will notice that the cursor icon changes to a cursor with rotation icon. Then hold left mouse button to rotate.
Repeat until you have something like the image below.
Wait ! This looks wrong! That is because our positions may be correct but we need to edit something major which we do in next step.
Draw Order
The draw order tells DragonBones which sprite to draw on top and which one on bottom. On some places it's called z-layer, z-order etc.
So what we need to do is wherever the draw order is wrong move it to the proper place. The draw order also depends a little on how the artist has drawn an asset. Maybe he has drawn the arm to be on front while others draw the arm to be behind.
Ordering..
Edit the draw order until the character looks correct. You can edit the order by simply dragging the items in the Draw Order panel below or above of other items.
Quick example:
- upperleg_r below hip
- lowerleg_r below upperleg_r
- foot_r on top of lowerleg_r
At the end your draw order should look same as my draw order here:
Bye Bye Reference..
When finished and everything looks fine you can delete the reference from scene as we no longer need it.
That's it !
If you have followed everything and done correctly you should end up with something similar like this:
The next step is to create bones and being able to actually animate the character.
Next Tutorial Part: Character Animation Part II
