home archives github knives links
tags cubism javascript live2d
categories
only title title and content
Cubism3-SDK-for-web功能扩展

全局跟踪鼠标

修改事件监听(只针对鼠标)

lappdelegate.js

LAppDelegate.prototype.initialize = function () {
...
else {
canvas.onmousedown = onClickBegan;// 执行动画
// canvas.onmousemove = onMouseMoved;
canvas.onmouseup = onClickEnded;// 需要执行动画
// document.onmouseenter = onClickBegan;
document.onmousemove = onMouseMoved;
document.onmouseleave = onMouseLeave;// 回头
}
};

在鼠标移出后回头

lappdelegate.js中自定义回头函数

/**
* 回头,不触发点击事件
*/
function onMouseLeave(e) {
if (!LAppDelegate.getInstance()._view) {
_lapppal__WEBPACK_IMPORTED_MODULE_3__["LAppPal"].printLog("view notfound");
return;
}
var live2DManager = _lapplive2dmanager__WEBPACK_IMPORTED_MODULE_5__["LAppLive2DManager"].getInstance();
live2DManager.onDrag(0.0, 0.0);
}

调整位置和大小

比例放缩

  1. 现在lappdefine.js定义比例
  2. lapplive2dmanager.js中比例放缩
LAppLive2DManager.prototype.onUpdate = function () {
var scale_rate = _lappdefine__WEBPACK_IMPORTED_MODULE_3__["LAppDefine"].ScaleRate;
projection.scale(scale_rate, width / height * scale_rate);// 调整放缩倍数
};

点击位置比例放缩

lapplive2dmanager.js

LAppLive2DManager.prototype.onTap = function (x, y) {
var scale_rate = _lappdefine__WEBPACK_IMPORTED_MODULE_3__["LAppDefine"].ScaleRate;
x /= scale_rate;
y /= scale_rate;
...
};

背景透明

位于lappdelegate.jsrun

LAppDelegate.prototype.run = function () {
...
gl.clearColor(0.0, 0.0, 0.0, 0.0);// 背景颜色
...
}

切换模型

删除原切换按钮

删除的位置(TODO)

如果只删除图片会报错

讲切换模型绑定到按钮

lappdelegate.jsrun

LAppDelegate.prototype.run = function () {
// 自定义切换模型
var btnChange = document.getElementById("btnChange");
btnChange.addEventListener("click", function () {
var live2DManager = _lapplive2dmanager__WEBPACK_IMPORTED_MODULE_5__["LAppLive2DManager"].getInstance();
live2DManager.nextScene();
});
}

拖拽元素

引入jquery-ui

新建js文件JsManager.js

function myDrag()
{// 使模型能够拖拽
$(".drag").draggable(
{
containment: document.body
});
}

注意调整drag类的大小

修正鼠标点击位置

lappdelegate.jsonClickBegan

function onClickBegan(e) {
...
// LAppDelegate.getInstance()._captured = true;
// var posX = e.pageX;
// var posY = e.pageY;
// 修正鼠标点击位置判定
var rect = e.target.getBoundingClientRect();
var posX = e.clientX - rect.left;
var posY = e.clientY - rect.top;
...
}

修正鼠标跟随

lappdelegate.jsonMouseMoved

function onMouseMoved(e) {
// if (!LAppDelegate.getInstance()._captured) {// TODO
// return;
// }
if (!LAppDelegate.getInstance()._view) {
_lapppal__WEBPACK_IMPORTED_MODULE_3__["LAppPal"].printLog("view notfound");
return;
}
var tempDrag = document.getElementById("drag_" + "0");// TODO 获取拖拽元素
// var rect = document.body.getBoundingClientRect();
// var posX = e.clientX - rect.left;
// var posY = e.clientY - rect.top;
var posX = e.clientX - tempDrag.offsetLeft;
var posY = e.clientY - tempDrag.offsetTop;
console.log("lappdelegate onMouseMoved (" + posX + ", " + posY + "), target: " + e.target);
LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
}

直接计算拖拽元素在body上的相对偏差

多重canvas

修改鼠标的事件监听

lappdelegate.jsinitialize中将原sdk的=赋值改为addEventListener

else {// TODO 绑定到特定canvas
var tempNum = this._num;
if (tempNum == null) { tempNum.fuckshit(); };
canvas.addEventListener("mousedown", function () {
onClickBegan(window.event, tempNum);
}, false);
canvas.addEventListener("mouseup", function () {// 需要执行动画
onClickEnded(window.event, tempNum);
}, false);
// document.onmouseenter = onClickBegan;

document.body.addEventListener("mousemove", function () {// TODO
onMouseMoved(window.event, tempNum);
}, false);// 全局鼠标跟随

document.body.addEventListener("mouseleave", function () {// TODO
onMouseLeave(window.event, tempNum);
}, false);// 回头
}

调整速度

由于原版sdk在增加模型后会严重减慢动画速度,需要对sdk进行修改

可能的位置:

投影到多个canvas

点击事件修改

添加tips