DragonBones to Defold Engine Workflow

Spine is a great tool for sure. But if you are a poor game dev like me, $299 price tag is too much 🙂 There is a free alternative called DragonBones. DragonBones is not the open source project(gladly) and developed with good-old-gold Adobe Air using Flex. Flex is a quite old tech and DragonBones has problems especially about the Spine exporter.

Defold has build-in Spine support  with limitations. So we can export anims as Spine json from DragonBones and use them in Defold right?
Nope, it is not that easy. Mostly, DragonBones’s Spine exporter just cause problems. For example; latest version of DragonBones(5.6.1) doesn’t export the size information for Spine.

So how can we fix this? Before we start, you need DragonBones Tools.  Tools is a command line json converter.  You can convert Spine json to DragonBones json or vice versa. But most importantly it is written with TypeScript, open source and updated more frequently than DragonBones itself. If you have a problem with Tools you can simply fix it by yourself. But the Tools is not very well documented and converting files little tricky.

Let’s start…

What You Need?

Go ahead and install the DragonBones.
Before installing the Tools you have to install Node.js.
Then you can install the Tools using Npm from your terminal.

npm install dragonbones-tools --global

Your current DragonBones project structure should look like this. Please note the json name without the “_tex” part. In this case it is “Baba”

If you don’t have the xxx_tex.json file in the library folder then generate it by exporting as “DragonBones Binary” into the library folder.

Exporting

First, you need to export you animations as “Dragonbones JSON”.
Most  important part is the “Output Path”. It should be you project’s “library” folder and “Project Name” must be the same with your json file without the “_tex” part. In this case it is  “Baba”

When exporting completed you should have  xxx_ske.json file and xxx_texture folder in the library folder.  They must have the same names because the Tools converter is using xxx_tex.json file for sizes.

Now it is time to convert ‘Dragonbones JSON’ file to ‘Spine JSON’ file. Open up your terminal and go to you library folder.

cd your_animation_path/library

And run the converter

db2 -t spine

Actually that is it. You can just copy-paste the converted xxx_spine.json and texture files to Defold.

If you don’t know how to use those files check out the Defold manual:

I build a simple Spine test project with Defold using converted json files.
You can grab it from GitHub.

DragonBones animations by @aekashics from Librarium Dragonbones Megapack
Check out the web site for more free resources like this: www.akashics.moe

Bonus

Your converted json is going to play nicely with Defold. But if you want to test it with Spine or Spine Viewer it is going to fail. There is a missing value in the json file for every “deform” key.  You must add the “default” value in the first field of “deform.  You must replace every empty sub key with “default”.

"deform": {
  "": {} <-- Wrong
  }

"deform": {
  "default": {} <-- Correct
  }

Also it can be fixed in Tools. Problem is on that line. Just change it is value to “default”, compile and install.

skin: string = "default";