alex_h

Phaser + DragonBones

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :/

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.