Skip to content

Commit 9ea2998

Browse files
stevenjoezhangstevenjoezhang
committed
Support new live2d event
1 parent 03abe1a commit 9ea2998

File tree

4 files changed

+101
-45
lines changed

4 files changed

+101
-45
lines changed

‎src/cubism2/LAppModel.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ class LAppModel extends L2DBaseModel {
352352

353353
logger.trace('Expression : ' + name);
354354

355-
this.expressionManager.startMotion(motion, false);
355+
this.expressionManager?.startMotion(motion, false);
356356
}
357357

358358
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -374,6 +374,18 @@ class LAppModel extends L2DBaseModel {
374374

375375
hitTest(id, testX, testY) {
376376
const len = this.modelSetting.getHitAreaNum();
377+
if (len == 0) {
378+
const hitAreasCustom = this.modelSetting.getHitAreaCustom();
379+
if (hitAreasCustom) {
380+
const x = hitAreasCustom[id + '_x'];
381+
const y = hitAreasCustom[id + '_y'];
382+
383+
if (testX > Math.min(...x) && testX < Math.max(...x) &&
384+
testY > Math.min(...y) && testY < Math.max(...y)) {
385+
return true;
386+
}
387+
}
388+
}
377389
for (let i = 0; i < len; i++) {
378390
if (id == this.modelSetting.getHitAreaName(i)) {
379391
const drawID = this.modelSetting.getHitAreaID(i);

‎src/cubism2/index.js

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global document, window, Live2D */
1+
/* global document, window, Event, Live2D */
22
import { L2DMatrix44, L2DTargetPoint, L2DViewMatrix } from './Live2DFramework.js';
33
import LAppDefine from './LAppDefine.js';
44
import MatrixStack from './utils/MatrixStack.js';
@@ -22,8 +22,8 @@ function normalizePoint(x, y, x0, y0, w, h) {
2222
targetY = dy / y0;
2323
}
2424
return {
25-
x: targetX,
26-
y: -targetY
25+
vx: targetX,
26+
vy: -targetY
2727
};
2828
}
2929

@@ -41,7 +41,6 @@ class Cubism2Model {
4141
this.projMatrix = null; /*new L2DMatrix44()*/
4242
this.deviceToScreen = null; /*new L2DMatrix44();*/
4343

44-
this.drag = false;
4544
this.oldLen = 0;
4645

4746
this._boundMouseEvent = this.mouseEvent.bind(this);
@@ -55,10 +54,8 @@ class Cubism2Model {
5554
this.canvas.addEventListener('mousewheel', this._boundMouseEvent, false);
5655
this.canvas.addEventListener('click', this._boundMouseEvent, false);
5756

58-
this.canvas.addEventListener('mousedown', this._boundMouseEvent, false);
5957
document.addEventListener('mousemove', this._boundMouseEvent, false);
6058

61-
this.canvas.addEventListener('mouseup', this._boundMouseEvent, false);
6259
document.addEventListener('mouseout', this._boundMouseEvent, false);
6360
this.canvas.addEventListener('contextmenu', this._boundMouseEvent, false);
6461

@@ -123,10 +120,8 @@ class Cubism2Model {
123120
if (this.canvas) {
124121
this.canvas.removeEventListener('mousewheel', this._boundMouseEvent, false);
125122
this.canvas.removeEventListener('click', this._boundMouseEvent, false);
126-
this.canvas.removeEventListener('mousedown', this._boundMouseEvent, false);
127-
this.canvas.removeEventListener('mousemove', this._boundMouseEvent, false);
128-
this.canvas.removeEventListener('mouseup', this._boundMouseEvent, false);
129-
this.canvas.removeEventListener('mouseout', this._boundMouseEvent, false);
123+
document.removeEventListener('mousemove', this._boundMouseEvent, false);
124+
document.removeEventListener('mouseout', this._boundMouseEvent, false);
130125
this.canvas.removeEventListener('contextmenu', this._boundMouseEvent, false);
131126

132127
this.canvas.removeEventListener('touchstart', this._boundTouchEvent, false);
@@ -227,13 +222,9 @@ class Cubism2Model {
227222
}
228223

229224
modelTurnHead(event) {
230-
this.drag = true;
231-
232225
const rect = this.canvas.getBoundingClientRect();
233226

234-
const target = normalizePoint(event.clientX, event.clientY, rect.left + rect.width / 2, rect.top + rect.height / 2, window.innerWidth, window.innerHeight);
235-
const vx = target.x;
236-
const vy = target.y;
227+
const { vx, vy } = normalizePoint(event.clientX, event.clientY, rect.left + rect.width / 2, rect.top + rect.height / 2, window.innerWidth, window.innerHeight);
237228

238229
logger.trace(
239230
'onMouseDown device( x:' +
@@ -249,13 +240,16 @@ class Cubism2Model {
249240

250241
this.dragMgr.setPoint(vx, vy);
251242
this.live2DMgr.tapEvent(vx, vy);
243+
244+
if (this.live2DMgr?.model.hitTest(LAppDefine.HIT_AREA_BODY, vx, vy)) {
245+
window.dispatchEvent(new Event('live2d:tapbody'));
246+
}
252247
}
253248

254249
followPointer(event) {
255250
const rect = event.target.getBoundingClientRect();
256251

257-
const vx = this.transformViewX(event.clientX - rect.left);
258-
const vy = this.transformViewY(event.clientY - rect.top);
252+
const { vx, vy } = normalizePoint(event.clientX, event.clientY, rect.left + rect.width / 2, rect.top + rect.height / 2, window.innerWidth, window.innerHeight);
259253

260254
logger.trace(
261255
'onMouseMove device( x:' +
@@ -269,36 +263,27 @@ class Cubism2Model {
269263
')',
270264
);
271265

272-
if (this.drag) {
273-
this.dragMgr.setPoint(vx, vy);
266+
this.dragMgr.setPoint(vx, vy);
267+
268+
if (this.live2DMgr?.model.hitTest(LAppDefine.HIT_AREA_BODY, vx, vy)) {
269+
window.dispatchEvent(new Event('live2d:hoverbody'));
274270
}
275271
}
276272

277273
lookFront() {
278-
if (this.drag) {
279-
this.drag = false;
280-
}
281-
282274
this.dragMgr.setPoint(0, 0);
283275
}
284276

285277
mouseEvent(e) {
286278
e.preventDefault();
287279

288280
if (e.type == 'mousewheel') {
289-
if (
290-
e.clientX < 0 ||
291-
this.canvas.clientWidth < e.clientX ||
292-
e.clientY < 0 ||
293-
this.canvas.clientHeight < e.clientY
294-
) {
295-
return;
296-
}
297-
298281
if (e.wheelDelta > 0) this.modelScaling(1.1);
299-
else this.modelScaling(0.9);
300-
} else if (e.type == 'mousemove') {
282+
else this.modelScaling(1);
283+
} else if (e.type == 'click' || e.type == 'contextmenu') {
301284
this.modelTurnHead(e);
285+
} else if (e.type == 'mousemove') {
286+
this.followPointer(e);
302287
} else if (e.type == 'mouseout') {
303288
this.lookFront();
304289
}

‎src/cubism2/utils/ModelSettingJson.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ class ModelSettingJson {
77
this.MODEL = 'model';
88
this.TEXTURES = 'textures';
99
this.HIT_AREAS = 'hit_areas';
10+
this.HIT_AREAS_CUSTOM = 'hit_areas_custom';
1011
this.PHYSICS = 'physics';
1112
this.POSE = 'pose';
1213
this.EXPRESSIONS = 'expressions';
@@ -55,6 +56,10 @@ class ModelSettingJson {
5556
return this.json[this.HIT_AREAS].length;
5657
}
5758

59+
getHitAreaCustom() {
60+
return this.json[this.HIT_AREAS_CUSTOM];
61+
}
62+
5863
getHitAreaID(n) {
5964
if (
6065
this.json[this.HIT_AREAS] == null ||

‎src/cubism5/index.js

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global document, window */
1+
/* global document, window, Event */
22

33
import { LAppDelegate } from '@demo/lappdelegate.js';
44
import { LAppSubdelegate } from '@demo/lappsubdelegate.js';
@@ -155,23 +155,77 @@ export class AppDelegate extends LAppDelegate {
155155
this._cubismOption = null;
156156
}
157157

158-
releaseEventListener() {
159-
document.removeEventListener('pointerdown', this.pointBeganEventListener, {
158+
transformOffset(e) {
159+
const subdelegate = this._subdelegates.at(0);
160+
const rect = subdelegate.getCanvas().getBoundingClientRect();
161+
const localX = e.pageX - rect.left;
162+
const localY = e.pageY - rect.top;
163+
const posX = localX * window.devicePixelRatio;
164+
const posY = localY * window.devicePixelRatio;
165+
const x = subdelegate._view.transformViewX(posX);
166+
const y = subdelegate._view.transformViewY(posY);
167+
return {
168+
x, y
169+
};
170+
}
171+
172+
onMouseMove(e) {
173+
const lapplive2dmanager = this._subdelegates.at(0).getLive2DManager();
174+
const { x, y } = this.transformOffset(e);
175+
const model = lapplive2dmanager._models.at(0);
176+
177+
lapplive2dmanager.onDrag(x, y);
178+
lapplive2dmanager.onTap(x, y);
179+
if (model.hitTest(LAppDefine.HitAreaNameBody, x, y)) {
180+
window.dispatchEvent(new Event('live2d:hoverbody'));
181+
}
182+
}
183+
184+
onMouseEnd(e) {
185+
const lapplive2dmanager = this._subdelegates.at(0).getLive2DManager();
186+
const { x, y } = this.transformOffset(e);
187+
lapplive2dmanager.onDrag(0.0, 0.0);
188+
lapplive2dmanager.onTap(x, y);
189+
}
190+
191+
onTap(e) {
192+
const lapplive2dmanager = this._subdelegates.at(0).getLive2DManager();
193+
const { x, y } = this.transformOffset(e);
194+
const model = lapplive2dmanager._models.at(0);
195+
196+
if (model.hitTest(LAppDefine.HitAreaNameBody, x, y)) {
197+
window.dispatchEvent(new Event('live2d:tapbody'));
198+
}
199+
}
200+
201+
initializeEventListener() {
202+
this.mouseMoveEventListener = this.onMouseMove.bind(this);
203+
this.mouseEndedEventListener = this.onMouseEnd.bind(this);
204+
this.tapEventListener = this.onTap.bind(this);
205+
206+
document.addEventListener('mousemove', this.mouseMoveEventListener, {
207+
passive: true
208+
});
209+
document.addEventListener('mouseout', this.mouseEndedEventListener, {
160210
passive: true
161211
});
162-
this.pointBeganEventListener = null;
163-
document.removeEventListener('pointermove', this.pointMovedEventListener, {
212+
document.addEventListener('pointerdown', this.tapEventListener, {
213+
passive: true
214+
});
215+
}
216+
217+
releaseEventListener() {
218+
document.removeEventListener('mousemove', this.mouseMoveEventListener, {
164219
passive: true
165220
});
166-
this.pointMovedEventListener = null;
167-
document.removeEventListener('pointerup', this.pointEndedEventListener, {
221+
this.mouseMoveEventListener = null;
222+
document.removeEventListener('mouseout', this.mouseEndedEventListener, {
168223
passive: true
169224
});
170-
this.pointEndedEventListener = null;
171-
document.removeEventListener('pointercancel', this.pointCancelEventListener, {
225+
this.mouseEndedEventListener = null;
226+
document.removeEventListener('pointerdown', this.tapEventListener, {
172227
passive: true
173228
});
174-
this.pointCancelEventListener = null;
175229
}
176230

177231
/**

0 commit comments

Comments
 (0)