Jump to content

Phaser + DragonBones


alex_h
 Share

Recommended Posts

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;    };
Link to comment
Share on other sites

  • 4 months later...

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..

Link to comment
Share on other sites

  • 2 months later...

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!  :)

Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...

[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

 

Link to comment
Share on other sites

  • 2 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...