// ui/VirtualJoystick.js export class VirtualJoystick { constructor(scene, enabled = true) { this.scene = scene; this.isActive = false; this.base = null; this.knob = null; this.pointer = null; this.centerX = 0; this.centerY = 0; this.radius = 50; this.enabled = enabled; // 仅在启用时创建摇杆 if (this.enabled) { // 在所有设备上都显示摇杆 this.create(); this.bindEvents(); } } create() { const x = 200; const y = this.scene.scale.height - 200; this.centerX = x; this.centerY = y; this.base = this.scene.add.circle(x, y, this.radius, 0x444444, 0.5); this.knob = this.scene.add.circle(x, y, this.radius * 0.5, 0xff0000, 0.8); this.base.setScrollFactor(0); // 不随相机移动 this.knob.setScrollFactor(0); } bindEvents() { this.scene.input.on('pointerdown', (ptr) => { if (this.isInBase(ptr)) { this.pointer = ptr; this.isActive = true; } }); this.scene.input.on('pointermove', (ptr) => { if (this.isActive && this.pointer === ptr) { const dx = ptr.x - this.centerX; const dy = ptr.y - this.centerY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance > this.radius) { // 限制在圆内 const angle = Math.atan2(dy, dx); ptr.x = this.centerX + Math.cos(angle) * this.radius; ptr.y = this.centerY + Math.sin(angle) * this.radius; } this.knob.setPosition(ptr.x, ptr.y); // 发送相对方向(归一化) const dirX = dx / this.radius; const dirY = dy / this.radius; this.scene.events.emit('move-relative', { x: dirX, y: dirY }); } }); this.scene.input.on('pointerup', (ptr) => { if (this.pointer === ptr) { this.isActive = false; this.pointer = null; this.knob.setPosition(this.centerX, this.centerY); this.scene.events.emit('move-relative', { x: 0, y: 0 }); // 停止 } }); } isInBase(pointer) { const dx = pointer.x - this.centerX; const dy = pointer.y - this.centerY; return Math.sqrt(dx * dx + dy * dy) <= this.radius + 20; // 容差 } /** * 更新方法,用于在游戏循环中持续发送移动指令 */ update() { // 仅在启用时更新 if (this.enabled && this.isActive && this.pointer) { const dx = this.pointer.x - this.centerX; const dy = this.pointer.y - this.centerY; // 发送相对方向(归一化) const dirX = dx / this.radius; const dirY = dy / this.radius; this.scene.events.emit('move-relative', { x: dirX, y: dirY }); } } }