DragonBones Pro 5.6 is released!

Happy New Year!

I know you are look forward of DragonBones Pro 5.6. Now, it is released in the new year.
Downlaod DragonBones Pro 5.6
DragonBones Pro 5.6: New and enhanced features!
This video is made by Poedil 88. You can subscribe his Youtube channel. He did great tutorials of DragonBones. Thanks~ Poedil 88.
Let me introduce the new features of 5.6 one by one.

Import PSD directly

Yes! You can drag and drop the PSD file into DB to import it. No need to install Photoshop anymore.

The PSD file will be automaticaly splited into PNG files by layers. And it will be shown in stage with the same draw order and position as it is in Photoshop. And the import speed is faster than import with Photopshop plugin.

Notice that, it is better not to use blending options (such as Satin or inner glow) or Mask layers. If you want to use them, rasterize layer or flatten image before you saving the PSD files. Or there will be errors when you import the PSD file.

IK timeline

In the past, the IK bend and weight cannot be changed during animation.

Now, with 5.6, we add IK timeline. With it, you can add keyframe for IK bend and weight. So you can adjust IK bend or weight during animaiton.

Rulers and Guides

Same as Photoshop, you can show rulers and add guides in the stage.

In preferences window, you can set the show/hide rulers, set the color the guides, show/hide the guides (Ctrl + ;), guides movable (Ctrl + Alt+;).

New preferences window

Since more settings are added, we re-design the preferences window. Now, it is more clear to find settings.

Texture preview in export window

If you used DB 4.5, you may remember there is texture preview area in export window, but it is simple and ugly.

In DB 5.0, we refine the exprot window and remove the texture preview area. But some guys want it back.

So, we bring it back in 5.6 and enhance it. Now you can preview texture in export window and you can zoom in/out to view the detail of texutre. If you do not want to see it, you can uncheck the preview option to turn it off. Then it will not be shown in next time you launch the export window.

“Export to”

This is a new funciton. With it, you can set the export destination. There are 3 options:

  • Same folder as the project
    The files will be export to the folder same as the project file. It just like the default settings of previous DB.

  • Specific folder
    You can specify any folder as export desination.

  • Choose folder later
    After clicking “Finish” button, it will pops up the specify desination window, then you can choose folder to export.

The “Export to” options will be saved after closing the export window. Next time you launch the export window, you will see the same settings.

For example, project A, you set “Specific folder” and specify a folder C. Then you open project B, export it, you will find that the “export to” option still set as “Specific folder” and the destination folder is still folder C. So, if all your files should be export to the same folder, it is more easy to do it. (If the project name are same, the export file will overwrite the exists files.)

GIF with transparent background

Everyone wants GIF with transparent background, is it right? Now, you have it.

And there is a new option called “Quality lost”. The range between 1 to 20. 1 means best quality and longest exporting time. 20 means worst quality and shortest exporting time. You can blance it.

And now, when you export GIF, the progress bar is more clear and you can cancel it during exporting.

Replace image

We refine the replace image workflow and UI, you can replace image with the image in the library.

Paste special

In 5.6, when you copy and paste a bone, all the child bones, slots and the keyframe in timeline of animation will be pasted in the same time.

And if you select “Paste special” in the context menu, you can set the contents of paste special.

Copy and paste cross project or armature

It means that you can copy a bone from prject A and paste it to project B, with all child bones, slots and the animations!

Notice that, if you want the animations also be pasted, you need to make sure there is a same name animaiton in both project.

For example, there is an animation named “Run” in project A. Then you need to make sure there is also an animation named “Run” in project B. Then you copy and paste a leg from A to B, the keyframe in “Run” animation of this leg will be also be copied and pasted from A to B.

It is same with armatures.

Customize color of bone

You can customize different color of each bone. For example, you can set the bones of arms to blue and set the bones of leg to red. It make you more easy to find them during rigging.

Context menu refine

The context menu is refined and add hotkey lables in it. And add 4 new options:

  • Hide Related
    Hide the selected bone and all the child bones, slots.

  • Lock Related
    Lock the seleced bone and all the child bones, slots.

  • Copy Slot property
    Copy the selected slot property, inlcude color, Alpha, Blendmode and display.

  • Paste Slot property
    Paste the slot property.

Play the child armature in editor

As you know, before 5.6, the embed child armature cannot be played in editor when you playing the main armature. You need to preview it in browser.

Now, with 5.6, you can see the embed child armature be playing in editor when you playing the main armature.

But notice that, if the embed child armature more than one level, the armature more than one level still cannot be played. You still need to preview it in browser.

And if the total frames of main armature and child armature are differnt. The animaiton of child armature maybe incomplete when playing in editor. For example, if there are 10 frames in main and 4 frams in child, then the child will be played 2 and a half loops. I think you can understand this. If you using the project in game, it is not a problem, the animation will be played normal in game. (But if you export GIF, you need to fix it by addjust the timeline, such as repeat the timeline of main to make it equle to 20 frames.)

Publish HTML and embed into WIX.com

Export as HTML, and set the type to “Publish”, then it will generate a HTML file.

You can embed the HTML code into your web page, the DB animation will be show on the page.

If you have a WIX.com account. You can copy all the code in the exported HTML file, and add a HTML code element, paste the code into it. The DB animation will be shown on the page.

Here is a demo page that made with Wix

Online preview

The online preview address is:

With it, drag and drop all the exported date files (xxx_ske.json, xxx_tex.json, xxx_tex.png) into the web page. You can preview the DB animations.

It support following date verison:
  • DragonBones JSON 4.0, 4.5, 5.0, 5.5
  • DragonBones Binary

New Hotkeys

  • Jump keyframe in timeline : Y and H
  • Transform toolbar, switch input box : Tab
  • Show/Hide Guides : Ctrl + ;
  • Turn on/off guides moveable : Ctrl + Alt + ;
  • Trun on/off timeline filter : Ctrl +D
  • Rename : F2
  • Copy Transform : Ctrl + Shift + C
  • Paste Transform : Ctrl + Shift + V


  • Mesh vertexs with weight are jiggling during playing in editor issue.
  • Distribut to Frames does not work issue.
  • Preview in brower, the default size is too large issue
  • Remove tex when exporting spine data files.
  • The exported spine data files can not be used in GM2 issue.
  • Sometime, garbled draw order issue.
  • When using multiple libraries, save as does not copy all libraries issue.
  • Halt a while when switching to project with many images issue.

DragonBones 5.5 is relesaed!

You may notice that there is no 5.4. We just skipped the 5.4 version number since we do not like it. It’s a joke 🙂 . The real reason is that this is a big version. Not only add more function in the editor, also update the Dragonbones data format version to 5.5.


Download DragonBones Pro 5.5
Here is a introduction video of new feature of 5.3 and 5.5 made by Poedil 88. You can subscribe his Youtube channel. He will update the tutorial video about DragonBones from time to time.Thank you, Poedil 88.
DB Pro 5.5 what’s new Starts at 11:30

~ What’s New ~

– Split the timeline

This is a big change. The timeline of bone splits into translate, rotate and scale. The timeline of slot splits into color and display index. After splitting, you can made animations more flexible. You can add key frame to the specify property, and apply curve to the specify tween.

For example, a bone translate from A point to B point and rotating one circle during moving. Now you can apply fade in and out curve to the rotate only, and keep the translate still in line curve.

After splitting the timeline, the obvious change is the flag button. The flag button is moved from timeline panel to several place, on transform toolbar and property panel of slot. Each property has its own flag button.

Layout of timeline panel is also updated. The top area is enlarged, and  divides into draggable area and box selectable area. In draggable area, you can drag to control the green play pointer. In box selectable area, you can box select the lead keys.

And we show the key offset value on timeline when dragging key. It works for  both single key and multiple keys.

And just notice, we move the onion button to the left area.

– X,Y lock scaling

When locking the scale,  adjust x or y scale value, another one will changed accordingly.

– Section loop playback

Set the”S” – Start frame and the “E” – End frame, with the repeat animation option enabled, the animation will be loop playing in the specify section.

“C” means current, with it is enabled, it will automatically scroll timeline during playback.

– Timeline filter lock

With timeline filter enabled, only the selected bone can be shown in timeline. Then enable lock button to lock the filter, the timeline will always show the selected bone when the lock is triggered. And it will prevent timeline items from changing to selected bones. Click the “refresh” button, it will update timeline items to selected bones. Click the “Select” button, it will automatically select the bones that shown in timeline.

With the timeline filter lock, you can compare and edit several specify bones’ timeline.

For example, if you want to edit timeline of bone B according to timeline of bone A. If the timeline filter is disable, bone A and B are faraway from each other. So you need to enable timeline filter, then select both bone A and B. Then enable the filter lock, the timeline of bone A and B will be locked and continue showing. After that, you can select bone B only to edit it’s timeline according to timeline of bone A easily.

– Auto generate mesh outline

Auto generate mesh outline according to the edge of image. You can set the density from 1 to 5, it effects the amount of the vertices on mesh outline. This is a new function, if you have any suggestions on it , please comments blow.

– Add more hotkeys

  • Set parent: P
  • Navigate to the parent of current bone: B
  • Navigate to the first child of current bone: N
  • Navigate to the next brother of current bone: M
  • Add / remove tween of the selected key: J
  • Holding the middle button of mouse and push-pull it, the scene will zoom in and out.  Since some users said that they do not have wheel of mouse (Using graphics tablet)

– Adjust order of bones in the same level

Holding Ctrl key, then drag the bone in scene tree, you can adjust the order of bones in the same level.

– Find in animation or library panel

Now, you can find in animation or library panel. If you have many animations or resource, this will be helpful.

– Data format upgrade to 5.5

Dragonbones data format upgrade to 5.5. 

What’s New in DragonBones Pro 5.3

DragonBones 5.2 provides a amount of new features and user experience upgrade compare with version 5.1:

  1. Add frames symbol type. Convenient to produce frames animation.
  2. Support export DragonBones binary data format. Greatly improve H5 runtime performance.
  3. Add canvas property for symbol to enable to set symbol’s border and background color.
  4. Cloning Symbol.
  5. Press Ctrl + # to group multi-select grid points, and then press # to quickly select them.
  6. Integrate the functionality of the published web page into the export panel. (Export HTML, select “publish” type)
  7. Reduce the frequency of online detection. You can save project in offline status.
  8. Optimize Photoshop import plug-in, resolve the problem that sometimes images imported from Photoshop is too large to show in DragonBones.
  9. Right-click on timeline blank space to create tween between two frames
  10. Click export path in the successful export pop-up prompt window will automatically shut the window down.

Below describes the first four new features in detail:

  • Add frames symbol type. Convenient to produce frames animation

DraonBones is good at making skeletal animations but not good at making fames animation. Based on a lot of real user requirements, we decided to provide a new frames symbol to make frames animation.

You can easily produce frames animation with this symbol. Just drag images into stage will auto generate frames sequence. You can quickly sort the images, adjust position by keyboard to make alignment, , horizontal and vertical flip and apply to all frames. There are also onion skin features.

If you want to make a pixel style frames animation, it is recommended to close the Image Smooth Display in Preferences.

  • Support export DragonBones binary data format. Greatly improve H5 runtime performance.

The advantage of Dragonbones Binary is as same as Egret Fast format. Compare with JSON format, it can reduce 70% memory cost, and reduce more loading time. So what’s the different between Dragonbones Binary and Egret Fast format? Here is the point, there is no animation effect lost. As you know, Egret Fast does not support Mesh, Weight, and animation blending. Dragonbones Binary support them all! So it can replace JSON totally. And performance is better than Egret Fast.

  • Add canvas

With canvas, you can set the size and background color of the exported images. And you can publish a symbol with canvas as HTML web page.

Check the “Canvas” option in property panel, then you can set canvas size, position and color. If the color option is unchecked, the background will be transparent. Click the “Fit min image area” will calculate and generate the minimum canvas size according to all the animations (Make sure all the animations will be shown in canvas).

Stage will be removed in next release since it is same as canvas.

  • Duplicate symbol 

Now, you can clone a symbol by duplicating it in library directly.


What’s New in DragonBones Pro 5.2

DragonBones 5.2 provides a small amount of new features and a large number of user experience upgrade compare with version 5.1:
1. Optimize the grid editing, weight adjustment related user experience, support edit mesh with mesh deformed.
2. Copy and paste bones, slot, images across project and symbols.
3. Enhance the preview feature. It can switch components and animation
4. Export panel optimization, add export specified frame and export web.
5. Optimize the login process, complete registration and login within the tool. No need to read Chinese any more.
6. Press H to drag the stage. Select the mesh and press D to edit the mesh.

This new and enhanced features of DB5.2 video is made by Poedil 88 . Thank you Poedil 88.

Following is the details:

  • Optimize the grid editing, weight adjustment related user experience, support edit mesh with mesh deformed.

Fully optimize the mesh editing, weight adjustment related user experience.

Move the layout of the mesh editing area to stage. Add feature to edit mesh in deform mode.

Improve weight property panel’s user experience:

Mesh and pictures are no longer a conversion relationship, the mesh becomes an optional attribute of the picture, but it is turned off at any time.

The skin weight of the skeleton list shows a more reasonable, did not select the mesh point, and no longer show the weight ratio.

  • Copy and paste bones, slot, images across project and symbols.

Bones, slots, and pictures can now be copied and pasted across project and symbols as following:

  1. Right click on a bone or image, click copy in context menu.
  2. Right click another bone as parent (the parent bone can be located in other project or symbols), click paste in context menu.

  • Enhance the preview feature. It can switch components and animation

Totally improve the preview interface, switch armatures and animations, adjust animation speed, change background color, on/off grid, watch on mobile and so on.

In addition, this preview page can be local saved by exporting pages, send to others, and share the animations.


  • Export panel optimization, add export specified frame and export web.

The export panel layout has been improved. Add the feature to export specified picture in specified animation and web page.

You can export a specified frame in a specified animation

Add export webpage feature, animation directly exported to HTML file. Compared to GIF, it can display the delicate movements of skeletal animation better, smaller size, no loss of color.