宅日记

关于live2D，我知道的都在这里了。

出自谁手

live2d.js 这个核心文件提供了 loadlive2d 函数，通过这个函数可以很方便的让live2D显示在页面上。

首先可以确定这个js不是live2D官方提供的看过官网SDK的都懂，网上live2D相关的文章都是只给了个js，没有源码。只有imjad大佬的文章提到了是他对hexo-helper-live2d 这个项目二次开发。

不过 hexo-helper-live2d 这个项目好像是根据 live2d-widget 二次开发的。所以真想看源码的可以去看看这2个项目好像已经弃坑。官方版本号都到4了。

网上的 live2d.js 我猜测都是imjad大佬这个版本改出来的。因为前面提到的项目里没有 loadlive2d 函数，想在页面上加载live2D模型都挺麻烦。而且 模型文件里hit_areas_custom 这个字段是imjad大佬增加的，官方模型里没有这个。

loadlive2d

这个函数接收3个参数，目标canvas的选择器，模型json文件，回调函数。

很多人想要的换模型/衣服功能都是重新调这个函数实现的。只需要改变第二个参数。可以是绝对地址或相对地址。如果不通过后端动态返回文件，就只能和我一样每套贴图对应一个json文件很傻B，但是没办法。

模型换衣服就是改模型json文件中 textures 这个数组里的图片，可以使用图床地址。虽然这个字段的值是数组，但是不能把全部贴图放进去，没有用，一个模型json文件只能放一个造型，可以把一个造型的图片分成多张图，但不能放多个造型进去。

如果不懂代码，那么直接使用 fghrsh 提供的api吧，缺点就是只能使用他提供的那几个模型，也不能改模型配置。想改就得自己部署后端。

如果不需要换模型功能，只加载一个模型,可以参考这个 https://github.com/galnetwen/Live2D

换模型/衣服

模型对应的贴图是有严格要求的，不能不同模型的混用，或者拿无关的图片代替。模型资源最底下有仓库地址。也可以用我修正过的。

因为我没有服务器，又不想使用别人的api提供的模型。所以换模型功能的实现的很蠢，每个模型/造型对应一个json文件，导致我live2d文件夹下100多个重复的json。

const live2dModel = [
  {
    name: 'aoba',
    textures: 1
  },
  {
    name: 'Pio',
    textures: 65,// 准备了多少json就写多少，不能乱写
  }
];
let currentModel = 0;
let currentTextures = 1;

name代表模型存放的文件夹名字，textures则是该模型有多少模型json文件，按照model1.json往下增加。

下面2个函数是换模型/衣服的。绑定给对应按钮即可。

function changeModel() {
  if(currentModel === live2dModel.length - 1) {
    currentModel = -1
  }
  currentModel++;
  currentTextures = 1;
  loadlive2d("live2d", `/live2d/${live2dModel[currentModel].name}/model1.json`);
}
function changeTextures() {
  if (live2dModel[currentModel].textures === 1) {
    return
  } else {
    if(currentTextures === live2dModel[currentModel].textures) {
      currentTextures = 0
    }
    currentTextures++;
    loadlive2d("live2d", `/live2d/${live2dModel[currentModel].name}/model${currentTextures}.json`);
  }
}

模型报错

Cannot read property ‘0’ of undefined

这个情况出现于点击页面上模型区域以外的地方，原因是模型json文件中缺少 hit_areas_custom 这个字段。格式如下

"hit_areas_custom": {
  "head_x":[-0.16, 0.25],
  "head_y":[0.43, -0.4],
  "body_x":[-0.2, -0.6],
  "body_y":[0.5, -1.2]
}

head_x 是模型头部左上角，head_y 是模型头部右下角。可点击区域是长方形或正方形，坐标系原点是canvas正中间。imjad原文说debug_momdel可以获取坐标，但是我不知道怎么开启。只能盲猜。

点击头部会报错 Cannot read property ‘startMotion’ of null

可能是web sdk的问题，把模型json文件中的 hit_aresa 这个字段删除，并且要保证有 hit_areas_custom 不然就无法触发模型的点击事件。

hit_aresa 这个才是官方的，但是不知道为什么会报错，既然第三方提供了自己指定点击区域的方法，那么官方的可以删除。hit_areas_custom 只能指定head和body，其他位置不支持。

第三方web sdk只支持 idle，flick_head，tap_body，sleepy这几个事件。

页面性能

用了live2D 页面性能爆炸是逃不了的，移动端可以通过判断屏幕大小来决定是否加执行 loadlive2d。

只是不加载模型满足不了我。毕竟 live2d.js 这个文件就150kb。以下是我优化live2d的方法。

function loadScript(url, cb, isMoudule) {
  const script = document.createElement('script');
  script.src = url;
  if (cb) script.onload = cb;
  if (isMoudule) script.type = 'module';
  script.async = true;
  document.body.appendChild(script);
}

function initLive2d() {
  if (window.screen.width > 950) {
    loadScript('/js/live2d.min.js', function (){
      loadlive2d("live2d", "/live2d/model/tia/model.json");
    }
  }
}

loadScript 函数用来动态加载js文件，window.onload的时候执行 initLive2d即可。这样完全不会影响页面加载速度。其他js也可以用这个函数来懒加载。

live2D的模型贴图建议去 tinypng 压缩一下。400多kb压缩到100kb完全不影响显示效果，我博客的模型贴图都是压缩过的。

也许有人发现了，我博客的live2d似乎比别人的更高清。其实和贴图质量无关，因为我的canva设置的大小是 800x800，然后再通过css设置height为340px把canvas缩小达到高清效果。

如果要缩放canvas，那么记得只能使用我博客这个live2d.js，其他版本的缩放canvas后无法正确触发点击事件，而且跟随鼠标的效果变得很僵硬。我这保存了好几个live2d.js，都是别人修改过的。我现在这个是谁修改的我也不清楚。。

模型来源

我的模型都是从这里下载的 https://github.com/imuncle/live2d。

关于live2d版本3的使用也可以参考这个仓库。

最后感谢 imjad 和 fghrsh 2位大佬。