-
Notifications
You must be signed in to change notification settings - Fork 0
/
VirtualJoystick.js
61 lines (54 loc) · 1.46 KB
/
VirtualJoystick.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
class VirtualJoystickGraphic {
constructor(scene, x, y) {
this.scene = scene;
this.x = x;
this.y = y;
this.baseCircle = null;
this.stickCircle = null;
this.dragging = false;
this.draw();
}
draw() {
this.baseCircle = this.scene.add
.circle(this.x, this.y, 50, 0x888888)
.setAlpha(0.5);
this.stickCircle = this.scene.add
.circle(this.x, this.y, 25, 0xcccccc)
.setAlpha(0.5)
.setInteractive();
this.scene.input.setDraggable(this.stickCircle);
this.stickCircle.on("dragstart", (pointer, dragX, dragY) => {
this.dragging = true;
});
this.stickCircle.on("drag", (pointer, dragX, dragY) => {
const distance = Phaser.Math.Distance.Between(
this.x,
this.y,
dragX,
dragY
);
if (distance < 50) {
this.stickCircle.x = dragX;
this.stickCircle.y = dragY;
} else {
const angle = Phaser.Math.Angle.Between(this.x, this.y, dragX, dragY);
this.stickCircle.x = this.x + 50 * Math.cos(angle);
this.stickCircle.y = this.y + 50 * Math.sin(angle);
}
});
this.stickCircle.on("dragend", () => {
this.dragging = false;
this.stickCircle.x = this.x;
this.stickCircle.y = this.y;
});
}
show() {
this.baseCircle.setAlpha(1);
this.stickCircle.setAlpha(1);
}
hide() {
this.baseCircle.setAlpha(0);
this.stickCircle.setAlpha(0);
}
}
export default VirtualJoystickGraphic;