# What is the best free Spine Editor for Phaser?

**URL:** <https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381>\
**Category:** Phaser 3\
**Created:** [November 27, 2019, 9:58am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381 "2019-11-27T09:58:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![NickChowHK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nickchowhk/32/2377_2.png) [@NickChowHK](https://phaser.discourse.group/u/NickChowHK)\
**Post date:** [November 27, 2019, 9:58am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/1 "2019-11-27T09:58:16Z")

</div>

Glad to see Phaser support the Spine Feature and provide the Spine plugin by [Esoteric Software]. However, it required a license to use. And I find a free one below:

> **[DragonBones/DragonBonesJS](https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser)**
>
> DragonBones TypeScript / JavaScript Runtime. Contribute to DragonBones/DragonBonesJS development by creating an account on GitHub.

Unfortunately, the above editor does not support the latest Mac OS, I would like to ask if there is another free alternative software?

Thanks

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [November 27, 2019, 10:42am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/2 "2019-11-27T10:42:29Z")

</div>

The Spine plugin uses the official runtimes, which require your to have a license. Even if you export a Spine-compatible file from another editor, you cannot use Phaser’s Spine plugin.

That said, I’m not too familiar with alternative animation systems. If you want to use them in Phaser without relying on the Spine runtimes, however, you’d need to build your own plugin unless one already exists.

---

<div class="post-metadata">

**Author:** ![NickChowHK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nickchowhk/32/2377_2.png) [@NickChowHK](https://phaser.discourse.group/u/NickChowHK)\
**Post date:** [November 27, 2019, 10:59am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/3 "2019-11-27T10:59:53Z")

</div>

> **[DragonBones/DragonBonesJS](https://github.com/DragonBones/DragonBonesJS)**
>
> DragonBones TypeScript / JavaScript Runtime. Contribute to DragonBones/DragonBonesJS development by creating an account on GitHub.

  
[DragonBones TypeScript / JavaScript Runtime]

According to the description of the DragonBonesJS, it seems this is a standalone plugin(and runtimes) for phaser instead of the Phaser Build-in Spine Plugin?

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [November 27, 2019, 7:05pm UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/4 "2019-11-27T19:05:28Z")

</div>

Looks like it does ship with a Phaser plugin, yeah. You should be able to just load it and use DragonBones objects.

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [March 12, 2020, 11:07am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/5 "2020-03-12T11:07:06Z")

</div>

I didn’t find any examples of usage. How to load and place a DragonBones object in phaser 3?

---

<div class="post-metadata">

**Author:** ![NickChowHK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nickchowhk/32/2377_2.png) [@NickChowHK](https://phaser.discourse.group/u/NickChowHK)\
**Post date:** [March 18, 2020, 3:52am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/6 "2020-03-18T03:52:36Z")

</div>

@Coatl  
[http://dragonbones.com/en/index.html](http://dragonbones.com/en/index.html)

1. Install dragonbones, Edit animation and Export JSON File

> **[DragonBones/DragonBonesJS](https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser/Demos)**
>
> DragonBones TypeScript / JavaScript Runtime. Contribute to DragonBones/DragonBonesJS development by creating an account on GitHub.

  
2. Follow the above demo

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [March 18, 2020, 1:49pm UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/7 "2020-03-18T13:49:44Z")

</div>

Oh, there is actually a usage… thanks! Anyway, I found [this](https://github.com/RaheelYawar/phaser3-webpack-dragonbones), which helped me even better. (I use webpack.) Now everything works fine on me!

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [May 18, 2020, 8:51am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/8 "2020-05-18T08:51:54Z")

</div>

I have a question about DragonBones themselves, if you are not against 🙂  
It’s a great tool, but something seems to be missing. I’d like to use bone nesting the same way as was in Flash nested movieclips. Namely: when I have a bone with 10 frames and the whole animation with 20 frames, the bone should loop twice during the whole animation, and not once and then stop. Is there any way to do it?

---

<div class="post-metadata">

**Author:** ![NickChowHK](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nickchowhk/32/2377_2.png) [@NickChowHK](https://phaser.discourse.group/u/NickChowHK)\
**Post date:** [May 18, 2020, 9:34am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/9 "2020-05-18T09:34:00Z")

</div>

Actually, I am not the expert of DragonBones and Flash. Have you tried to edit the frame in Timeline Panel? It seems it is reasonable to show it once rather than twice. Is it a bad idea to copy 10 more frames in the timeline on your case?

---

<div class="post-metadata">

**Author:** ![Coatl](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/coatl/32/2176_2.png) [@Coatl](https://phaser.discourse.group/u/Coatl)\
**Post date:** [May 18, 2020, 10:03am UTC](https://phaser.discourse.group/t/what-is-the-best-free-spine-editor-for-phaser/4381/10 "2020-05-18T10:03:17Z")

</div>

Copying 10 more frames is not a good idea for my case. I need an animation that loops independently of its parent node.

However, I looked somewhat deeper and found a solution! There are actually movieClips in Dragon Bones. You can create them in the library and then add them to the armature. Works great, even when exported to Phaser!
