michiyamakaren / live2dv3-kanban

live2d kanban musume on webpage

Live2Dv3 Kanban

支持Live2D Model3的网页看板娘插件。效果可参考道山神連的博客。

直接使用

若不需要自行构建，可以直接通过jsDelivr访问打包的js脚本并在项目中引用。

引用依赖脚本

在页面的header中引用所需的js脚本和CSS样式文件

<!-- Pollyfill script -->
<script src="https://unpkg.com/[email protected]/minified.js"></script>
<!-- Live2DCubismCore script -->
<script src="https://cdn.jsdelivr.net/gh/MichiyamaKaren/[email protected]/Demo/static/js/live2dcubismcore.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/MichiyamaKaren/[email protected]/Demo/static/js/canvas2image.js"></script>

<script src="https://cdn.jsdelivr.net/gh/MichiyamaKaren/[email protected]/dist/l2dkanban.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/MichiyamaKaren/[email protected]/Demo/static/css/live2d.css" />

设定模型路径

l2dkanban.min.js文件为本项目打包生成的文件，引入后会在window下注册字典变量L2DSettings用于设定模型和配置文件路径等信息，以及加载模型的函数setupKanban。

在项目中新建目录（假设目录名为models），将Live2D模型文件添加到models下，每个模型的目录名要和*.model3.json的前缀一致。例如，若有模型karen和hikari，则models下的目录结构应如

├── path/to/models
│   ├── karen
│   │   ├── karen.model3.json
│   │   ├── other...
│   ├── hikari
│   │   ├── hikari.model3.json
│   │   ├── other...

此时应在header中添加如下js代码进行设定

<script type="text/javascript">
    L2Dsettings.configPath = '/path/to/config.json';  // 设定配置文件路径
    L2Dsettings.resourcesPath = '/path/to/models/';  // 设定模型文件路径
    L2Dsettings.backImageName = '';
    L2Dsettings.modelDirs = 'karen,hikari'.split(',');  // 设定使用的模型名
    L2Dsettings.canvasId = 'live2d';

    L2Dsettings.onModelLoaded = (model) => {  // 应用初始表情和动作，需在live2d模型的model3.json文件中定义onLoad表情和动作组
        model.setExpression("onLoad");
        model.startMotion("onLoad", 0, 2);
    };

    window.onload = setupKanban;  // 自动加载模型
</script>

插入页面元素

在body中插入看板娘面板的HTML元素

<div class="live2d-main">
    <div class="live2d-tips"></div>
    <canvas id="live2d" class="live2d"></canvas>
    <div class="live2d-tool"></div>
</div>

canvas对象的id属性应与L2Dsettings.canvasId变量的值保持一致。

构建

• 下载项目代码（由于项目中包含子模块，需要使用git clone --recursive）
• 运行npm install下载需要的依赖库，再运行npm run build编译项目代码，这会在dist生成l2dkanban.js文件。
  • 运行npm run build:prod则会生成压缩的l2dkanban.min.js。
• 在Demo/demo.js中参考上一节的内容进行相关设置。
• 运行npm run serve启动本地服务，访问http://localhost:5000/Demo/即可查看看板娘效果。

配置

关于看板娘显示和对话内容的配置信息都写在Demo/config.json中，可以自行更改。可更改的内容为：

• global：Live2D模型显示相关配置

  • global.model
    • global.model.scale：模型的缩放率
    • global.model.scale：模型在X、Y两个方向的平移量。这里X、Y的坐标范围均为[-1, 1]。
  • global.canvas
    • global.canvas.height：canvas对象的高度，单位px。下面global中的长度值都是与这一高度的比值。
    • global.canvas.ratio：canvas的宽度
    • global.canvas.bottom,global.canvas.left：看板娘相对页面底部和左侧的距离
    • global.canvas.marginLeft：canvas的CSS margin-left属性
  • global.toolbar：工具栏的CSS属性

• tool：字典，描述工具按键的行为。key为工具名称，value中为相应配置

  通用配置：

  • icon：工具按键的图标相应的class名，参考Font Awesome
  • hover：鼠标悬停在按键上时显示的对话信息

  各个工具按键的自用配置：

  • randomMsg.message：列表，每一项为一条对话内容。text、exp、mtn分别对应对话文本、表情和动作。
  • drag.dragging_icon：鼠标拖动时改变的图标样式
  • close.message、close.msgTime、close.closeTime：点击关闭后显示对话信息message，持续时长msgTime，然后向下退出页面，动画时长closeTime。时间单位均为毫秒。

• onCopy：监听复制页面上的文字时的对话信息

引用的项目

src/live2d的代码分别来自

• Live2D/CubismWebFramework
• Live2D/CubismWebSamples

更改src/live2d/lapp的代码参考了文章：笔记：live2d4.0 sdk 博客园网页动画和live2d web端加载moc3模型。部分CSS样式参考了项目live2d-widget。

Demo/static/js/canvas2image.js来自项目canvas2image。