一、简介
1.1、Live2D
Live2D
是一种应用于电子游戏的绘图渲染技术,由日本Cybernoids
公司开发,通过一系列的连续图像和人物建模来生成一种类似二维图像的三维模型,换句话说就是2D的素材实现一定程度的3D效果,但只能是一定程度3D,因为Live 2D人物无法大幅度转身。
很多知名的动漫都是Live2D
游戏改编的或者反过来的,例如:《我的妹妹不可能有那么可爱》、《我的朋友很少》、《樱花庄的宠物女孩》等。
ive2d
官方网站就是live2d.com
,里面提供了live2d
开发和编辑软件(如Live2D Cubism editor和Live2D Euclideditor
),还有开发使用教程等,对相关制作感兴趣的可以看看。
2.1、看板娘
看板娘是一种职业和习惯称呼,也是ACGN
次文化中的萌属性之一。简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义。
模型预览:https://huaji8.top/post/live2d-plugin-2.0/
二、小白水平
hexo的官方是支持看板娘的,已经封装好了插件,但只是模型,不能说话、不能换装、功能较少。
2.1、准备工作
检查博客主目录下的package.json
是否有"hexo-helper-live2d"
:“^3.0.3”,依赖:
有的话可以先卸载:
npm uninstall hexo-helper-live2d
2.2、安装依赖
npm install --save hexo-helper-live2d
安装过程中可能遇到一些依赖性问题,按提示做就行
遇到这种就运行npm audit fix
,如果还不成功,会提示你用npm audit fix --force
,一般这个时候就成功了。
成功了之后可以看到当前目录的node_modules/
下有个live2d-widget
目录,这是动画的主配置:
这个时候是没有模型文件的,所以下一步是下载模型文件。
2.3、下载model文件
模型仓库 使用 npm install {packagename}
命令进行下载
模型预览:https://huaji8.top/post/live2d-plugin-2.0/
模型下载:https://github.com/xiazeyu/live2d-widget-models
模型文件可直接用npm安装:如下
npm install live2d-widget-model-shizuku //注意:shizuku下载对应看板娘名称
model
名字可在live2d-widget-models
中找到,也可点击live2d
看板娘模型预览来选择你喜欢的模型进行安装。
安装完成可以在node_modules/
下看到live2d-widget-model-shizuku
文件夹
2.4、添加live2d看板娘到hexo
配置Hexo
的主_config.yml
或者使用的主题的_config.yml
添加以下代码到配置文件中:
# Live2D看板娘
live2d:
enable: true
pluginModelPath: assets/
model:
#模板目录,在node_modules里
use: live2d-widget-model-shizuku //注意:shizuku运行对应看板娘名称
display:
position: right
width: 300
height: 600
mobile:
# 在手机端显示
show: false
rect:
opacity:0.7
2.5、查看效果
使用hexo g
生成文件,使用hexo server
即可在本地查看效果:
# 生成文件
hexo g
# 本地浏览
hexo s -p 555
打开浏览器访问:http://localhost:5555 即可看到效果:
2.6、发布
在本地找到满意的效果后,使用hexo d
将其发布到你的hexo服务器上,即可在外网查看了。
三、大神水平
大神作品,功能齐全:能说话、能换装、能玩游戏、能拍照、自动切换板娘、还能自定义。
3.1、下载文件
GitHub: 张书樵大神的项目
百度云:live2d-widget-master.zip 提取码:ziqi
解压到本地博客目录的 themes/matrey/source
下,并修改文件夹名为 live2d-widget
,修改项目中的 autoload.js
文件,如下:将 :
//注销
//const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
修改成:
//打开
const live2d_path = "/live2d-widget/";
3.2、新增内容
在/themes/matrey/layout/layout.ejs
中,新增如下内容:
<script src="/live2d-widget/autoload.js"></script>
3.3、主题配置文件
在 主题配置文件
中, /themes/matrey/_config.yml
新增如下内容:
live2d:
enable: true
3.4、可修改
想修改看板娘大小、位置、格式、文本内容等,可查看并修改 :waifu-tips.js
、 waifu-tips.json
和 waifu.css
。
3.5、效果
可以来我的博客看一看(* ̄︶ ̄): https://baiziqing.github.io/