前言
在7、8个月之前，在折腾自己的Hexo时，接触到了Hexo的看板娘，在那时第一次听到 Live2D 个名词。在那之后利用闲余时间，收集了一些 Live2D 的资料，通过这篇文章分享给大家。当时，常用的版本还是2.X，因此自己编写的 demo 是基于版本2.X的，想不到大半年过去 Live2D 已经升级了2个版本🤣。由于个人实力有限，没有深入去研究该门技术，因此这篇文章只是科普、介绍向。
什么是Live2D
Live2D 是一种应用于电子游戏的绘图渲染技术，技术由日本 Cybernoids 公司开发。主要用于以动画风格为主的冒险游戏，它的缺点是 Live2D 人物无法大幅度转身。使用 Live2D 化的角色可以通过多种不同的方法进行互动。自从 2008 年发布以来，已经被众多的软件（大部分是游戏）采用。除了家用游戏系统， Live2D 还可以运行在安卓、IOS 、 PSV 、任天堂 3Ds 等家用游戏设备上。
通过上述引用百度百科的介绍，我们可以认识到，Live2D 并不是web前端领域的技术，而是一项绘图、建模技术，只不过应用方式多种多样，如unity、C++、PS4，当然还有本文下述 Demo 使用到的web端。更多SDK，可以浏览官网：www.live2d.com/download/cu…
逻辑原理
建模者在准备好二维的“原料图”后，通过对二维图形的平移、旋转、变形，实现一系列的连续图像变化，产生动画效果，最终生成类3D模型。
下面的是“原料图”以及调整图像的例子：
通过不断的调整2维图片的角度，平移，就能生成动画，如下：
建模
Live2D 共有两个分支：Cubism（主要）和Euclid（已停止开发）。官方的介绍是 Live2D Cubism 生成的模型并不是真正的3D模型，因此具有一些局限性，比如无法进行大幅度的转身动作，而 Live2D Euclid可以达到这一效果。
从上述的例子中，我们可以知道 Live2D 对画师要求较高，除去原画绘制能力（板绘），画师还需要具有一定三维空间感，以及处理动画的复杂逻辑能力。
在掘金上为数不多与 Live2D 相关的文章，正好是讲述建模的：juejin.cn/post/684490…
官方建模教程可以浏览：docs.live2d.com/cubism-edit…
bilibili 上也有很多 Live2D 的建模教程，看了这些视频后，应该就能理解 Live2D 的原理了。
官方的建模工具下载地址：www.live2d.com/download/cu…
WebSDK应用
在上文也提到，Live2D 不是前端的技术，只是它可以通过 SDK 用于前端领域，即 Web的SDK。
目前国内，我了解到使用比较多的是以下两种方式：
- 官方SDK， 下载地址
- EYHN 大神整合的库，其本人的github下载地址已经删除，源码无法学习，打包好的库在下述github Demo 中的 public/live2d/js/live2d.js
优缺点比较：
官方的SDK更为灵活，且还在维护中。但是使用成本相对较高，因为这块的官方文档个人感觉不太行。还好后面出了官方的Demo示例 ，因为是后来才知道官方给了这个demo，因此下方我的 demo 中，直接加入官方的 demo ，而没有基于官方的 demo 进行开发。
相对官方的SDK，EYHN整合的库上手简单，仅需几行代码即可使用。可惜的是，现在已经没有维护，且版本基于的是cubism2。（现在已经是版本4了。）
Demo
注意：现在不能像一些老百度上的文章那样使用，会报以下错误：
正确的使用方法是在服务器上使用，本地Demo的话可以采用Apache、Node等搭建简单的环境。
可以使用的Demo地址：github.com/dcison/Live…
Demo启动方式：下载 -> npm install -> node index.js 在浏览器127.0.0.1:3000中访问
核心代码都在 public 下
- oldVersion : cubism2旧版本的demo例子，共三个，可以通过以下路由去访问
- live2d目录、index.html、init.js 是EYHN 大神整合的例子，可以通过http://localhost:3000/ 访问
- 新版本 demo : http://localhost:3000/newVersion/
官方使用简介
直接引用相应的库，然后手动编写渲染、纹理加载、WebGL处理、模型加载等核心代码
第三方简介
使用方式：加载编写好的配置文件JSON
配置的一些说明：
- Layout: 可以对模型位置进行调整
- Hit_area_custom: 可点击区域配置
- Motions: 各种动画处理
- idle: 模型没有动作交互时，按idle中的数组顺序渲染动作
- sleepy: 模型闭眼的动作
- flick_head: 点击头部区域时 触发的动作
- tap_body: 点击身体区域时 触发的动作
最后，用 demo 中的小可爱，结束这篇文章
