Skip to content

DragonBones Library JavaScript Version(support pixi.js,createjs,easeljs,hilo,dom...)

License

Notifications You must be signed in to change notification settings

luzhuang/DragonBonesJS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DragonBonesJS

DragonBones Library JavaScript Version

Info

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

It now support pixi.js, hilo, createjs and dom mode. 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

Usage

  • dragonbones-alone.js is dragonbones without factory.

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

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

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

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

  • quick start:

    //create factory, now support PixiFactory, HiloFactory, CreatejsFactory and DomFactory
    var dragonbonesFactory = new dragonBones.DomFactory();
    
    /**
     * 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

About

DragonBones Library JavaScript Version(support pixi.js,createjs,easeljs,hilo,dom...)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 88.8%
  • TypeScript 11.1%
  • HTML 0.1%