A tutorial on using the dragonbones of the Skeleton animation tool

How to create more vivid animations with less art costs? Today we will introduce an open source 2D Skeleton animation Framework and tool--dragonbones, which contains the desktop Skeleton Animation tool Dragonbonespro and a set of multi-language versions of the dragonbones Skeleton Animation library.

The following is a general introduction of dragonbones terminology and use of the method.

I. Common terminology in dragonbones 2D skeletal animation
skeleton: skeleton armature, is the most commonly used noun in 2D skeletal animation, generally refers to a lot of bones composed of a whole. The Dragonbones also represents a role that can contain animations.

Bone (bone): bone or bone bone is the most important basic unit of skeleton in the skeletal movement network. The bone itself cannot be disassembled, and in the skeleton it can be translated, rotated, scaled, and moving, forming a bone-lattice animation. In addition, there can be parent-child relationships between bones. In general, in the case of the default forward dynamics, the parent Skeleton games drive the child bones to move together, for example, a character lifts a large arm, and the small arm, as the arm of the child skeleton, will also be lifted.

Slots: slots are containers for displaying pictures in bone animation and are part of bones. Each slot can contain multiple pictures, but only one picture is displayed at a time. Each bone lattice can contain multiple slots. The slots link to the skeleton this animated logical unit and picture this animated display unit, which makes up the skeleton-slot-picture, the basic skeleton structure in the dragonbones skeleton animation.

picture (texture): image is the element that displays the image, in 2D skeleton system, the meaning of picture and texture is not very different, so it can also be called texture.

Texture set: A texture set is a large image that is packaged into a picture to facilitate the integration of resources and load in the game, using a hardware acceleration engine or egret Runtime, the texture set can greatly improve rendering efficiency. So the interface for importing resources provided by default is dragonbones with a texture set.

Animation Tween: The general designer in the skeletal animation, do not need to be in every frame for the role of the action, but only in some key places (keyframes) to play the key action, the key actions are all generated by the program tween Replace, this is the animation tween. Animation tweens can be linear or non-linear. A linear tween means that the components on the tween are transformed at a constant speed (pan, rotate, scale). Nonlinear tweens are represented by various curves, and Bezier curves are used by default in Dragonbones to represent nonlinear tweens.

animation transitions: An animated transition is a transition effect that occurs when you switch from one animation to another one by one animations. The Dragonbones provides a transition effect when animated motion faces are toggled, so that a smooth transition can be generated automatically as long as a transition time is set.

Animation Fusion: Dynamic Surface Fusion provides the ability for a character to play multiple animations simultaneously. This feature is typically used in two situations. The 1th kind of character animation is more complex, may need to do the upper body and lower body animation design, and then can be any combination. The 2nd is the need for a character to be shot at the same time as running, the body back, that is, the simultaneous insertion of running and shot animation. The function of animation fusion is to achieve these two requirements by setting weights for different animations and adding animated masks to different bone paths. It is important to note that Dragonbones only normal mode provides the function of animation fusion, the speed mode is not to provide this function.

forward Dynamics (FK) and Inverse Dynamics (IK): in skeletal animation, generally speaking, the child skeleton's movement is affected by the parent bone, such as the big arm rotation, the small arm will also follow the rotation, which is called positive dynamics, that is, the father affects the child. Of course, the real world also exists in the reverse case, for example, into a punch you, you use a small arm to block, the small arm force movement at the same time will also drive the big arm together to do the force movement, called Reverse dynamics. When controlling the movement of the bone pathway in the dragonbones, the skeleton is normally in accordance with the normal dynamics, that is, the parent bone is adjusted, and the child bone is affected. If you want to adjust the animation by reversing the dynamics, you can choose the appropriate IK tool to implement.

First, after the installation is complete, open the Welcome screen, and select the project.

Then open the project of your choice.

Next, we will explain how to use the tools .
1. System Toolbar
The System toolbar contains several of the most commonly used features, from left to right button functions in order: New project, open project, Save project, Undo, Redo, import, export, preview work share.

· New project: For creating a new project, click the button to open the New Project dialog box.
· Open Project: To open an existing project, click the button to open the System specified file dialog box.
· Save Project: If the current project has changes, the Save Project button will be lit, and the current project will be saved after the button is clicked, and the Save Project button is dimmed when the item is saved.
· Undo: Used to undo the last edit operation.
· Redo: Used to redo the last undo edit operation.
· Import: Used to import a supported project file format, click the button to open the Import dialog box
· Export: Used to export the project. Clicking the button opens the Export dialog box.
· Preview: Preview How the animation works in the browser. If your project contains multiple animated clips, you can toggle them by clicking the left mouse button in the browser.
· Work sharing: Open the Work sharing upload page.

1. Main Scene Toolbar

The main scene toolbar is used for mouse mode switching in scene operations, from left to right: Selection tool, pose tool, hand tool, create bone tool.

· Select tool: When the bone is selected, the mouse clicks on the bone itself, while holding down the left key movement, you can move the bones in the X, Y directions. The mouse click on the red X-axis (or the green y-axis) to pan in the single x-axis (y-axis) direction. Drag the picture itself in the slot, and press and hold the left key to move the bone in any direction x or Y. The mouse click on the red X-axis (or the green y-axis) to pan in the single x-axis (y-axis) direction. Drag the mouse zoom handle to zoom in on the slot. The slot can be rotated when the mouse clicks and holds the other area (slots can be selected and changed state only in Skeleton assembly mode).
· Pose tool: When a bone is selected, the bone is rotated with the mouse drag. When you check two or more bones, the selected bones follow the IK rules and follow the mouse drag.
· Create Bone Tool: Select the Create Bone tool, click the left mouse button in the Home view and drag to create bones. In addition, some common operations are supported in the home view:
Push and pull the mouse wheel to scale the Dragonbones pro scene.
When the mouse is in the selection tool or hand tool, the left button double-click anywhere, scene stool and urine restored to 100%.
Right-click any area to deselect.
· Weight tool: Weights represent the proportion of skin affected by different skeletal deformations, and it is important to properly distribute the weights of each skin vertex.

3. Visible optional Filter panel
Visible optional filter panels are used to turn on and off the visible, optional, and inherited editing switches for bones and slots.

· Visible: When open, bones or slots are visible in the home view; when off, bones or slots are not visible in the home view.
· Optional: When turned on, bones or slots can be selected in the Home view, and when off, bones or slots cannot be selected in the Home view.
· Inheritance: When open, bones or slots inherit edits from the parent bone, and when closed, the bones or slots do not inherit the parent bone's edits.

4. Transform panel
The transform panel is used to display and modify the x, Y coordinates (relative to the parent bone) of the bone or slot, the scale, the angle of rotation, and the dimensions of the picture (shown only for slots and pictures). 

5. Scene Tree Panel
The scene tree panel is used to display and edit the parent-child tree relationship of bones and slots in the main scene.

The top right button is: Smart filter, Bone Creation button, and delete button. In Skeleton assembly mode, double-clicking a bone or slot in the scene tree pops up the rename window. This panel can be displayed under Skeleton assembly and animation, but cannot be edited under animation. Bones and slots can be checked in the scene tree.
The following is an edit of the skeleton's following relationship in the scene tree:
· The inheritance between bones can be changed by dragging and dropping within the scene tree panel.
· The child bones can be dragged to the same sibling or to the parent and above the bones.
· The parent bone cannot be dragged into its sub-bones and below the bones

6. Hierarchy panel
The hierarchy panel is used to display and edit the upper and lower level relationships of slots in the main scene. You can change the hierarchical relationship between slots by dragging and dropping. When a slot is selected, you can also click the up and Down buttons or shortcut [] in the upper-right corner to change the hierarchical relationship, which appears only in Skeleton assembly mode.

7. Resources panel
All pictures used by the project are saved in the assets panel. Dragonbonespro each project's repository corresponds to a folder that actually exists in the system, and the PNG images supported by Dragonbones Pro in the folder are displayed in the assets panel. Add images to the repository by dragging PNG files from other folders in the system to the Dragonbones Pro's resource panel, and the corresponding PNG files will be copied to the corresponding repository folder. You can also click the Import Resource button to specify the resource PNG file to add in the system window that pops up.

The upper-right button is: Import Resource button, open Library folder button, and Modify Path button. This panel can only be displayed in Skeleton assembly mode.

8. Edit Mode toggle button
The Edit mode toggle button in the upper left corner of the scene is used to toggle the skeleton assembly and animation.

9. Animation panel
The animation panel is used to display and edit the animated clip.

The top right button is: New animated clip button, clone Animation clip button, rename and delete animation clip button. This panel can only be displayed under animation. The 3 parameters below the animation panel are:
· Animation time: Not editable, s in units. The actual duration of the animation clip is calculated according to the frame rate and the total number of frames of the animation clip.
· Over time: The default value is 0, editable, in S. Used to set the excessive time between different moving faces in the game.
· Played: The default value is 0, which can be edited. Used to set the number of repetitions of the animation in the game, when set to 0 indicates infinite repetition.

10. Timeline Panel
The timeline panel is used for editing of animated clips, which can only be displayed under animation.

· Playback control Tools
A playback control tool on the timeline panel that controls the playback of an animated clip. Left-to-right: returns to the first frame button, the previous Frame button, the rewind button, the play button, the next Frame button, the last Frame button, the Playback speed control slider, the current frame, the current time, and the frame rate. The control range of the playback speed control slider is 0.1x~10x. Current frame: Editable, enter a specific number of frames, green XXX Put the pointer will jump to the corresponding number of frames. Drag the green pointer or the dynamic circle, and the current frame's value will change accordingly. Current time: Not editable, calculated based on the current frame and frame rate. Frame rate: Editable, default is 24fps. Sets the number of frames per second of the animation.

· Frame Editing Toolbar
Frame editing toolbar, left to right: Delete unnecessary frames, edit multi-frame, onion skin button, move frame right, move left frame, auto Keyframe button, Curve Editor.

Delete Non-essential frames: Automatically troubleshoot unnecessary keyframes in the entire timeline and delete them. Deleting non-essential keyframes can slim the animation file without affecting the animation rendering effect at all.
Onion skin button: switch onion skin function.
Edit Multiple Frames: Multi-Select frames to edit the curve in bulk.
Move the keyframe to the left, move the keyframe to the right: Click the button to move the entire break to the right (left) Keyframe for the selected keyframe. If there is already a keyframe on the left side, you cannot move to the left, and the Move Keyframe button to the left is grayed out, and the right side is the same.
Auto Keyframe button: The button has two states of switch, White is off, red is on. When turned on, changes to bones or slots will automatically add keyframes on the frame where the green xxx pointer is placed and on the corresponding bone or slot layer.
Curve Editor: Curve Editor in this panel, you can implement different tweened effects on the tween application between frames and frames.

· Timeline Toolbar
Timeline toolbar, from left to right: Collapse list, expand List, copy Frame button, cut frame button, paste Frame button, delete Frame button.

Collapse list: Collapses all the layers on the timeline.
Expand list: Expands all the layers on the timeline.
Copy Frame button: When you select a keyframe and click the button, the frame's parameters are copied to the Clipboard.
Cut Frame button: When the Keyframe is selected, click the button and the frame's parameters are clipped to the clipboard.
Paste Frame button: The frame parameter in the Clipboard can be pasted to any number of frames in the timeline, any layer (the skeleton layer and the slot layer frame cannot be pasted with each other, the parameter recorded in the keyframe is the relative change value of the previous keyframe, the relative change value of 0 frames is 0), or it can overwrite the existing keyframe.
Delete Frame button: Deletes the currently selected frame.
Add Keyframe button: This button has 3 status buttons, white indicates no change, no keyframes. XXX indicates changes, no keyframes have been added or updated. Red indicates that no changes have been made to add or update keyframes. In the white or XXX state, click this button to add or update keyframes on the frame of the green XXX drop pointer and the corresponding bone layer or slot layer. Click No effect in the red state. In red or white, if you change the bone or slot, the button changes to the XXX state, indicating that the bone or slot has changed. This button is not available when no bones or slots are selected.
Graph Panel button: Switch graph panel.

· Time Axis Zoom Tool
The Timeline indentation tool controls the scale of the timeline. The left side is fit for the screen button,-and the + button controls the zoom in and zoom out drag sliders also control zooming.

· Onion Peel Tool
When the onion Peel function is turned on, the image of the front and back N frames (the default is 3 frames) is displayed, allowing the animator to better position the characters and make the continuous animation smoother. To enter animation mode, click the Onion Peel button on the Timeline toolbar to open the Onion peel function.

When the onion Peel function is turned on, the animation on the home scene appears in blue (leading frame) and red (subsequent frames), and the animation renders the shadow image effect.

Meanwhile, the time axis of the green XXX put pointer will appear before and after the default 3 frames of the onion skin display area, the left side of the adjustment handle is red, the right side of the adjustment handle is blue.

Drag the blue or red handles to adjust the number of frames shown in blue or red onion skins. The more frames you cover, the more images you'll see in your home meal. The onion skin display area moves as the green XXX pointer moves. During animation playback, the onion skin display area on the green XXX put pointer is hidden. On the main scene, the red and Blue shadows are played with the original animation, the animated action of the Blue Shadow is ahead of the original animation, and the animated action of the Red Shadow is delayed by the original animation. Onion Peel characteristics: the blue or red onion skin display area can not exceed the length of the animation clip itself. Although the animation clip is played by default, when the green XXX pointer is placed on frame No. 0, there is no red onion shadow image displayed in the main scene. When the green plug-in pointer is at the last frame, there is no blue onion shadow display in the main scene.
· Time axis
The key frame inside the bone layer is white, the key frame in the socket layer is XXX, the key frame in the event layer is red, the bone keyframe with the event, jump, and sound is pink. The first layer of the timeline is the row of the dynamic surface, cannot be edited directly, after adding keyframes at any other layer, a diamond-shaped square appears in the animation clipping layer, indicating that there are keyframes at one or more layers below the current frame. White is represented as a bone-layer keyframe, XXX represents a slot-layer keyframe, red is an event-layer keyframe, and pink is a day-key frame that has multiple layers mixed. Select the Diamond box to select all KeyFrames under this frame count. Can be left and right to pan, drag, copy, cut, paste, delete. A red line appears on the timeline ruler as long as there is a keyframe in the corresponding number of frames, and the timeline ruler is always visible with the scroll bar up and down the timeline. The first level of the timeline is the bone layer or event layer, the second level is the slot layer, and the slot layer is indented one layer to the right relative to the bone layer. The hierarchical relationship of parent-child bones is not reflected in the timeline. The event layer has only one layer. The selected layer is highlighted, the bone or slot of the corresponding layer is selected, and the corresponding layer is selected if the bone or slot is selected. KeyFrames can be arbitrarily dragged in the same layer of the timeline.

· Curve Editor
Curve Editor In this panel, you can implement different tweened effects on the tween between frames and frames. For example, you want a character to move the arm in a running action in a fast and slow motion, then you can select the first keyframe in the first two keyframes of the arm swing, and then click on the Curve button on the timeline to open the Curve Editor panel.

A linear tween is used by default between keyframes. In the curve composer is a straight line. You can see a row of buttons at the bottom of the panel, which are some of the easing effects preset in the tool.

Clicking on these buttons can quickly turn the curve into a corresponding effect, from left to right in turn: no-help, linear tween, talk, talk, Fade in Talk (fading represents the first slow and fast, fade-out represents the first fast after slow, fade in the talk represents a fast and slow).

If you are not satisfied with the effects of these presets, you can also freely adjust the curves by dragging the control points (white hollow dots) on the levers at both ends of the curve. Current control points can only be adjusted between 100%~200%, and later releases will release this restriction. A curve entering a negative area represents the animation moving in the opposite direction for a period before it runs forward. A curve of more than 100% means that the animation will run beyond the target bit and then run backwards to the target bit.

It is worth mentioning that the editing effect of the curve, can be reflected in real-time animation of the scene, the designer can play animation while adjusting the curve preview effect. In addition, the adjustment of the curve is to change the animation data immediately, do not need the designer to click the Keyframe button again to confirm the modification. If you are not satisfied with the effect of the modification, you can revert to the previous state by undoing the function.

Iii. New Animation Project
Dragonbonespro offers a quick and easy project.
1. New Project
Open the new project on the Welcome Home page, a dialog box will pop up, select Create Keel animation.

Clicking Create keel animation will appear as follows: Skeleton animation template, frame-by-frames animation template, motion tween template, custom.

Click the corresponding template in the Create column will select the relative template, they are only different parameters, the function is the same, you can also create the project, in the resource right click, a new component appears.

Click on the new symbol.

2. Image Add Delete
Drag a picture from the repository to the main window:
· If no layer is selected or the layer currently has a non-empty keyframe in the current frame, a picture layer named after the picture name is automatically added to the timeline.
· If the layer is selected and the current frame has no keyframes, the current frame adds keyframes and the picture is added to the keyframe.
· If the layer is selected, the current frame is an empty keyframe, and the picture is added to an empty keyframe, and the empty keyframe becomes a non-empty key frame.

3. Layer Order
You can drag and drop in the timeline to change the stacking order of the layers.

Iv. import and export of projects
Import Project Dragonbones Pro currently supports importing multiple formats of Dragonbones data files (including JSON and XML) and packet files (including PNG and zip), plus Dragonbones Pro supports the format of imported data by importing plugins. The official self-reported spine 2.x import plugin and cocos1.x Import plugin can help Dragonbones Pro import spine and Cocos data files. The import method is simple, just drag and drop the data file or package file you want to import into the software. If you are importing a data file.

The software will intelligently find the texture set file on the date the data file is located, if not found or found the wrong, remember to manually modify the path, otherwise you will not find the picture. If you are importing a packet file, there is no case for the texture set to be found. In addition, the software will automatically generate the project name, need to modify the words can be modified manually.
Dragonbonespro can be a JSON or XML format, and the picture can be either a texture set or a picture file.

The output path defaults to "My Documents + project name", which the user can specify manually, and if the zip package is exported, the package file appears under the specified output path. If you export the project folder, a subdirectory with the same project name is created under the specified output path, with data files and pictures under it. The output scale defaults to 1. Users can enter numeric values to control the scaling of exported items. "Fill Color" check box, the default is not checked (transparent background) status, the user can click on the right side of the color box to open the Color Selection window, select the color to be used as the background color "package zip" check box, the default is not checked status, that is, export the project folder, check the export Zip package as a project file , the PSD file is converted to a Dragonbones data file, and a script file psexportdb,jsx is provided in the installation directory of the Dragonbones Pro. Use to export the design in Photoshop to the skin dragonbones format data + picture. Note: In the MAC system, you need to find Dragonbones Pro.app in the application and then right-click to select Show Package contents. The script file is recorded in/contents/resources/, and is exported in the following way: Open the design in Photshop, then select the "file-by-script" command in the menu, Then locate the Psexportdbjsx file in the open System locator case, select Open, and the following dialog box appears:
Export PNGs Exporting pictures
Exportison Exporting JSON files
Ignore Hidden layers Ignore hidden layers
Image Scale Overall scaling

Set up according to the requirements, click the OK button Photoshop will start the export, after the export is completed, in the plan on the day of the recording will generate a DRGONBMES{PSD file name} directory, if you export also tick pngs and JSON, It will have a JSON file with the same name as the PSD file and a textuer directory. Texture is all the PNG image files. After that, simply drag the exported data file into the Dragonbones Pro to set up the picture day record to complete the import. After the import, the relative position size of the picture and the hierarchical relationship between them are exactly the same as in Photoshop.
How about this article you learned the basic use of DRAGONBONESPRO tools and common terminology in skeletal animation? Have any technical problems or think this article is helpful to you, please leave a message with us to communicate and interact.

2D Bone Animation tool Dragonbones Tutorial