schmidtsonian / dragonbonesjs

DragonBones Library JavaScript Version

DragonBonesJS

DragonBones Library JavaScript Version

Info

This is DragonBones Library JavaScript Version. Update to 4.0 version.

It now support pixi.js factory and dom factory. you can add your own render factory like this factory;

Official DragonBones use typescript and only support egret. I transform it and now can easily support multi render library.

Demo

• pixi.js Demo
• dom Demo

Usage

• dragonbones-alone.js is dragonbones without factory.

• dragonbones-dom.js is dragonbones width dom factory.

• dragonbones-pixi.js is dragonbones width pixi factory.

• quick start:

  //create DomFactory
  var dragonbonesFactory = new dragonBones.DomFactory();
  
  //or create PixiFactory
  var dragonbonesFactory = new dragonBones.PixiFactory();
  
  /**
   * add texture data and skeleton data
   * textureImg is a load completed Image
   * textureData is texture json data
   * skeletonData is skeleton json data
   */
  dragonbonesFactory.addTextureAtlas(new dragonBones.TextureAtlas(textureImg, textureData));
  dragonbonesFactory.addDragonBonesData(dragonBones.DataParser.parseDragonBonesData(skeletonData));
  
  //create armature
  var armature = dragonbonesFactory.buildArmature(skeletonData.armature[0].name);
  
  //play
  armature.animation.gotoAndPlay('walk');
  
  //add armature to clock
  dragonBones.WorldClock.clock.add(armature);
  
  //you need to run dragonBones.WorldClock like this to run the armature
  var t = new Date().getTime();
  function tick(){
      var now = new Date().getTime();
      dragonBones.WorldClock.clock.advanceTime((now - t)*0.001);
      t = now;
      requestAnimationFrame(tick);
  }
  tick();

see official tutorial for more info.

Compile and build

Built by gulp:

• run npm install -g gulp to install gulp.
• run npm install to install all dependencies.
• run gulp to build source.
• run gulp watch to watch and auto build source.

License

MIT License