Live2d-helper
live2d-helper@1.x.x版本如无重大bug基本不会再更新还是修吧,看着bug不舒服,新功能就没有了
@1.x.x版本只能显示2.x的live模型,如果需要显示3.x版本的模型请使用live2d-helper@2.x.x
基于官方 live2d.js(2.1) 的、更加简单易用的 live2d-helper,通过简单的配置在网页上显示 live2d(waifu)
不依赖任何其他框架,你只需要一个canvas元素和模型资源地址!就可以显示!
如何使用
下载 live2d-helper
npm install live2d-helper
准备 live2d 模型
基本上按照 demo 里面那样子放置资源即可
这里内置的 live2d.js 使用的是2.1
的版本模型
其他版本的模型可能不通用!
引入 live2d-helper
<script src="./dist/index.js"></script>
or
var loadLive2d = require("live2d-helper");
or
import loadLive2d from "live2d-helper";
简单版
<canvas id="canvasId" width="300" height="300"></canvas>
<script>
loadLive2d("canvasId", "baseUrl");
</script>
详细设置
html
<canvas id="live2d"></canvas>
javascript
loadLive2d({
canvas: "live2d",
baseUrl: "./model/kaguya",
model: "./model/kaguya/model.json",
imageUrl: "./model/kaguya",
soundUrl: "./model/kaguya",
allowSound: true,
interval: 30000,
idle: "idle",
width: "800",
height: "800",
globalFollowPointer: false,
scaling: true,
debug: {
DEBUG_LOG: false,
DEBUG_MOUSE_LOG: false
},
layout: {
width: "",
height: "",
x: "",
y: "",
center_x: "",
center_y: "",
top: "",
bottom: "",
left: "",
right: ""
},
view: {
VIEW_MAX_SCALE: 2,
VIEW_MIN_SCALE: 0.8,
VIEW_LOGICAL_LEFT: -1,
VIEW_LOGICAL_RIGHT: 1,
VIEW_LOGICAL_MAX_LEFT: -2,
VIEW_LOGICAL_MAX_RIGHT: 2,
VIEW_LOGICAL_MAX_BOTTOM: -2,
VIEW_LOGICAL_MAX_TOP: 2
},
binding: {
head: "flick_head",
face: "tap_face",
breast: ["tap_breast", "shake"],
belly: "tap_belly",
leg: function() {
console.log("hentai!");
}
},
autoLoadAudio: function() {
console.log("audio loaded");
},
initModelCallback(waifu) {
console.log(waifu);
console.log("加载完毕");
}
});
点击区域绑定模型动作和回调函数
想要模型有点击反馈,这步一定要做!
1、在模型初始化的时候传入 binding 字段绑定
loadLive2d({
"...": "...",
binding: {
head: {
motion: ["flick_head", "shake"],
callback: function({
hitArea,
motionPath,
motionName,
priority
}) {
console.log(hitArea,motionPath,motionName,priority);
return false
}
},
face: "tap_face",
breast: ["tap_breast", "shake"],
belly: "tap_belly",
leg: function() {
console.log("hentai!");
}
},
"...": "..."
});
2、直接修改 model.json 绑定
该方法不能绑定回调函数
// model.json
{
"...": "...",
"hit_areas": [
{ "name": "head", "id": "D_CORE.HEAD", "motion": "flick_head" },
{ "name": "face", "id": "D_CORE.FACE", "motion": "tap_face" },
{
"name": "breast",
"id": "D_CORE.BREAST",
"motion": ["tap_breast", "shake"]
},
{ "name": "belly", "id": "D_CORE.BELLY", "motion": "tap_belly" },
{ "name": "leg", "id": "D_CORE.LEG", "motion": "tap_leg" }
],
"...": "..."
}
// model.json
{
"...": "...",
"hit_areas_custom": {
"head_x": [-0.35, 0.6],
"head_y": [0.19, -0.2],
"body_x": [-0.3, -0.25],
"body_y": [0.3, -0.9],
"binding": {
"head": "thanking",
"body": ["tap_body", "thanking"]
}
},
"...": "..."
}
注意:
model.json和配置中的绑定会合并
进阶
loadLive2d 和 initModelCallback 将会返回一个对象,该对象包含了官方 demo 所有的属性和方法
为了方便,startRandomMotion 和 startMotion 都可以通过该对象直接使用
var waifu = loadLive2d("canvasId", "baseUrl");
waifu.startRandomMotion((motionName: string), (priority: number));
waifu.startMotion((motionName: string), (no: number), (priority: number));
官方名称 |
优先级 |
备注 |
PRIORITY_NONE |
0 |
无权执行 |
PRIORITY_IDLE |
1 |
可被 2,3 打断 |
PRIORITY_NORMAL |
2 |
只能被 3 打断 |
PRIORITY_FORCE |
3 |
只能被 3 打断 |
同一页面放置多个模型
需要等待第一个模型加载完毕再调用loadLive2d
loadLive2d({
name: '22',
...,
initModelCallback(){
console.log('22 loaded')
loadLive2d({
name: '33',
initModelCallback(){
console.log('22 & 33 loaded')
}
})
}
})