cinkonaap / pixi-dragonbones

pixi-dragonbones

Pixi.js plugin that enables Dragonbones support.

Example

Prebuilt Files

After loading the distributed files, the dragonbones is injected into PIXI namespace.

First of all, load your assets using skeletonParser:

PIXI.loader
    .use(PIXI.dragonbones.loaders.skeletonParser())
    .add([
        {name: 'dragon', url: 'assets/dragon_skeleton.json'}
    ])
    .load((function (loader, res) {}));

Then, initialize your Skeleton using loaded skeleton and atlas data:

this._skeleton = PIXI.dragonbones.display.Skeleton.makeArmature("dragonBoy", "DragonBoy");

Set animation and add skeleton to PIXI display hierarchy:

this._skeleton.armature.animation.gotoAndPlay("walk", 0.2);

this._stage.addChild(this._skeleton.display);

And do not forget to run tick function of DragonBones:

PIXI.dragonbones.runtime.animation.WorldClock.clock.advanceTime(timeElapsed);

From now on, use instantiated skeleton as reference to its armature, display and factory objects.

Change display of Slot:

var randomCloth = this._skeleton.factory.getTextureDisplay("parts/clothes" + ( Math.floor( Math.random() * 4 ) + 1 ));
this._skeleton.armature.getSlot("clothes").setDisplay( randomCloth );

To-Do

• Handle skewX and skewY transform properties properly
• Disposing
• Caching

Building

You will need to have node and gulp setup on your machine.

Then you can install dependencies and build:

npm i && npm run build

That will output the built distributables to ./dist.