乐趣区

关于前端:实现-pixi-DragonBones-播放动画

jiezi

雷电将军最近上线了，流水的主 C，铁打的神。七神必抽，一个 10 发娶回家，还附赠一个小保底美滋滋。

当然，这篇文章不是为了凡，还是回到咱们的主题：pixi 和 dragonbones

每次新老婆 / 老公上线之前，ys 都会搞一个先导页面，比方这次雷神的先导页 https://webstatic.mihoyo.com/…。

刚开始还认为是间接视频播放的，看了一下资源加载，诶，没有视频。弱小的好奇心，找到了一张图

在脑海里搜查了一番，想起来了，之前在用 egret 写小游戏的时候，有一个龙骨动画制作工具，示例里也是相似这样的 Sprite 图

思路大略清晰了，外面大部分的动图都是用了骨骼动画制作的，顺着 source 里的代码，找到了几个关键词

  • Spine

    查了一下，是一个制作 2D 骨骼动画的软件（Spine: 2D skeletal animation for games）

    Spine-runtimes 简直反对所有支流游戏引擎和编程语言，能够通过绝对应地 runtimes 实现跟在 Spine 编辑器截然不同的动画成果

  • Three.js

    这个家喻户晓，3D 库

大抵的思路清晰了，先用 Spine 做出动画成果，导出数据，再用 spine-runtimes 的 three.js 插件将其在页面上运行起来。

那骨骼动画的益处是什么？

  • 间断。不会像帧动画加快播放后呈现卡顿的状况
  • 节约存储空间。

制作骨骼动画的软件有很多，下面找到的是 Spine，这软件我搜了一下，好家伙，要钱。虽说反对正版软件毋庸置疑，但作为开发也只是实际实际，不是特地想花这钱。只能看看有没有别的免费软件。

猛然想起，下面那条龙，egret 的龙骨制作软件，能够间接拿来做骨骼动画啊。这期间我还找到了它的工具库：格局互转。这个官网工具能够实现各种格局的互转，我这里要的是能够从 db JSON 转换成 Spine JSON 的命令：

db2 -t spine

先用 dragonebones 做出一套简略的骨骼动画

  • 纹理

  • 纹理 JSON

    {"name":"ciwei","imagePath":"ciwei_tex.png","SubTexture":[{"name":"背部","x":1,"height":378,"y":1,"width":327},{"name":"手段","x":278,"height":75,"y":381,"width":98},{"name":"身材","x":330,"height":268,"y":1,"width":300},{"name":"右手","x":171,"height":97,"y":381,"width":105},{"name":"右腿","x":330,"height":72,"y":271,"width":58},{"name":"枪","x":1,"height":88,"y":381,"width":168}],"height":512,"width":1024}

  • 骨骼 JSON

    {"frameRate":8,"name":"ciwei","version":"5.5","compatibleVersion":"5.5","armature":[{"type":"Armature","frameRate":8,"name":"Armature","aabb":{"x":-220.04,"y":-217.93,"width":482.27,"height":422.86},"bone":[{"name":"root","transform":{"skX":29.5962,"skY":29.5962}},{"name":"bone_ikTarget","parent":"root","transform":{"x":42.3759,"y":158.7024,"skX":-29.5962,"skY":-29.5962}},{"length":86,"name":"身材","parent":"root","transform":{"x":20.6596,"y":24.2253,"skX":13.7781,"skY":13.7781,"scX":1.2315,"scY":1.2315}},{"length":89,"name":"右手","parent":"身材","transform":{"x":-18.5603,"y":-11.6222,"skX":-47.9086,"skY":-47.9086,"scX":1.0534,"scY":1.0534}},{"length":200,"name":"背部","parent":"身材","transform":{"x":-17.7904,"y":-6.7476,"skX":-111.9925,"skY":-111.9925,"scX":0.812,"scY":0.812}},{"length":74,"name":"右腿","parent":"身材","transform":{"x":59.5746,"y":14.7124,"skX":11.4582,"skY":11.4582,"scX":0.812,"scY":0.812}},{"length":104,"name":"手段","parent":"身材","transform":{"x":1.3965,"y":-3.7357,"skX":72.9018,"skY":72.9018,"scX":0.812,"scY":0.812}},{"length":95,"name":"枪","parent":"手段","transform":{"x":108.0692,"y":9.1858,"skX":21.4831,"skY":21.4831}}],"slot":[{"name":"背部","parent":"背部"},{"name":"手段","parent":"手段"},{"name":"身材","parent":"身材"},{"name":"右手","parent":"右手"},{"name":"右腿","parent":"右腿"},{"name":"枪","parent":"枪"}],"ik":[{"chain":1,"name":"bone_ik","bone":"右腿","target":"bone_ikTarget"}],"skin":[{"slot":[{"name":"枪","display":[{"name":"枪","transform":{"x":37.82,"y":-13.56,"skX":176.9,"skY":176.9}}]},{"name":"身材","display":[{"name":"身材","transform":{"x":26.87,"y":-88.06,"skX":-86.23,"skY":-86.23,"scX":0.9615,"scY":0.9615}}]},{"name":"手段","display":[{"name":"手段","transform":{"x":71.91,"y":-1.08,"skX":-165.68,"skY":-165.68}}]},{"name":"右腿","display":[{"name":"右腿","transform":{"x":34.88,"y":5.16,"skX":-91.38,"skY":-91.38}}]},{"name":"背部","display":[{"name":"背部","transform":{"x":66.71,"y":-18.64,"skX":-0.6,"skY":-0.6}}]},{"name":"右手","display":[{"name":"右手","transform":{"x":71.25,"y":0.37,"skX":-35.83,"skY":-35.83,"scX":0.9493,"scY":0.9493}}]}]}],"animation":[{"duration":21,"playTimes":0,"name":"jump","bone":[{"name":"root","translateFrame":[{"duration":21,"x":1}]},{"name":"身材","translateFrame":[{"duration":7,"tweenEasing":0,"x":-23.02,"y":-20.28},{"duration":7,"tweenEasing":0,"x":-34.46,"y":-33.33},{"duration":7,"tweenEasing":0,"x":9.03,"y":9.82},{"duration":0,"x":-23.02,"y":-20.28}]}]}],"defaultActions":[{"gotoAndPlay":"jump"}]}]}

其实 pixi 官网能够间接 dragonebones 的插件，但任性，就是要转成 Spine 格局去载入。
执行 db2 -t spine 之后，会生成 ciwei_spine.json、ciwei_spine.altas 两个文件，将纹理 png 和这两个文件放在我的项目里。当初咱们能够开始写代码了。

  1. 装置依赖 

    # pixi v6.1.2
yarn add pixi.js

# pixi-spine v3.0.8
yarn add pixi-spine

  2. 导入 

    import {Application, utils} from 'pixi.js'
import {Spine} from 'pixi-spine'

  3. 实例化 pixi

    const app = new Application({view: this.$refs['canvas'],
  backgroundColor: 0x000000,
  antialias: true,
  width: this.width, // 舞台宽度
  height: this.height, // 舞台高度
  resolution: 2
})

  4. 加载资源 

    const loader = app.loader
const resources = [{
  name: 'ciwei',
  url: './static/spine2/ciwei.json'
}]
// 加载资源
resources.forEach(res => {loader.add(res.name, res.url)
})

// 加载胜利
loader.load(this.init)

  5. 增加对象到舞台 

    function init () {
  // 获取 spine 骨骼对象
  const spine = new Spine(loader.resources['ciwei'].spineData)
  spine.name = 'ciwei'
  // 定义了 jump 的动画行为
  spine.state.setAnimation(0, 'jump', true)
  spine.x = 200
  spine.y = 200
  // 增加到舞台
  app.stage.addChild(spine)
}

最终成果：

不过，理论也不须要像我这么绕，从 db 导出来的龙骨，官网是反对 pixi 的，贴上地址 DragoneBonesJS。

最初看下我跑进去的雷电将军

Done！实现。

退出移动版