hhh，突然想起了去年玩过的Live2D，但是中途经过重建网站所以丢失了，现在突然心血来潮想重新给网站来一个。具体的效果，见页面左下角（手机上不可见），或者查看这个Demo Page。

Live2D简介

Live2D是一种应用于电子游戏的绘图渲染技术，由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型，换句话说就是2D的素材实现一定程度的3D效果，但只能是一定程度3D，因为Live 2D人物无法大幅度转身。

Live2D可以用于很多场景，比如桌面动态壁纸，手机游戏（~~比如最近挺火的闪耀暖暖~~），电脑桌面应用，以及网页，这里只谈论在网页中的使用。

live2d官方提供了很多平台的SDK（介绍见这里），包括iOS，Android，Flash，Unity，openGL等，如果要在网页中呈现，则可以提供了WebGL SDK，可以在这里下载：Cubism SDK WebGL 2.1

但这里面的js核心文件是被压缩混淆的，不容易上手，不过国内已经有一些对live2d web进行实践的先驱，他们提供的JS资源在使用上要简单的多，基本上就是把官方提供的案例中的WebGL的一个复杂代码整合在了一起。好处在于基本功能使用简单的，不足在于若想定制和扩展，则要走旁门左道了（如提词器效果，只能走传统web交互）。

使用方法

这里以我接触到的两个上手挺方便的live2d举例：

方案1

具体步骤如下：

页面上放一个canvas：

<canvas id="live2d" width="280" height="250"></canvas>

引入live2d.js，例如：
```
<script src="./js/live2d.js"></script>
```
一行JS代码执行绑定：
```
loadlive2d("live2d", "./model.json");
```
效果就达成了，就是这么简单。

这种方案的缺点是定制性不高，核心的js代码全部被压缩混淆，二次开发较难。

方案2

我使用的就是这第二种方案，具体步骤如下：

引用必要的js文件（可以在Github上下载）：

<script src="js/LAppDefine.js"></script>
<script src="js/live2d.min.js"></script>

添加canvas元素：

<canvas class="live2d" id="live2d" width="300" height="800"></canvas>

添加css样式（非必须，可自定义）：

<style>
.live2d {
    position: fixed;
    bottom : 0;
    left : 0;
}
</style>

初始化live2d：
```
<script>InitLive2D();</script>
```
LAppDefine.js为live2d的配置文件，具体的配置信息见注释，可配置项目还挺多的。更重要的是这个方案中的live2d.min.js中作者自己添加的代码没有经过压缩混淆，完全可以对其作自己的更改，灵活度较高。

model

要说live2d最麻烦的地方在哪，答案肯定是live2d模型本身，须知每一个模型都是作者一点点在软件上调出来的。js只是实现了一个驱动器。

模型有一系列的模型文件、动作文件、资源分配文件组成，文件夹组成大体如下：

+-models（模型文件夹名称）
|__+-texture（模型材质包）
|__|___texture_00.png
|__|___texture_01.png
|__|___....
|__+-motions（模型动作组）
|__+-expression（模型表情组）
|__+-sounds（模型音效）
|__model.json（模型资源分布说明文件）
|__model.moc（模型本体）

这里需要指出，Live2D Cubism 2和Live2D Cubism 3的模型不兼容，而现在网上能收集到的都是Live2D Cubism 2制作的模型。

官方提供的案例中有model.json文件：

{
    "type":"Live2D Model Setting",
    "name":"shizuku",
    "model":"shizuku.moc",
    "textures": [
        "shizuku.1024/texture_00.png",
        "shizuku.1024/texture_01.png",
        "shizuku.1024/texture_02.png",
        "shizuku.1024/texture_03.png",
        "shizuku.1024/texture_04.png",
        "shizuku.1024/texture_05.png"
    ],
    "physics":"shizuku.physics.json",
    "pose":"shizuku.pose.json",
    "expressions": [
     {"name":"f01","file":"expressions/f01.exp.json"},
     {"name":"f02","file":"expressions/f02.exp.json"},
     {"name":"f03","file":"expressions/f03.exp.json"},
     {"name":"f04","file":"expressions/f04.exp.json"}
    ],
    "layout": {
        "center_x":0,
        "y":1.2,
        "width":2.4
    },
    "hit_areas": [
        {"name":"head", "id":"D_REF.HEAD"},
        {"name":"body", "id":"D_REF.BODY"}
    ],
    "motions": {
        "idle": [
            {"file":"motions/idle_00.mtn" ,"fade_in":2000, "fade_out":2000},
            {"file":"motions/idle_01.mtn" ,"fade_in":2000, "fade_out":2000},
            {"file":"motions/idle_02.mtn" ,"fade_in":2000, "fade_out":2000}
        ],
        "tap_body": [
            { "file":"motions/tapBody_00.mtn", "sound":"sounds/tapBody_00.mp3" },
            { "file":"motions/tapBody_01.mtn", "sound":"sounds/tapBody_01.mp3" },
            { "file":"motions/tapBody_02.mtn", "sound":"sounds/tapBody_02.mp3" }
        ],
        "pinch_in": [
            { "file":"motions/pinchIn_00.mtn", "sound":"sounds/pinchIn_00.mp3" },
            { "file":"motions/pinchIn_01.mtn", "sound":"sounds/pinchIn_01.mp3" },
            { "file":"motions/pinchIn_02.mtn", "sound":"sounds/pinchIn_02.mp3" }
        ],
        "pinch_out": [
            { "file":"motions/pinchOut_00.mtn", "sound":"sounds/pinchOut_00.mp3" },
            { "file":"motions/pinchOut_01.mtn", "sound":"sounds/pinchOut_01.mp3" },
            { "file":"motions/pinchOut_02.mtn", "sound":"sounds/pinchOut_02.mp3" }
        ],
        "shake": [
            { "file":"motions/shake_00.mtn", "sound":"sounds/shake_00.mp3","fade_in":500 },
            { "file":"motions/shake_01.mtn", "sound":"sounds/shake_01.mp3","fade_in":500 },
            { "file":"motions/shake_02.mtn", "sound":"sounds/shake_02.mp3","fade_in":500 }
        ],
        "flick_head": [
            { "file":"motions/flickHead_00.mtn", "sound":"sounds/flickHead_00.mp3" },
            { "file":"motions/flickHead_01.mtn", "sound":"sounds/flickHead_01.mp3" },
            { "file":"motions/flickHead_02.mtn", "sound":"sounds/flickHead_02.mp3" }
        ]
    }
}

其中定义了很多东西，例如使用的素材纹理textures，点击区域hit_areas，运动参数motions等，与文件夹目录结构一一对应。

其中motions中的idle表示空闲时候运动行为，.mtn文件是motions单词的缩写，是Live2D中专有文件格式。tap_body, pinch_in等都表示相关动作行为，在Live2D领域，这些关键字几乎都是约定俗成的一致，因为可以和看板娘发生交互动作的行为也就这些。

Live2D Cubism 3

以上内容都是基于旧的Cubism Editor 2制作与开发，现在官网老早就使用Cubism 3了（详见Cubism 3 | Live2D）

Cubism 3使用的是TypeScript，相比第二版更加稳健。

官方在官网上也提供了Demo下载。

Demo的使用可以参照内附的README.md，需要使用Node.js + TypeScript + Visual Studio Code 组合。

我将官网的这个Demo编译了一下，示例点这里，有四个模型，点击右上角的齿轮可以切换模型。

除此之外，还有桌面版本： https://github.com/amorist/platelet https://github.com/akiroz/Live2D-Widget

还有Live2D模型收集站：梦象，我自己也弄了一个模型收集仓库。

imuncle / imuncle.github.io

为网站添加Live2D 看板娘 #77

Live2D简介

使用方法

方案1

方案2

model

Live2D Cubism 3

Live2D的更多资源