vue-live2d 看板娘

一、看板

有时候看博客会发现网页右下角有一个动态的模型，通常是动漫角色或者小动物，ta 们会看向你的鼠标方向，偶尔还会讲讲笑话，谈谈人生哲理。

仔细想想，它使网页有了“生命”，不再只有干巴巴的文字。它会与进行读者互动，同你对话，比如当你面对一个按钮不知所措时，它会说“看看我写的文章吧~”；当你切换到其他页面再回来时，它会说“哇，你终于回来了~”。

写到这里你也许已经理解了为什么叫做”看板“。

二、live2d

是一种绘图渲染技术，类似 3D 的 2D 图像。

更多了解：https://zh.moegirl.org/Live2D，https://www.live2d.com/about/

每一个人物就是一个模型，每个模型又有不同的贴图，从而方便的切换角色和服装。

这项技术不仅可以用在网页上，还可以用在游戏、动画等等。可在官网（https://www.live2d.com/zh-CHS/download/）查看各种下载，同时官网提供了各种 SDK，方便在各平台上开发。

三、vue-live2d

方便用户在前端 vue 项目中添加看板娘。

之前添加看板娘功能时，没有发现可以在 vue 项目中直接使用的包，所以自己根据找到的资源进行了修改，同时也产生了制作和发布第一个 npm 包的想法，现已实现。

效果可查看上面（看板娘部分）的动图，也可以访问 在线 demo 使用平板或者电脑体验。

下面是代码地址，其中的 README.md 有较为详细的说明和使用示例，这里就不重复了。

https://github.com/evgo2017/vue-live2d
https://npmjs.org/package/vue-live2d

三、最后

这个拖了也蛮久了，之前重构代码结构，发现规范代码的工具内存超载，是组件核心依赖的 live2d.min.js 文件导致的，就开始着手 npm 包制作了。同时一大激励是我发现有类似名称的包，害怕再晚点不好取名字了，连夜提交，哈哈。

同时这次想法付诸实践的速度不错，构想的差不多就动手，边实践边调整，毕竟一口也吃不成大胖子。

尚在计划：自己搜集的短语，模型服装相关，代码优化等等。

目前版本有少量的可配置项，之后会继续完善，且采用官网的 SDK 作为核心文件。后续在 Github 项目内查看更新，欢迎 star。