返回

TGideas

分享
菜单

Live2D的介绍及在Web端的运用

经验·团队博客

by 秋豪

2019-11-14

开灯
最近在项目上接触到了Live2D技术，觉得挺有趣，想借此分享给大家
 

一、什么是Live2D

Live2D是一种应用于电子游戏的绘图渲染技术，该技术由日本Cybernoids公司（现已更名为Live2D）开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的游戏来说非常有用。
 
简单来说，Live2D就是一项在不增加绘图工作量的基础上，让2D人物“活”起来的技术。
 
画师只需要绘制一张原画，然后将身体、五官、发型、服装等2D图片放到全3D的模型模板上。

2D人物，以及分解完毕的各种细节部分

 
这样的成品将保留2D手绘的精细，同时在小范围旋转视角上也能做到毫无违和感。不过这一技术目前的缺点在于无法实现复杂图形、人物的大幅旋转。
 

2D人物导入官方制作工具3D的模型模板

如果对相关制作感兴趣的朋友可以看看Live2D的官方网站，里面都有对应的制作工具和相关教程介绍。

Live2D自从2008年发布以来，已经被众多的软件（游戏）采用。像公司也有好几款使用了Live2D技术的游戏，比如奇迹暖暖手游和食物语手游等。

奇迹暖暖手游Live2D互动套装【云端一梦】

二、Live2D在Web端的运用

Live2D官方提供了多个平台的SDK，包括iOS，Android，Flash，Unity，openGL等，如果要在Web端中呈现，则有WebGL版SDK可以使用。

我这边用的是在github上有人对官方代码Cubism SDK WebGL 2.1封装成PixiJS版本的组件，对比官方版本上手会简单很多，也有一些API方便使用，像PixiJS上的一些滤镜效果也可以用在模型上。

在开始上代码前要先介绍一下模型文件目录的构成，以一个官方示例人物模型haru为例，这个文件目录是美术人员在官方制作工具导出json格式后生成的。

 

expressions目录里面放的是表情文件，每个.exp.json文件里面存放一个表情数据

 

haru_01.1024目录里面放的是模型贴图文件

 

motions目录里面放的是动作文件，每个.mtn文件里面存放一个动作数据

 

剩下的是模型骨骼文件.moc，模型配置文件model.json，模型姿势配置文件pose.json，物理效果配置文件physics.json

基本上一个Live2D资源文件就是这几部分组成，如果还有配音文件的话会多一个sounds的目录，里面放的是mp3格式文件。页面引用到的主要是这个model.json文件。

const modelHaru = {
    "type":"Live2D Model Setting",
    "name":"haru",
    "model":"haru_01.moc",
    "textures":// 模型贴图
    [
        "haru_01.1024/texture_00.png",
        "haru_01.1024/texture_01.png",
        "haru_01.1024/texture_02.png"
    ],
    "physics":"haru.physics.json",
    "pose":"haru.pose.json",
    "expressions":// 表情，name自定义，用作后续程序调用
    [
        {"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"},
        {"name":"f05","file":"expressions/f05.exp.json"},
        {"name":"f06","file":"expressions/f06.exp.json"},
        {"name":"f07","file":"expressions/f07.exp.json"},
        {"name":"f08","file":"expressions/f08.exp.json"}
    ],
    "layout":
    {
        "center_x":0,
        "y":1.2,
        "width":2.9
    },
    "hit_areas":// 点击区域，name自定义，用作后续程序调用
    [
        {"name":"head", "id":"D_REF.HEAD"},
        {"name":"body", "id":"D_REF.BODY"}
    ],
    "motions":// 动作，键名自定义，用作后续程序调用，通常"idle"代表空闲状态下的动作
    {
        "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" }
        ],
        "pinch_out":
        [
            { "file":"motions/pinchOut_00.mtn", "sound":"sounds/pinchOut_00.mp3" }
        ],
        "shake":
        [
            { "file":"motions/shake_00.mtn", "sound":"sounds/shake_00.mp3","fade_in":500 }
        ],
        "flick_head":
        [
            { "file":"motions/flickHead_00.mtn", "sound":"sounds/flickHead_00.mp3" }
        ]
    }
}

model.json定义的信息就是刚刚介绍模型目录那几部分内容的引用，像模型贴图textures，动作motions，表情expressions，另外还有点击区域hit_areas等。其中motions里面还可以给每个动作添加声音文件或者过渡效果。

接下来介绍如何将上面的模型文件加载到页面里面，大概分这2个步骤：

  1. 引用Live2D和pixi.js相关资源 
    <script src="js/live2d.min.js"></script>
<script src="js/pixi.min.js"></script>
<script src="js/pixi-live2d.js"></script>

     

  2. 相关执行代码 
    const renderer = new PIXI.WebGLRenderer(800, 600);// 创建一个画布（render）
document.getElementById('app').appendChild(renderer.view);// 把画布插入DOM中
const stage = new PIXI.Container();// 创建一个舞台（stage）

const live2dSprite = new PIXI.Live2DSprite(modelHaru);// 创建一个精灵（sprite）
stage.addChild(live2dSprite);// 把精灵加入舞台

live2dSprite.startRandomMotion('idle');// 执行名为'idle'的动作指令

// 点击人物头部和身体执行对应动作
live2dSprite.on('click', (evt) => {
 const point = evt.data.global;
 if (live2dSprite.hitTest('body', point.x, point.y)) {
 live2dSprite.startRandomMotionOnce('tap_body');
 }
 if (live2dSprite.hitTest('head', point.x, point.y)) {
 live2dSprite.playSound('星のカケラ.mp3', 'sound/');
 }
});

// 人物视角跟随鼠标移动
live2dSprite.on('mousemove', (evt) => {
 const point = evt.data.global;
 live2dSprite.setViewPoint(point.x, point.y);
});

// 刷新舞台

function animate() {
 requestAnimationFrame(animate);
 renderer.render(stage);
}
animate();

三、应用场景

 

养成互动

团队这边据我了解17年的时候同事已经做过一个用Live2D的项目了，是一个类似养成的互动H5，角色模型根据用户点击不同部位做出不同的表情和动作，然后累计好感度获得一定奖励。

狐妖小红娘苏苏互动H5

 

剧情动画

这是我这边之前做的食物语手游自制剧H5小程序，用户可以自己设定剧情里面每个步骤的内容，每一个步骤由剧情背景，对话，角色（立绘或者Live2D），选项，子步骤组成。如果设置了Live2D角色，还可以控制角色表情，动作，位置，模型是否反转等。

 
食物语手游自制剧H5小程序

 

网页看板

网页看板就是放在网页内展示的角色形象，可以点击触发不同的表情动作，引导用户观看网页内容。

食物语手游官网看板小助手

 

AR

这是官方展示的一个Live2dARDemo，是用AR.js封装的，用户用手机相机扫描特殊制作的二维码显示Live2d模型。

Lived2dAR演示Demo

 

线下互动

这个是官方一段演示Live2d视频，可以在触摸屏上展示Live2d模型，用户可以和模型做互动。

线下Live2d模型互动

四、总结

Live2D技术对于2D立绘来说是一个非常好的补充，它可以给静态的图片赋予生命，特别适合在二次元的领域。在Web端的应用适合做成有互动的形式会比较趣，模型表情，动作，配音等信息均由美术人员输出，前端人员只需关注按需求调用模型指定指令即可。另外由于之前在业务上使用的都是Cubism 2版本的Live2d模型，其实官方早已经用Cubism 3版本的Live2d了，这里有官方的Demo，而且也有用PixiJS，有兴趣的可以看下。

相关参考：

赞 -
求经验 -

COPYRIGHT © 2019. ALL RIGHTS RESERVED.

点击“ . . . ”进行分享