文章目录
一、live2d简介
Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。
示例:原博大大官网
根据鼠标热键进行互动
二、使用教程
-
下载(博客主目录,git bash here)
npm install --save hexo-helper-live2d
-
下载模型
大模型:https://github.com/summerscar/live2dDemo
小模型:https://github.com/EYHN/hexo-helper-live2d -
在主目录下新建目录
live2d_models/
,将需要的模型复制到此处
-
请向主目录的 _config.yml 文件末尾粘贴:
live2d: ##自定义看板娘动画 enable: true scriptFrom: local ##主目录 pluginRootPath: live2d_models/ ##模型目录 pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false debug: false model: use: live2d-widget-model-koharu ##对应的模型名称 display: position: left ##居右 width: 80 ##宽度 height: 120 ##高度 mobile: show: true ##移动端是否显示 react: opacity: 0.7
-
发布hexo
ok!简单版的看板娘弄好了,接下来是加强版:换装互动:https://github.com/stevenjoezhang/live2d-widget
扫描二维码关注公众号,回复: 9140201 查看本文章
三、加强版看板娘
-
卸载
live2dnpm uninstall hexo-helper-live2d
-
下载大神优化版live2d-widget;
其次, 在主目录\themes\sakura\source
目录下新建目录live2d-widget;
最后,将下载内容解压到该目录下。
-
修改autoload.js文件,将大神路径改为绝对路径
说明:这个绝对路径是编译后 根目录 位置在themes/sakura/source
// 注意:live2d_path 参数应使用绝对路径 //const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/"; const live2d_path = "/live2d-widget/";
-
修改
\MyWeb\themes\sakura\layout\_partial
目录下的head.ejs<!--自定义看板娘--> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="/live2d-widget/autoload.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
next主题需要修改两处,可参考这里。
-
在
\MyWeb\_config.yml
文末添加live2d: ##自定义看板娘动画 enable: true
运行效果:
-
想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。
其实看板娘可以侧边隐藏,对样本的修改影响也不大。