![「微博客」前端中的Live2D与技术 1890tx7cs3-1024x675.png](https://qiuyedx.com/wp-content/uploads/2022/05/1890tx7cs3-1024x675.png)
Live2D,即为2D绘图渲染技术,游戏中例如崩坏3,碧蓝航线中与老婆交互就利用了live2d,通过前端的渲染,拼接,移动即可做出类似3d的效果,但是始终还是有缺陷,例如无法实现3d的转身,跳跃。
L2D的制作成本远低于3D,3D需要的建模,渲染,L2D可以方便完成,只需要对人物切片,然后前端重组,移动动画即可达到效果。
Web中的L2D结构
这是Live2D的材质结构:
![「微博客」前端中的Live2D与技术 vlwui1f4xe-1024x514.png](https://qiuyedx.com/wp-content/uploads/2022/05/vlwui1f4xe-1024x514.png)
EXP文件夹:
![「微博客」前端中的Live2D与技术 ka8xvx13jm.png](https://qiuyedx.com/wp-content/uploads/2022/05/ka8xvx13jm.png)
![「微博客」前端中的Live2D与技术 m9qm7mj9bt.png](https://qiuyedx.com/wp-content/uploads/2022/05/m9qm7mj9bt.png)
Exp,即为表情的动作,都是json文件,任意打开一个:F_FUN_SMILE.exp.json。
通过格式化json文件,看得出这是控制每一个贴图材质的控件。
![「微博客」前端中的Live2D与技术 s8p9hozana-1024x541.png](https://qiuyedx.com/wp-content/uploads/2022/05/s8p9hozana-1024x541.png)
Type | 类型 |
---|---|
Fade in/out | 动作淡入淡出 |
Params: | |
id | 动作对象控件,例如眼睛,嘴,笑容等 |
val | 动作幅度 |
calc | 未知 |
MOC文件夹:
![「微博客」前端中的Live2D与技术 fygyct2ohw.png](https://qiuyedx.com/wp-content/uploads/2022/05/fygyct2ohw.png)
这是一个存储模型和材质的文件,moc即为模型;
上面的文件夹即为材质。
![「微博客」前端中的Live2D与技术 2erriwckee.png](https://qiuyedx.com/wp-content/uploads/2022/05/2erriwckee.png)
材质中包括了人物的所有外饰信息。
mtn文件夹:
![「微博客」前端中的Live2D与技术 671wyfam2a.png](https://qiuyedx.com/wp-content/uploads/2022/05/671wyfam2a.png)
![「微博客」前端中的Live2D与技术 042s7i2dc2-1024x541.png](https://qiuyedx.com/wp-content/uploads/2022/05/042s7i2dc2-1024x541.png)
这个是控制组件淡入淡出,角度,比如人体的x,y,z轴的旋转,以及防止动作突发诡异现象,使用淡入淡出。
assets根目录的两个json文件:
![「微博客」前端中的Live2D与技术 ka8xvx13jm.png](http://qiuyedx.com/wp-content/uploads/2022/05/ka8xvx13jm.png)
model.json定义了模型,Physics.json定义了物理效果
![「微博客」前端中的Live2D与技术 kplefce3do-1024x541.png](https://qiuyedx.com/wp-content/uploads/2022/05/kplefce3do-1024x541.png)
![「微博客」前端中的Live2D与技术 ec650x5rq3-1024x541.png](https://qiuyedx.com/wp-content/uploads/2022/05/ec650x5rq3-1024x541.png)
这里相当于总控制器,控制了什么情况下对应什么动作的json,而动作的json定义了材质切片的运动,Physics物理效果就能更加真实地显示动画,比如头发摇摆。
Web中的呈现:
核心:live2d.js
![「微博客」前端中的Live2D与技术 5b59o5zy2w.png](https://qiuyedx.com/wp-content/uploads/2022/05/5b59o5zy2w.png)
可惜是加密的
![「微博客」前端中的Live2D与技术 utryz2a17r-1024x541.png](https://qiuyedx.com/wp-content/uploads/2022/05/utryz2a17r-1024x541.png)
我们无法进一步研究,但根据官方的文档来看,是运用webGL技术进行渲染的。
使用
首先要定义
<canvas id="live2d" width="280" height="250"></canvas>
然后引入js
<script src="./js/live2d.js"></script>
最后加载js:
loadlive2d("live2d", "./model.json");
注意:json等模型是具有版权的,要不自己制作,要不就请求授权,尤其是应用于商业用途要及其注意。
到此,介绍结束,更多可能需要大家一同探索。
本文转载自Ar-Sr-Na大佬,有删改。
如有侵权,请联系 qiuyedx@foxmail.com 删除。
Comments NOTHING