【转载】L2Dwidget.js网页二次元看板娘的用法

2024-01-24 09:51 由超级VIP 发表于 #其他

最近新建了博客，https://yellowgg.cn，许久不更新的博客园想引个流，可以关注一波嗷。

发现某些blog网站左下方或者右下方出现的二次元卡通人物或萌萌阿猫，除了萌，还可以监听鼠标的行为，产生互动的现象。

1. 关于脚本的生成

L2Dwidget.min.js的源码：https://github.com/xiazeyu/live2d-widget.js.git

起初我以为在git中会找到这个脚本文件，但是却失望了。L2Dwidget.min.js 脚本是需要编译生成的。
首先我们把项目git下来(master分支)，此项目是基于nodeJs的，如果不会nodeJs，需要先去了解下。刚Git下来的目录，是没有 lib和
node_modules目录的。
接下来我们安装依赖和编译项目，在当前目录打开命令窗口，输入如下命令：

npm 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"
    //省略
  }
}

执行脚本，编译项目：

npm run build

运行后，会看到lib目录生成了，L2Dwidget.min.js和L2Dwidget.0.min.js脚本成功生成。
如果不想下载来编译，我们可以直接引入l2dwidget.js.org官网的js链接：


<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: 'https://unpkg.com/[email protected]/assets/haruto.model.json',
            "scale": 1
        },
        "display": {
            "position": "left",
            "width": 180,
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        },
    });
</script>

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目录下运行：

npm 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$',
            //触摸到对象
            '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} 才可以。

6. 换不同的人物

热门相关：扑倒老公大人：龙总，我爱你！暖君朔明朔明都市狐仙养成记