Tiny游戏引擎 骨骼动画
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
demo
libs
src
test
.editorconfig
.eslintrc
.gitignore
CHANGELOG.md
README.md
package.json
webpack.config.js

README.md

tinyjs-plugin-dragonbones

骨骼动画

查看demo

http://tinyjs.net/#/plugins/tinyjs-plugin-dragonbones/demo

引用方法

起步

首先当然是要引入,推荐NPM方式,当然你也可以使用CDN或下载独立版本,先从几个例子入手吧!

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/as/g/tiny/tiny/1.1.5/tiny.js"></script>
1、最简单的例子

参考 demo/simple.html

  1. 首先从 DragonBones Pro 中导出一份骨骼动画数据
  2. 将导出的 Dragon_ske.json,Dragon_tex.json 和 Dragon_tex.png 添加到项目中
  3. 使用 Tiny.Loader 模块加载资源完成后,可以创建基于 DragonBones 的骨骼动画
Tiny.Loader
  .add('dragonBonesData', './resource/Dragon/Dragon_ske.json')
  .add('textureDataA', './resource/Dragon/Dragon_tex.json')
  .add('textureA', './resource/Dragon/Dragon_tex.png')
  .load(function ()       {
    initDragon();
  });
  1. 实例化 DragonBones 所需要的数据
//设置别名
var dragonBones = Tiny.DragonBones;
var resources = Tiny.Loader.resources;

function initDragon1() {
  // 将骨骼数据添加到骨架系统中
  dragonBones.addDragonBonesData(resources['dragonBonesData'].data);
  dragonBones.addTextureAtlasData(resources['textureDataA'].data, resources['textureA'].texture);

  // 通过 buildArmature 方法,我们提取名称为robot的骨架,一个包含骨架数据的 Tiny.Container 对象。要想在舞台中看到该骨架,我们需要将其显性的添加到的舞台当中
  armatureDisplay = dragonBones.buildArmatureDisplay('Dragon');
  armatureDisplay.x = app.renderer.width * 0.5;
  armatureDisplay.y = app.renderer.height * 0.5 + 150;
  armatureDisplay.scale.set(-0.3, 0.3);

  // 播放骨骼动画动画名字需要在在 DragonBones Pro 中定义,如 fall、jump、stand、walk
  // 也可以使用 armatureDisplay.animation.play('walk');
  var animationState = armatureDisplay.play('walk');

  container.addChild(armatureDisplay);
}
2、多人物骨骼动画

参考 demo/multi.html

3、改变动画速度

参考 demo/timescale.html

有时在游戏的运行过程中,需要动态的改变动画的播放速度。对时钟的调节一般是要影响一组动画。直接调节 animation 中的 timeScale 属性即可。

var animationState = armatureDisplay.play('walk');

// 调节动画速度为 1.5 倍
armatureDisplay.animation.timeScale = 1.5;
4、动画遮罩

参考 demo/bonemask.html

动画遮罩就是只将动画的一部分呈现出来,例如下面的代码,将只播放 head 和 body 两个骨头的跑步动画,其他骨头将维持原姿势不动。

var animationState = armatureDisplay.play('walk');
animationState.addBoneMask('head');
animationState.addBoneMask('body');
5、动画混合

参考 demo/mixed.html

动画混合是指一个骨架同时可以播放多个动画。例如下面的代码,可以让角色同时播放 walk 和 fall 的动画。

//设置别名
var dragonBones = Tiny.DragonBones;
armatureDisplay.animation.fadeIn('walk', 0, -1, 0, 0, 'UPPER_BODY_GROUP', dragonBones.Animation.SAME_GROUP);
armatureDisplay.animation.fadeIn('fall', 0, -1, 0, 0, 'LOWER_BODY_GROUP', dragonBones.Animation.SAME_GROUP);
6、调试骨骼

参考 demo/debugdraw.html

armatureDisplay.debugDraw = true;

依赖

第三方库

工具

API文档

http://tinyjs.net/#/plugins/tinyjs-plugin-dragonbones/docs