L2Dwidget.js网页看板娘的使用总结

最近在浏览某些博客的途中，发现了一个有趣的东西，网页上出现了一个非常可爱的动漫人物，眼睛还会随着鼠标移动，真是太可爱了。
百度上有很多关于这个看板娘的教程，但都是告诉添加L2Dwidget.min.js这个脚本，然后使用。关于 L2Dwidget.min.js 这个脚本的源码怎么来的，却没有说明。如果想直接使用的，可以跳过第一部分。

1.关于脚本的生成

L2Dwidget.min.js 的源码在https://github.com/xiazeyu/live2d-widget.js.git，起初我以为在git中会找到这个脚本文件，但是却失望了。L2Dwidget.min.js 脚本是需要编译生成的。
首先我们把项目git下来(master分支)，此项目是基于nodeJs的，如果不会nodeJs，需要先去了解下。
这是我git下来的目录：

刚Git下来的目录，是没有 lib和 node_modules目录的。
接下来我们安装依赖和编译项目，在当前目录打开命令窗口，输入如下命令：

cnpm install

命令成功后，node_modules目录就生成了，这是这个项目需要的依赖包。
打开package.json，可以看到这个项目的结构情况。可以看到有执行的脚本：

{
"scripts": {
    //省略
    "inst:dev": "npm install -g commitizen && npm install -g conventional-changelog-cli && npm install",
    "build:dev": "./node_modules/.bin/webpack --progress --colors",
    "build:prod": "./node_modules/.bin/webpack --env prod --progress --colors && npm run build:module",
    //省略
}

执行脚本，编译项目：

cnpm run build:dev

运行后，会看到lib目录生成了，L2Dwidget.min.js和L2Dwidget.0.min.js脚本成功生成。
（cnpm run build:dev 运行后，一直不退到输入界面，我也不清楚为什么。）

2.脚本使用

我们运行项目下的 dev.html文件，就可以看到效果。里面就一句代码：

L2Dwidget.init();

默认加载的是 live2d-widget-model-shizuku 这个模型，在 src/config/defaultConfig.js 中可以看到默认配置如下：

const defaultConfig = {
  model: {
    jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json',
    scale: 1,
  },
  display: {
    superSample: 2,
    width: 200,
    height: 400,
    position: 'right',
    hOffset: 0,
    vOffset: -20,
  },
  mobile: {
    show: true,
    scale: 0.8,
    motion: true,
  },
  name: {
    canvas: 'live2dcanvas',
    div: 'live2d-widget',
  },
  react: {
    opacity: 1,
  },
  dev: {
    border: false
  },
  dialog: {
    enable: false,
    script: null
  }
}

在 src/index.js 文件中可以看到配置的说明如下：

/**
 * The init function
 * @param {Object}   [userConfig] User's custom config 用户自定义设置
 * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径
 * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放
 * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级
 * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度
 * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
 * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右
 * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移
 * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移
 * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示
 * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放
 * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID
 * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID
 * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度
 * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
 * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框
 * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API
 * @return {null}
 */

3.model的替换

在https://github.com/xiazeyu/live2d-widget-models.git这个地址可以看到可以用的model，你可以Git下来，或者像文章中说的 cnpm 安装到node_modules。我这里用的cnpm安装，live2d-widget.js-master目录下运行：

cnpm install live2d-widget-model-koharu

成功后，在node_modules目录下可以看到live2d-widget-model-koharu文件夹。
在使用的时候，指定model的json位置即可：

L2Dwidget.init({
	"model": {
		"jsonPath": "node_modules/live2d-widget-model-koharu/assets/koharu.model.json"
	}
	//省略
});

直接双击dev.html是加载不出来的，必须基于服务。你可以用nodeJs构建一个简单的服务。
可以看到，可爱的看板娘出来了！！

4.弹出对话框

我们来让看板娘说话吧！
只有部分的看板娘可以触发 触摸身体和触摸头部的事件(默认的那个)，在使用的时候，加入下面的配置就可以了：

L2Dwidget.init({
	"dialog": {
    	"enable": true,
    	"script": {
			//每20s，显示一言（调用一言Api返回的句子）
			'every idle 20s': '$hitokoto$',
			//触摸到class='star'对象
			'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
			//触摸到身体
			'tap body': '害羞⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄',
			//触摸到头部
			'tap face': '~~'
      }
	}
});

5.手动调用对话框

我在编译好的脚本 L2Dwidget.min.js 中没有发现可以直接调用对话框的接口，所以打算修改源代码，增加弹出对话框的接口。打开src/index.js脚本，添加如下代码：

import { alertText } from './dialog';

/**
 * 弹出对话框
 */
alert(text){
	alertText(text);
}

添加的位置如下：

//代码省略
import device from 'current-device';
import { config, configApplyer }from './config/configMgr';
import { EventEmitter } from './utils/EventEmitter';
import { alertText } from './dialog';

//代码省略

/**
 * download current frame {@link L2Dwidget.captureFrame}
 * @return {null}
 */

  downloadFrame(){
    this.captureFrame(
      function(e){
        let link = document.createElement('a');
        document.body.appendChild(link);
        link.setAttribute('type', 'hidden');
        link.href = e;
        link.download = 'live2d.png';
        link.click();
      }
    );
  }

/**
 * 弹出对话框
 */

  alert(text){
	alertText(text);
  }
//代码省略

然后按照 #1 的方式， 重新编译生成L2Dwidget.min.js脚本文件，此时只需要执行cnpm run build:dev就可以。在使用的时候直接执行如下代码，可以看到看板娘弹出了对话框！

L2Dwidget.alert("我要吃包子~");

需要注意的是，L2Dwidget.alert() 需要配置文件的 dialog: {enable: true} 才可以。