前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是从该编辑器生成和导出的。想了解DragonBones可以在百度上搜索“白鹭时代”或者访问网页：https://www.egret.com/。主页的“产品”栏中就有DragonBones项，如下图所示。

进入DragonBones产品主页后，即可下载龙骨编辑器。

打开龙骨编辑器，编辑器的界面图案如下：

本篇所用的例子是【机器人骑车-IK】， 导入该示例即可，导入后的界面如下：

编辑器的具体使用，可以参考DragonBones的帮助文档，此处就不详细介绍了。在导入的系统示例中，已经做好了一个默认骑车动作骨骼动画：bicycle

选择“文件”->“导出”，即可导出3个骨骼动画资源文件：Bicycle_ske.json、Bicycle_tex.json和Bicycle_tex.png

至此，我们已经拿到了骨骼动画的基本文件，那么就开始制作骨骼动画吧。

现在我们回到PIXI，我们在写骨骼动画代码前，需要导入3个文件，代码如下：

<script type="text/javascript" src="../libs/pixi.js"></script>
<script type="text/javascript" src="../Egret/dragonBones.js"></script>
<script type="text/javascript" src="../Egret/dragonBonesPixi.js"></script>

其中运行库dragonBones.js和dragonBonesPixi.js都可以在DragonBones的官网中下载得到

当然也可以从本篇的附件压缩包中直接获取。骨骼动画的实现源码如下：

// 搭建舞台
var app = new PIXI.Application(800, 600, {
	backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
//预加载资源
PIXI.loader.reset();
PIXI.loader
	.add("dragonBonesData", "../dragonbones/002/Bicycle_ske.json")
	.add("textureData", "../dragonbones/002/Bicycle_tex.json")
	.add("texture", "../dragonbones/002/Bicycle_tex.png");
PIXI.loader.once("complete", onComplete, this);
PIXI.loader.load();
//加载成功
function onComplete(target, resource) {
	var textureImg = resource["texture"].texture;
	var textureData = resource["textureData"].data;
	var skeletonData = resource["dragonBonesData"].data;
	//骨骼动画实现
	var dragonbonesFactory = new dragonBones.PixiFactory(); //新建骨骼动画制作工厂
	dragonbonesFactory.parseDragonBonesData(skeletonData); //解析骨骼数据
	dragonbonesFactory.parseTextureAtlasData(textureData, textureImg); //解析纹理数据
	var armatureDisplay = dragonbonesFactory.buildArmatureDisplay(skeletonData.armature[0].name); //构建骨骼动画
	armatureDisplay.animation.play('bicycle', 0); //执行动画：骑车动作
	armatureDisplay.x = 300;
	armatureDisplay.y = 500;
	armatureDisplay.scale.set(0.3, 0.3);
	app.stage.addChild(armatureDisplay); //添加至舞台

运行结果：人物正在骑自行车

在使用骨骼动画的时候，常有更换皮肤的需求，只要知道皮肤部位的插槽名称，调用以下代码即可更换皮肤，如头部“head”：

var armature = armatureDisplay._armature;
var tmpslot = armature.getSlot("head");
var texture = PIXI.Texture.fromImage("../dragonbones/002/replacehead.jpg");
tmpslot.display.texture = texture;

更换头部皮肤后的运行结果如下：

至此，我们已经实现PIXI来播放骨骼动画了。

附件地址：http://download.csdn.net/detail/zeping891103/9846927