tinyjs-plugin-dragonbones
骨骼动画插件
查看demo
http://tinyjs.net/#/plugins/tinyjs-plugin-dragonbones/demo
引用方法
-
推荐作为依赖使用
npm install tinyjs-plugin-dragonbones --save
-
也可以直接引用线上cdn地址,注意要使用最新的版本号,例如:
起步
首先当然是要引入,推荐NPM
方式,当然你也可以使用CDN
或下载独立版本,先从几个例子入手吧!
1、最简单的例子
参考
demo/simple.html
引用 Tiny.js 源码
首先从 DragonBones Pro 中导出一份骨骼动画数据,再将导出的 Dragon_ske.json,Dragon_tex.json 和 Dragon_tex.png 添加到项目中,使用 Tiny.Loader
模块加载资源完成后,可以创建基于 DragonBones 的骨骼动画:
var loader = ;loader;
实例化 DragonBones 所需要的数据:
//设置别名{// 将骨骼数据添加到骨架系统中TinyDragonBones;TinyDragonBones;// 通过 buildArmature 方法,我们提取名称为robot的骨架,一个包含骨架数据的 Tiny.Container 对象。要想在舞台中看到该骨架,我们需要将其显性的添加到的舞台当中armatureDisplay = TinyDragonBones;armatureDisplayx = apprendererwidth * 05;armatureDisplayy = apprendererheight * 05 + 150;armatureDisplayscale;// 播放骨骼动画动画名字需要在 DragonBones Pro 中定义,如 fall、jump、stand、walk// 也可以使用 armatureDisplay.animation.play('walk');var animationState = armatureDisplay;container;}
2、多人物骨骼动画
参考
demo/multi.html
3、改变动画速度
参考
demo/timescale.html
有时在游戏的运行过程中,需要动态的改变动画的播放速度。对时钟的调节一般是要影响一组动画。直接调节 animation
中的 timeScale
属性即可。
var animationState = armatureDisplay;// 调节动画速度为 1.5 倍armatureDisplayanimationtimeScale = 15;
4、动画遮罩
参考
demo/bonemask.html
动画遮罩就是只将动画的一部分呈现出来,例如下面的代码,将只播放 head 和 body 两个骨头的跑步动画,其他骨头将维持原姿势不动。
var animationState = armatureDisplay;animationState;animationState;
5、动画混合
参考
demo/mixed.html
动画混合是指一个骨架同时可以播放多个动画。例如下面的代码,可以让角色同时播放 walk 和 fall 的动画。
//设置别名var dragonBones = TinyDragonBones;armatureDisplayanimation;armatureDisplayanimation;
6、调试骨骼
参考
demo/debugdraw.html
armatureDisplaydebugDraw = true;
依赖
Tiny.js
: Link
第三方库
工具
API文档
http://tinyjs.net/plugins/tinyjs-plugin-dragonbones.html#docs