Dragon Bones: create a 2D character and skeletal, mesh-animation

Good afternoon, reader! In this article, we'll look at the roadmap that the typical character of our debut Kidarian Adventures play. It, by the way, recently entered the world release on ios and android platforms. I will demonstrate my usual structure of work, however, I will focus on creating animations in Dragon Bones, I will attach explanations and self-described video tutorials. of. site.
Unfortunately now the community of this software is not too broad, and even in English there are not many tutorials, basically all the information in Chinese.
The first step that should be done is to cut the model so that each movable part is separate. Save the pictures in the .png format and without the background.
Dragon Bones: create a 2D character and skeletal, mesh-animation
After that, we load the finished .png in DragonBones, we collect according to the idea. You must also specify some parameters. Draw order - this is a display on layers, working on the principle of layers in Photoshop. The higher the object is in the hierarchy, the higher it is above the other layers (note the first in the hierarchy is the furthest)

Assembling the character

Brief statement of what is happening on the video above
Next, you need to convert the objects into mesh, so that you can change their shape the way you want. To do this, select the object on the stage, on the left, tick the mesh, then click on Edit mesh and start drawing the grid so that the image is not distorted anywhere and cut off. Particular attention is paid to the stiffeners, such as bones in the wing, which will bend.

This operation we do with all the parts that will morph. Basically it's wings and head. For the body, only mesh mesh will be sufficient, the grid is not required, since the object will be static.
When everything is ready, you can lay bones. To do this, use the bone tool in the top right of the screen. The screen always contains the initial point - root.
This is the base bone, to which the entire composition is tied by default, it is the first parent bone. Bindings to the parent bones are shown by arrows.

The mesh of bones is

Decoding of the parental bones
After laying the bones, you need to tie them to the mesh, for this click the Add bones to bind button, select all the bones that belong to the sprite and right click on it, either on the empty part of the screen or on Auto Generate Weight. Bones automatically become attached to the sprite, they will be given the value of Weight. The value of Weight or in the people of "weight" answers how the bone affects the sprite. This is important in cases where several bones are attached to one sprite at the same time. Adjustment occurs by means of sliders, defining the "zone of responsibility" of each bone.

This operation is carried out with all bones and sprites, correcting the value of weight with an incorrect bend of the sprite. When all the bones are tied, and adjusted, you can proceed directly to animate the object. For this, I recorded a small video.

Building keyframes on the example of the wing
Such a mesh animation system is suitable for all moving parts of our bat. I finish the same for the second wing, slightly add amplitudes for the ears and torso.

TIPS: Some points that can clarify the work, and what I showed:
1. Key frames are created automatically if you have done something with the bone. (Provided that the corresponding check box is clicked)

2. With one of the latest versions in Dragon bones, there appeared separate timelines for such variables as Move, Rotate and Scale. To force a key point to be placed on one of them, click the checkbox.

3. In order to change the skins for the character, you need to add sprites to the appropriate sub-folders (displays). Previously, they need to be turned into mesh, draw the grid and bind the bones, as they did with the basic sprites, so that with the same animation, everything was displayed correctly. To add sprite, just drag drag'n'drop into the appropriate section.

4. There are curves in Dragon Bones that slightly change the aspect ratio of the animation, the delay and the emphasis on some key frames. In words it is difficult to explain how they work, but it becomes very clear how immediately it is a magic tool. IMPORTANT: You can hang your curve for each keyframe, and it will operate until the next curvature rule.

What did we get as a result?
It turned out simple animation in two colors.


We can download the result in various formats that any game engine crambles.
Thank you for attention!

Add comment