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

r囧r小猫 2021-09-12 07:14 1256阅读 0赞

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

![Center][]

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

![Center 1][]

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

![Center 2][]

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

![Center 3][]

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

![Center 4][]

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

![Center 5][]

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

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

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

![Center 6][]

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

// 搭建舞台
    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); //添加至舞台

运行结果：人物正在骑自行车  
![Center 7][]  
在使用骨骼动画的时候，常有更换皮肤的需求，只要知道皮肤部位的插槽名称，调用以下代码即可更换皮肤，如头部“head”：

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

更换头部皮肤后的运行结果如下：  
![Center 8][]

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

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

[Center]: /images/20210813/f8b9678cf57c4fa4a04db08ea1250304.png
[Center 1]: /images/20210813/2d52ec9d37124e169c58ebff607c06c0.png
[Center 2]: /images/20210813/ba4423328e4b41abbb5bb0d8eb541754.png
[Center 3]: /images/20210813/bf87b1ca398049a9b5455e0c827f6654.png
[Center 4]: /images/20210813/a9c47bd91f1a4424add238e4d374bd96.png
[Center 5]: /images/20210813/511a2331f0084a7ba0573e027ebca777.png
[Center 6]: /images/20210813/9d9a28e4b66e45bf8c3f88b19294f7bf.png
[Center 7]: /images/20210813/22cc1e44faf84c68b49a4e578b547a16.png
[Center 8]: /images/20210813/23c72e6bcc3948669d97e98ca049bbdf.png