自定义Live2D插件配置并加载CDN数据

修复博客问题的时候，发现加载 ​​Live2D​​ 的模型报了一堆错误。仔细看，是由于看板娘的动作文件出错了，而且居然是大小写的问题，想必windows服务器就不会出现这个问题，所以模型的作者并没有发现。

既然都在批量修复问题了，那把这个问题一并处理掉吧。

更换插件

本来想着应该是个很快的过程，找到问题所在，如果可以修复，我也想继续使用这个模型。或者不可以，那我就换个模型继续用。

但是访问 ​​hexo-helper-live2d​​ - https://github.com/EYHN/hexo-helper-live2d 时，顶部黄条让我心头一颤，接着在 Readme 看到一条让人遗憾的说明。

This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

...

The project is not actively maintained. Please try similar projects stevenjoezhang/live2d-widget

emmm……看最近更新确实都是3年前了。于是循着他的推荐，我去访问了 ​​Live2D Widget​​ - https://github.com/stevenjoezhang/live2d-widget 这个项目。

该项目并不是hexo的特有插件，所以看起来自定义集成会比之前的插件略微麻烦。当然，如果只需要最基本的功能，则比之前还简单。只用将下面这一行代码加入 ​​html​​​ 页面的 ​​head​​​ 或 ​​body​​ 中，即可加载看板娘：

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

我以上方式尝试了一下，得到了下图的结果。

然而，我希望博客上的看板娘插件能干干净净的，不说废话，不用换人换装，更不用各种乱七八糟的功能。很明显这并不是我想要的。

略微纠结了一会要不要换回以前的插件，然后打定主意还是要更换为新的，毕竟有维护更新还是更有保障一些。

本地部署

对于线上托管版本，其实项目已经提供了一些可选配置。项目中的 ​​autoload.js​​​ 文件也大致都列出来了可选配置。​​autoload.js​​​ 会自动加载三个文件：​​waifu.css​​​，​​live2d.min.js​​​ 和 ​​waifu-tips.js​​​。​​waifu-tips.js​​​ 会创建 ​​initWidget​​​ 函数，这就是加载看板娘的主函数。​​initWidget​​ 函数接收一个 Object 类型的参数，作为看板娘的配置。

这些配置确实能够解决不要显示小工具的问题，但是自己说话的问题（原来的文本实在是太那个了，都不敢让我孩子看见），以及指定角色和服装，在这里并不能解决。

于是我还是走上了进阶道路——自定义配置。

首先当然是把项目克隆到本地：

git clone https://github.com/stevenjoezhang/live2d-widget.git

直接把整个目录复制到source文件夹下面就可以。依赖就不用安装了，毕竟我是要在自己的Hexo博客里运行。

试试引入

<script src="https://your.site.com/path/to/live2d-widget/autoload.js"></script>

部署运行没有问题，那么剩下就是真正的自定义阶段了。

自定义配置

要干活首先得安排好要干什么活儿，所以先分析一波它的demo，其中一个是基础例子，不管它，我们来看另外一个 ​​login.html​​。

live2d-widget
│  live2d.min.js      <-- 主文件
│  waifu.css          <-- 样式
├─demo
│      login.html     <-- 功能实现参考
└─src
        index.js      <-- 与login.html一起作为实现参考
        model.js      <-- 模型加载参考

上面的树形图我把不重要的文件都隐藏了，重要的都留下来了。这就是今天的主角们。

感觉废话也不用多说，直接来看我要干什么。

插入画布

调用 ​​insertAdjacentHTML​​ 方法来插入一个固定在左下角的画布。

document.body.insertAdjacentHTML("beforeend", `<div id="waifu" style="position:fixed;left:20px; bottom:0;z-index:2;">
            <div id="waifu-tips"></div>
            <canvas id="live2d" width="250" height="250"></canvas>
            <div id="waifu-tool"></div>
        </div>`);

// 这里是参考了demo代码，猜想可能是担心bottom 0不生效，又赋值了一遍。因为原来的css里面有个鼠标移上去以后的浮动效果
setTimeout(() => {
    document.getElementById("waifu").style.bottom = 0;
}, 0);

构造初始化配置方法

分析Demo我们可以知道，它通过api的方式获得参数，然后传参来创建模型。

那么先来构造一个初始化配置的方法。

function initConfig(config){
let { apiPath, cdnPath } = config;
let useCDN = false;
if (typeof cdnPath === "string") {
useCDN = true;
if (!cdnPath.endsWith("/")) cdnPath += "/";
} else if (typeof apiPath === "string") {
if (!apiPath.endsWith("/")) apiPath += "/";
} else {
      throw "Invalid initWidget argument!";
}
return {useCDN: useCDN, apiPath: apiPath, cdnPath: cdnPath};
}

这里我参考原作者允许了 ​​api​​​ 和 ​​cdn​​ 两种获取配置的方式，由传入参数来确定到底用哪种。接下来就调用这个方法初始化我们的配置参数。

const config = initConfig({
    // apiPath: "https://live2d.fghrsh.net/api/", // 这里是api方式请求，这个api的作者服务器已经用爱发电了很多年，已经说了很多次要废弃了，但是目前还运作着。为了他，也为了保证自己少出问题，我们还是选用cdn的方式。
    cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/",
});

构造模型加载方法

因为配置保留了 ​​api​​​ 和 ​​cdn​​ 两种方式，所以实现加载的时候，也同时考虑这两种方式。

但是通过分析cdn的文件，我们可以知道，要获取模型参数跟api方式是不一样的。api可以使用url传参的方式直接获取到对应模型，而api也会有自己的容错处理。但cdn就需要我们通过自己的方式来处理了。所以我们还构造了 ​​modelSelection​​ 这个方法。

async function loadModel(modelId, modelTexturesId, config) {
  localStorage.setItem("modelId", modelId); // 保留了demo 中本地存储配置的思路，随时可以将切换模型工具添加上
if (modelTexturesId === undefined) modelTexturesId = 0;
  localStorage.setItem("modelTexturesId", modelTexturesId);
if (config.useCDN) { // cdn load
      const response = await fetch(`${config.cdnPath}model_list.json`);
      const modelList = await response.json();
      const target = modelSelection(modelList.models[modelId], modelTexturesId);
      loadlive2d("live2d", `${config.cdnPath}model/${target}/index.json`);
      console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
} else { // api load
      loadlive2d("live2d", `${config.apiPath}get/?id=${modelId}-${modelTexturesId}`);
      console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
}
}

function modelSelection(obj, textureId) {
if(Array.isArray(obj)){
if(textureId < obj.length){
return obj[textureId]
}
return obj[Math.floor(Math.random() * obj.length)]
}
}

样式优化

我希望屏幕尺寸太小时不要显示看板娘，但是又不希望pc上改变浏览器尺寸会导致直接不加载，所以用css样式来实现。修改 ​​waifu.css​​ 。

@media (max-width: 768px) {
#waifu {
      display: none;
}
}

另外，我也不希望鼠标移上去会浮动。

#waifu {
    bottom: -1000px;
    left: 0;
    line-height: 0;
    margin-bottom: -10px;
    position: fixed;
    /* transform: translateY(3px);  注释掉 */
    transition: transform .3s ease-in-out, bottom 3s ease-in-out;
    z-index: 1;
}

#waifu:hover {
    /* transform: translateY(0);  注释掉 */
}

最后，记得把尺寸改成跟你的画布同样大小。

#live2d {
    height: 250px;
    width: 250px;
}

实现加载

最后，在页面加载完成后执行加载代码就可以了。

其中的模型ID和材质ID可以通过这个页面去查找，​​https://github.com/Akilarlxh/live2d_api/blob/master/model_list.json。​​

window.addEventListener("load", () => {
  localStorage.removeItem("modelId");
  localStorage.removeItem("modelTexturesId");
let state = 0, loading = false,
modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
modelId = 3;
modelTexturesId = 20;
}
  loadModel(modelId, modelTexturesId, config);
});

锵锵，完成。

总结

其实总体来说还是挺简单的，主要是读懂代码，看看原作者的方法都在做什么就行了。

思路 > 方法 > 实现。

收工。

[2022年12月16日原始发布于本作者博客]