Phaser + DragonBones

[alex_h]

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

[rich]

Nice

[presidenten]

Nice work!

[alex_h]

Thanks! I've pulled the phaser examples repo but so far I haven't found a way to add this as an example without including the entire dragonbones.js (about 3700 lines) in the code that gets written to screen. Is there an easy way to add a script as a hidden dependency?

[EDIT - ok not to worry, I can just load the scripts dynamically if I include this as part of my example - I've sent a pull request now.

[jdavis]

I have been looking at the idea of atlases and dragonbones for a while and want to use it in my phaser project, but the instructions are not clear for me in the example's section, plus they do not work correctly. I'm a programmer so I'm not as savvy with implementing code with imported animations and all right programs and settings to .get it all to work together. What I need is someone to provide the steps from start to finish; about creating the assets correctly, import the atlas with the .json file so that I can pull it into phaser and how to manipulate it, with whichever programs are best to use, preferably the free ones

 

A great example of what I'm hoping for is like the "how to create a tilemap" section in the official Phaser book that came out. It gave me the basic image, had me download Tiled, gave me the dimensions to chop it, how to export, info about the basics settings, and the code to interact with it. It was very well done. If anyone could provide something similar for this issue, it would be extremely helpful.

 

Thanks in advance.

[wayfinder]

You will not be able to create dragonBones assets without Adobe Flash.

 

It's not straightforward at the moment, but it works - see this thread for more info: http://www.html5gamedevs.com/topic/7546-pixi-dragonbones/

 

Hard to give you a play-by-play; my pipeline works but it's quite complicated and involves recreating the atlas in Leshy Spritesheet Tool, and hand-editing the dragonBones atlas. If you think it helps to see it in action, take a look at the astronaut in my work-in-progress here: https://dl.dropboxusercontent.com/u/14053711/skedgy/index.html (controls with a gamepad or cursor keys)

[m2jalali]

hi alex

when i use phaser 2.0.7 show this error

Phaser v2.0.7 | Pixi.js v1.6.1 | WebGL | WebAudio | http://phaser.io

phaser.min.js (line 8)

TypeError: this.texture.frame is undefined

how can i resolve it?

[JUL]

Check the spelling of your texture file m2jalali, it might be just that.

[alex_h]

Hi m2jalali, you are right the example was broken with Phaser 2.07. I have uploaded a fixed version with Phaser updated to 2.0.7 that also includes one or two other improvements in the code.

 

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

 

The updated example is also available as a zip here:

 

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

 

cheers,

Alex

[m2jalali]

thanks a lot that's OK

[TheTrope]

Is this up to date with Phaser 2.2.0 ?

Can i use your code in my project until the release dragonBones support on Phaser?

Amazing work anyway !

[rich]

I'm afraid not, this hasn't worked for a while now. I ought to remove it from the examples repo until we get some time to investigate it.

[TheTrope]

Thanks to your fast answer !

Uh, sad :'(

So at this time, there is no way to do skeletal animations with Phaser? :/

If it's the case i'll use sprite sheets until the release. I hope it will come soon, but it's an important work.

 

Hum they are talking about it in "Pixi + dragonBones", it's certainly the first step before integrating it with Phaser no? I'm following the topic too btw.

[rich]

Yeah.. Pixi has support for Spine built in, but I'm not sure it has been worked on for ages, so I don't know how up to date it is.

[TheTrope]

So, i just checked it, the examples of spine (all but the dragon example) are working (v2.1.0). But i'm not sure if it's easy to use them in phaser :/

[alex_h]

I just checked the pixi adapter for dragonbones and it is working fine with Pixi v2.1 so it should be pretty easy to get the phaser version working again too. It's most likely an issue with the texture atlas data handling. I'll see if I can get an up to date example up and running then post a link back here.

[alex_h]

Ok I downloaded Phaser 2.2.0 -RC5 and dropped it into the example I linked to above:

 

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

 

http://www.alexh.org...haser_bones.zip

 

It worked fine, so I have updated the phaser version in both the zip and the demo on the above url.

I guess its just the demo in the phaser examples that needs correcting somehow.

[wayfinder]

It should perhaps be mentioned that this is the version without support for skewing and tinting - I'm still not sure what exactly in PIXI2.0 broke skew :/

[xenomorph856]

I'm a bit new to Phaser, and have no experience with Dragon Bones. My trouble is getting the 'dragon bones' group to physically move with Phasers 'body' properties. I've been successful in applying tweening to it, but that's not an ideal method of movement. Is this possible to achieve with the current adapter, or is it incompatible with Phasers physics?

 

Thanks in advance :-)

[alex_h]

Hi xenomorph856, the root display item for the armature is just a normal Phaser Group so it should absolutely be possible to have it move via physics the same as other display content.

[xenomorph856]

Hi Alex, thanks for the reply. The group will take the 'enableBody' property, but the 'body' object itself is null. Using the setAll method, I get the error 'cannot use 'in' operator to search for 'velocity' in null'. As far as my code goes, it's the same as your example file (an exact copy actually ;-)) with the exception of three lines; Start physics system (preload), enable body on bonesBase group (create), and apply velocity using setAll method (update). I've also enclosed it all into a single state object.

[TheTrope]

Wich version of DragonBones are you using?

Because mine generate a different json with differents values in the atlas json :/

 

Thanks !

[alex_h]

My example is set up to run off a normal TexturePacker Json hash or array format atlas. This is probably where you are seeing a discrepancy between the JSON data formats. The idea is that this allows you to include the dragonbones body part pngs in your main atlas, rather than being forced to load a separate atlas image for each dragonbones animation which would increase your draw calls. The skeleton json data is used just as it is exported from DragonBones though.

[alex_h]

Hi Xenomorph, I just tried to enable physics as per your description on the bonesBase and it seems you are right, there is something odd about the group there. I found I first had to explicitly define a couple of variables:

//these need definingbonesBase.body = null;bonesBase.anchor = new Phaser.Point();//now this can be calledgame.physics.p2.enableBody(bonesBase, false);

Then you should be good to go.

[TheTrope]

Thank you!

Just fixed it using texturePacker. I think it doesn't support trim and rotation options.

It works now !

 

Is it important to define manualy the armatureName and skeletonId, instead of picking them directly into the skeleton json?

 

 

Another question out of the subject: What do you think is the best way to manage stuff on characters?

I though using skins, but with this way, i have to redefine all the animations each time, because of the attachements changes. (For example, frame 1: the sword is view by the side, frame 2, the sword is view by the face).

And maybe it will be strange to have only one dragonBones model which contain all the stuffs (with x images per stuff) in the game :/