| Live2D的介绍及在Web端的运用 | 您所在的位置：网站首页 › live2d与动态 › Live2D的介绍及在Web端的运用 |
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个步骤： 引用Live2D和pixi.js相关资源相关执行代码 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角色，还可以控制角色表情，动作，位置，模型是否反转等。
网页看板 网页看板就是放在网页内展示的角色形象，可以点击触发不同的表情动作，引导用户观看网页内容。 食物语手游官网看板小助手
AR 这是官方展示的一个Live2dARDemo，是用AR.js封装的，用户用手机相机扫描特殊制作的二维码显示Live2d模型。 Lived2dAR演示Demo
线下互动 这个是官方一段演示Live2d视频，可以在触摸屏上展示Live2d模型，用户可以和模型做互动。 线下Live2d模型互动 四、总结Live2D技术对于2D立绘来说是一个非常好的补充，它可以给静态的图片赋予生命，特别适合在二次元的领域。在Web端的应用适合做成有互动的形式会比较趣，模型表情，动作，配音等信息均由美术人员输出，前端人员只需关注按需求调用模型指定指令即可。另外由于之前在业务上使用的都是Cubism 2版本的Live2d模型，其实官方早已经用Cubism 3版本的Live2d了，这里有官方的Demo，而且也有用PixiJS，有兴趣的可以看下。 相关参考： https://www.live2d.com https://github.com/avgjs/pixi-live2d https://www.zhangxinxu.com/wordpress/2018/05/live2d-web-webgl-js/ |
【本文地址】