Dragon Bones: 2D character creation and skeletal, mesh animation

Good afternoon, reader! In this article we will look at the process of developing a typical character for our debut Kidarian Adventures. I will demonstrate my usual work structure, however, I’ll focus on creating animation in Dragon Bones, attach explanations and self-written video tutorials.



So, let's begin.
')
Current task: Redesign of the outdated model of a standard flying monster six months ago. The bat did not have time for our skill and became irrelevant within the chosen graphic style.


Model that we will redo

At a minimum, our task is initially slightly simplified: no need to look for a concept for a character, but, nevertheless, the work will be done almost from zero.

Stage 1: Work with references

Among people who produce graphic content, nothing is taken from scratch. I never believed those people who, sitting on a chair, shout: “O inspiration!”, And masterpieces begin to daub.

And this is the simplest explanation: “Damn, my mouse is so stupid, because I don’t even know what the bats look like! Without references, I just drew a ball with wings! ”.

So, open up Google and begin to “get inspired” by real bats, the structure of their bodies and their muzzles. Let us analyze the structure by example:



I am determined with the general forms and proportions. I begin to notice the features of the structure and mounting of the wings. Wings are a skeleton with stretched membranes. There are small legs and big ears. And if everything is clear with the body (although in the previous version I managed to draw the wings upside down), then with the muzzle of bats everything is much more complicated, and they often look well ... not so much.

Stage 2: Outline

Once you have determined the correct anatomy, you can proceed to visualization. I tried to use different forms of the body, giving them a slightly more grotesque look, like flying devils or large animals. As a result, I came to the conclusion to use the original plan with a small body, legs at the back and large wings.


Several working options


A brief excerpt from the process

Stage 2: Rendering / Vectoring

After sketching and approving the final result, I turn to Adobe Illustrator. Images are drawn in a vector - it always makes it easy to set the desired size without losing quality. It is worth noting that as a result, I upload a bitmap image in the .png format. As additional materials for different game levels, the bat will have two color schemes for different levels.

Stage 3. Animation

Animate will be in Dragon Bones. This is a free Chinese equivalent of Spine, providing a clear interface and the possibility of skeletal and mesh animation. Dragon bones is free and can be downloaded from the office. site.

Unfortunately now the community of this software is not too wide, and even in English there are not many tutorials, basically all the information is in Chinese.

The first step that should be done is to cut the model so that each moving part is separate. Save pictures in .png format and no background.



After that we load ready-made .png into DragonBones, we collect according to the idea. You must also set some parameters. Draw order is a display by 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. (REM. The first in the hierarchy is the farthest).


Character build



A brief statement of what is happening on the video above

Next, you need to convert objects into a mesh so that you can change their shape as we need. To do this, select the object on the scene, on the left, put a check mark in front of the mesh, then click on Edit mesh and begin to draw the mesh so that the images are not distorted or cropped anywhere. Particular attention is paid to stiffeners, such as the bones in the wing, which will bend.


UPD. For better optimization in game engines, it is recommended to make a minimum of polygons in the model. As part of the game and the bat, the number of polygons does not greatly affect performance, so I can allow more

This operation we are doing with all the parts that will morph. Basically it is the wings and head. For the body, only one tick of the mesh will suffice, the grid is not required, since the object will be static.

When everything is ready, you can lay the bones. To do this, use the bone tool (bone) in the top right of the screen. The initial point is always present on the screen - root.
This is the base bone, to which the whole composition is attached by default, it is the first parent bone. Bindings to parental bones are indicated by arrows.



Grid of bones



Deciphering parent bones

After laying the bones, you need to tie them to the mesh, to do this, click the Add bones to bind button, select all the bones that belong to the sprite and click the right mouse button, either on an empty part of the screen or on Auto Generate Weight. The bones will automatically bind to the sprite, they will be given the value of Weight. The value of Weight or popularly "weight" is responsible for how the bone affects the sprite. This is important in cases where several bones are simultaneously tied to a single sprite. Adjustment occurs with the help of sliders that define the “area of ​​responsibility” of each bone.



We perform this operation with all the bones and sprites, adjust the weight value when the sprite is incorrectly folded. When all bones are attached and adjusted, you can proceed directly to animating the object. For this, I recorded a small video.


Construction of key frames 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 may clarify the work, and what I showed:

1. Keyframes are created automatically if you have done some kind of action with a bone. (Provided that the corresponding checkbox is clicked)



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



3. In order to change the skins for the character, you need to add sprites to the appropriate subfolders (displays). Previously, they need to be turned into a mesh, draw the mesh and bind the bones, as they did with the main sprites, so that with the same animation, everything is displayed correctly. To add a sprite, simply drag drag'n'drop into the appropriate section.



4. In Dragon Bones there are curves that slightly change the proportions of the animation, delays and accents on some keyframes. In words, it is difficult to explain how they work, but very clearly it becomes immediately clear what kind of magic tool it is. IMPORTANT: Each keyframe can hang its own curve, and it will act until the next rule on curvature.



What did we get in the end?

It turned out simple animation in two colors.





We can upload the result in various formats that any game engine eats.

Thanks for attention!