Live2D看板娘简化版(历史恢复文章)

发布于 2023-03-10  336 次阅读


该文章恢复至 2020年08月17日 的文章

注意:live2d_tips.js 文件由2D天天编写,内置模型来自网络收集!

应该有很多小伙伴喜欢在自己的博客上添加一个可爱的Live2D看板娘小人的

只不过因为荷包羞涩,购买的服务器或者虚拟主机带不起而不得不放弃(我自己)

为了解决这种情况,天天自己编写了一个轻量的可管理的Live2D程序

使用说明:

文件夹说明:

文件夹说明
live2d主体文件夹
js放JS依赖文件的
model模型文件夹

文件说明:

文件名说明
index.php演示文件,可以直接上传至服务器打开查看
style.css看板娘样式文件,可以编辑看板年的大小
live2d.js看板年依赖文件,看板娘核心
live2d_tips.jsLive2D核心管理文件
model.json模型列表,添加模型需要在里面添加

模型说明:

在 model 文件夹内预置了三个模型,分别为:

  • carcano
  • haruto
  • koharu

添加模型:

在网上查找 Live2D看板娘模型 ,

然后将下载的模型文件放进 model 文件夹内,

确保里面的 .json 文件名为 index.json (如果不是就重命名就行了),

然后在 model 文件夹内的 model.json 添加上模型的文件夹名称。

model.json 文件编辑方法:

{
    "smodel":[
        "carcano",
        "haruto",
        "koharu",
        "这是添加的模型文件夹名1",
        "这是添加的模型文件夹名2",
        "这是添加的模型文件夹名3",
        "以此类推。。。"
    ]
}

怎么样确定模型文件?

确定里面有这么多种文件说明是模型文件:

- - - - - - - - - - - - - -模型文件夹- - - - - - - - - - - -
|                              |                           |
moc文件夹  |          .mtn文件或mtn文件夹        |     .json文件
    |                          |
.moc文件 | xxx.xxx文件夹  |   .mtn文件
                |
             .png文件

.json文件是模型的结构,可以自行更改

texture_00.png 这个是模型的人物,如果服务器宽带较小的话可以将其压缩(我就是)

在线压缩图片:https://zhitu.isux.us/

压缩后可以选择webP格式的图片下载,然后再把后缀改为 .png 覆盖到原来的地方即可

修改看板娘大小:

修改 style.css 文件内的第一行中的 width:200px; 即可

使用方法:

下载 Live2D简化版.zip 文件,上传至服务器网站根目录,将live2d文件夹解压出来(当心别把index.php文件解压出来了,不然覆盖了原来的文件不要怪我!),在网站的脚页加上下面这条代码即可:

<script src="https://你的网站域名/live2d/js/live2d_tips.js"></script>

常见问题:

添加了无法显示?

请检查live2d文件夹是否正确放在 网站根目录 ,或者没有正确调用live2d_tips.js文件。

模型加载慢?

推荐将模型内的 texture_00.png 文件压缩,注意不要压成jpg格式或者白底的了,需要透明背景的.png格式的图片!

添加了模型后切换不出来?

按住 Ctrl+F5 刷新缓存即可,手机用户到 设置-隐私-清除缓存 清理缓存再刷新一下,然后点击更换模型就看到了,如果没有则是没有添加成功。

编辑了js文件或css样式大小刷新没效果?

也是清除缓存再刷新即可。

切换页面看板娘老是需要重新加载?

因为技术不到家,ajax异步加载不会写,所以每点开一个新页面都要重新加载。

当然,如果有哪位大佬会的话可以帮忙升级一下,然后分享给大家,谢谢!

哪里有模型下载?

百度一下即可。

当然也可以下载我之前分享的那些,比如:

网站插件-Live2D源码分享 – 初春云博客 (cv0.cn)
少女前线Live2D看板娘(历史恢复文章) – 初春云博客 (cv0.cn)

模型文件都是在model文件夹内。

添加了模型文件,也在model.json文件内添加了,刷新后为什么还是没有出来?

检查模型文件内的.json文件是否已经重命名为index.json

更多问题请打开控制台检查(按F12)错误信息。

是否可以把live2d文件夹放到其它文件夹或服务器?

可以,只不过需要修改live2d_tips.js文件内的第23、24、41、60、65、76和82行的文件路径,需要修改为绝对路径,不知道绝对路径是什么意思的百度一下就知道了。

有啥遗漏或问题都欢迎留言回复哦!

注意:更换和退出看板娘按钮有些浏览器不适配,有能力的可以自行适配!

下载地址:

蓝奏云

最后更新于 2023-03-10