vTuber行业越来越火爆，看着那些形形色色的皮套，忍不住自己实现一遍的冲动，说起2D骨骼动画软件，Spine2D首当其冲。这次就用它来耍一耍。

为啥我不用live2D？毕竟这是日本软件，英语的本地化翻译不知道靠不靠谱，与Spine价格也差不太多，看了一些教程，操作也比较复杂，感觉更倾向于给不熟悉编程的设计人员使用。

为啥不用免费的国产软件龙骨？开始确实是试用了一段时间，软件的基础功能应该满足我的需求，但是程序文档比较简陋，而且似乎已经停止维护，非常可惜。

无奈之下，忍痛花299刀买了Spine。（T_T）

虚拟主播用的动画不知道有没有专业一些的称呼，我暂时就叫“live2D动画”吧~live2D动画的核心是骨骼绑定与蒙皮动画，蒙皮动画的原理和我以前用canvas2D实现的图片变形效果类似：Canvas2D实现对图片进行网格变换。

首先去网上找了一个已经对角色分件完的PSD模型，为了demo制作方便我找了个比较简单、贴图较少的“人物”，然后用官方的ps插件PhotoshopToSpine.jsx导出图层，然后用Spine打开导出的工程即可。（psd原件我会放到文末的源码中）

接下里就是再spine里绑定骨骼，刷权重，key帧这些繁琐的工作了，三言两语也说不完，网上的教程还是挺多的，本文还是着重程序实现。我会把Spine工程也在源码中分享出来，如果大家有疑惑的地方我这个生手也许能解答一部分~

程序实现主要用到两个库，pixi.js和pixi-spine，用的都是当前（2021-02-28）的最新版，因为我的spine版本是3.8，pixi-spine只有最新版才支持，所以pixi.js也必须是最新版（v5）

虽然spine官方也提供了webgl版的运行时，但是自从上次用了pixi感觉还是相当好使的，pixi也提供了插件，果断就拿来用了。

本次功能主要是三个：①眼球根据鼠标移动位置；②点击角色张嘴；③根据音乐节奏跳动；

功能①的实现主要依赖spine动画的ik约束，具体实现见官方论坛的这篇博文：眼睛距离限制设置，我就拿来现学现卖了，然后程序上只要通过findBone方法找到约束的骨骼，然后移动位置即可。

功能②则是先在spine中创建一段关键帧动画，然后通过setAnimation方法来进行播放，如果有多个动画可以通过设置BlendMode并控制每段动画轨道的alpha来进行混合，这一块我会以后写个新的demo专门介绍。

功能③也是通过ik约束和修改关键骨骼的位置来实现，根据音乐节奏跳动的部分不是本文的重点，主要是对音乐的流数据进行采样归并，我也没做深入的研究，目前只是简单调用api的阶段，有兴趣详细了解的小伙伴可以看MDN的入门教程：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API。

最终效果如下：

B站专栏的代码和外链都不好加~~放个我博客的外链地址吧：https://my.oschina.net/codingDog/blog/4965587