创建一个live2d看板娘

昨天整完的时候已经很晚了

就打算今天再来写了


WordPress用户可用的直接做法

live2d插件byChiang Weifang

可以在官方插件市场里搜到,安装完就能正常使用

我目前也是直接插件,把模型api换成自己本地的在使用


没有框架的做法

参考大佬的文章:小伟博客:给自己的网站加一个可爱的看板娘(血小板)

HCLonelyLive2dV3 支持moc3的源码

stevenjoezhang live2d-widget 看板娘前端源码1

fghrsh live2d_demo 看板娘前端源码2

拿前端源码1举例(建议仔细阅读readme文档)

因为我是winserver用户(别骂了linux真没学可参考楼上大佬)

所以直接复制粘贴或者ftp把前端代码上传到根文件夹就行

因为这里你还没有对文件进行修改,所以默认用的是作者大大的api

在子主题的页脚文件添上代码(建议在后台主题编辑器编辑,如果主题有地方外挂自然更好)

<script src="根目录/你命名的存放前端源码文件夹/autoload.js"></script>
</body>
</html>

刷新一下看看看板娘是不是出来了

如果出来了第一步就完成了

这个时候打开autoload.js文件进行修改

// 注意:live2d_path 参数应使用绝对路径
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
//const live2d_path = "/live2d-widget/";

1~3行这里需要把路径替换成上面上传前端源码的路径(注意是绝对路径)

        initWidget({
            waifuPath: live2d_path + "waifu-tips.json",
            //apiPath: "https://live2d.fghrsh.net/api/",
            cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
        });
    });
}
// initWidget 第一个参数为 waifu-tips.json 的路径,第二个参数为 API 地址
// API 后端可自行搭建,参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json

34行这里如果用的自建api的话,直接给cdnpath这行加//变注释

把上面api注释取消掉,地址改为api的地址

注意最后的/不能省略,小心逗号


本地自建api

fghrsh live2d_api 看板娘后端api源码

下载并上传大佬的源码,建议和前端放一块

然后像前文把地址给替换掉再载入

进入网站右键检查,选择neiwork,勾上xhr

刷新一遍看看这几个文件的路径是不是自己上传的api路径

如果是基本就完成了


jsDelivr+Github存放api

https://blog.csdn.net/qq_36759224/article/details/86936453

需要建立一个github仓库把api上传上去(需要学习git的用法)

具体做法可以参考上面

如果你不打算替换模型的话直接fork作者大大的就行

然后引用方式是这样的

https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/file

按照上文把autoload里的地方改一改就行,注意用的是cdnpath路径


替换模型

Live2d model资源下载(有的能用有的貌似不行)

xiaoskilive2d_models_collection资源下载(据说全能用)

fghrsh live2d_api 看板娘后端api源码

建议仔细阅读作者大大的文档

里面写了你需要重命名文件的规范

记得修改的时候一定要注意逗号

我昨天看半天没整好多半是逗号的锅

拿单模型单皮肤举例

model.1024文件夹里存放texture文件

直接重命名文件夹为textures

然后把model.json重命名为index

进入里面把texture的路径也给修改成textures

{
    "version":"Sample 1.0.0",
    "model":"model.moc",
    "textures":[
        "model.1024/texture_00.png"//就是这里
    ],
    "motions":{
   //以下省略一般不用去动

之后修改model_list.json

添加方法如下,用的是相对路径

{
    "models": [
        "gf/zb26",
        "gf/hk416",
        "gf/dsr50"
    ],
    "messages": [
        "指挥官,一起游泳吧",
        "指挥官,hk416前来报道",
        "指挥官,好久不见啊"
    ]
}

之后刷新网站试试,应该就可以正常使用了


几个需要注意的问题

jsdelivr支持的最大缓存貌似只有20M

不知道比较大的文件还能不能快速加载

放在本地的api加载比较慢,而且有泄露的风险

因为完全没加密啥的我又没学过web

所以我就不打算分享出来了(虽然审查元素还是能找得到的说)

最后感谢一下大佬的帮助

https://www.fghrsh.net/

《创建一个live2d看板娘》有1个想法

发表评论

您的电子邮箱地址不会被公开。