Phaser + DragonBones

[wayfinder]

Putting this here as well: with this updateTransform, we support skew as well:

 

Phaser.DragonBonesSprite.prototype.updateTransform = function(matrix, transform){     var parentTransform = this.parent.worldTransform;    var worldTransform = this.worldTransform;     var px = this.pivot.x;    var py = this.pivot.y;     var a00 = this.scale.x * Math.cos(this.rotation + this.skewY),        a01 = this.scale.y * Math.sin(-this.rotation - this.skewX),        a10 = this.scale.x * Math.sin(this.rotation + this.skewY),        a11 = this.scale.y * Math.cos(this.rotation + this.skewX),        a02 = this.position.x - a00 * px - py * a01,        a12 = this.position.y - a11 * py - px * a10,        b00 = parentTransform.a, b01 = parentTransform.c,        b10 = parentTransform.b, b11 = parentTransform.d;     worldTransform.a = b00 * a00 + b01 * a10;    worldTransform.c = b00 * a01 + b01 * a11;    worldTransform.tx = b00 * a02 + b01 * a12 + parentTransform.tx;     worldTransform.b = b10 * a00 + b11 * a10;    worldTransform.d = b10 * a01 + b11 * a11;    worldTransform.ty = b10 * a02 + b11 * a12 + parentTransform.ty;     this.worldAlpha = this.alpha * this.parent.worldAlpha;    };

[Alpey]

Hi! It's a great work you did, thank you. But I noticed with newest DragonBones v3.0 version it doesn't work. For all sprites it displays only one image and throws a warning "Cannot set frameName: *.png" for all textures. Please pay attention for this..

[Stephen.POWWOW]

Hi guys, just posting to get some advice.

 

We've used DragonBones to make a game in Starling using AS3 called ShipAntics http://www.shipantics.com/ It was perfect for the job and we loved using it.

 

We are now starting a HTML5 game and are thinking of using DragonBones again. It will be a cooking game, something like Toca Kitchen 

Do you guys think this would be a good idea or are there better options out there now? My worry is that the JS version for DragonBones may be buggy or have poor performance.

 

We're looking at using Spine alternatively but there doesn't seem to be a good run time for it yet as far as I can tell.

 

The game will be made for Web on desktop and mobile, so performance and files size will be really important.

 

Really appreciate any advice! 

[cloakedninjas]

So I just gave this a try today - worked straight away. This is great.

 

What's not so great is that when I export the same sample project of that walking Dragon from Dragonbones - the JSON format isn't something I can import into Phaser

Phaser.AnimationParser.JSONDataHash: Invalid Texture Atlas JSON given, missing 'frames' object

DragonBones is exporting this type of structure:

{  "name": "Dragon",  "imagePath": "texture.png",  "SubTexture": [    {      "frameY": 0,      "y": 398,      "frameWidth": 180,      "frameX": 0,      "frameHeight": 232,      "height": 231,      "width": 180,      "name": "parts\/legR",      "x": 2    },    {      "x": 298,      "y": 458,      "width": 28,      "name": "parts\/eyeL",      "height": 46    },

Did you convert the output from Dragonbones? Or is there an export plugin I need to download?

[wayfinder]

I used Leshy Sprite Tool to generate a working atlas. TexturePacker will also work.

[cloakedninjas]

I ended up writing a Node converter on Friday afternoon.

 

However the nail in the coffin is that the latest version of DragonBones generates a skeleton which is not valid for the files provided by Alex_h. I spent hours tracing through the code and deep inside the dragonbones.js file it seems the bones are missing parents and the output Phaser.Group is empty of children.

 

Annoyingly - it seems that the devs have given up on the JS library https://github.com/DragonBones/DragonBonesJS/issues/18

[alex_h]

@cloakedninjas yeah, the code I posted only works with what is now a legacy version of the DragonBonesDesignPanel, I think v2.4 or something like that.

[webcaetano]

[EDIT - I have tidied and commented this now, and switched to use the dragon animation from the dragonBones demo package. I've also uploaded a zip of the whole working example to here http://www.alexh.org/phaser_bones/phaser_bones.zip]

 

I started having my first go at messing around with Phaser this morning so I thought a good place to begin would be getting dragon bones working with it. I’ve just lifted the texture atlas straight from a game I'm working on and stuck the player characters running animation loop from my game in front of the phaser hello world for now. Here's the result:

 

http://www.alexh.org/phaser_bones/

 

The most relevant code is in this file:

 

http://www.alexh.org/phaser_bones/phaser_dragonbones.js

 

It handles applying the skeleton animation to Phaser sprites.

 

Feel free to take the code, but please don't nick the images from my png file!

I'll try to tidy it up, then perhaps make a phaser example out of it.

 

 

We should make an bower_component for that one :

http://www.alexh.org/phaser_bones/phaser_dragonbones.js

 

[AGulev]

hello, I made animation using legacy panel,
Whet I try to use this animation in phaser all my sprite x and are NaN

I don't understand why it's doesn't work( Maybe somedy know what it can be?