diff --git a/scenes/storeScenes/Control.js b/scenes/storeScenes/Control.js index 8daa10e..418dee6 100644 --- a/scenes/storeScenes/Control.js +++ b/scenes/storeScenes/Control.js @@ -4,6 +4,7 @@ * 允许用户控制角色 */ import BreatheLife from './BreatheLife.js' +import Joystick from './Joystick.js' export default class Control extends BreatheLife { constructor(sceneKey = 'Control') { // 场景相关 @@ -38,6 +39,9 @@ export default class Control extends BreatheLife { const { x, y } = this.input.activePointer this.handleClick(x, y) }) + + // 添加摇杆 + this.addJoystick() } /** @@ -89,4 +93,12 @@ export default class Control extends BreatheLife { }) } } + /** + * 添加摇杆 + */ + addJoystick() { + this.joystick = new Joystick(this, 100, this.game.config.height - 100, 50, 0x888888, 0xcccccc) + this.joystick.createJoystick(this.UIDepth) // 创建并设置摇杆层级为UI层 + this.joystick.listenJoystickInput() + } } \ No newline at end of file diff --git a/scenes/storeScenes/Joystick.js b/scenes/storeScenes/Joystick.js new file mode 100644 index 0000000..b388dc0 --- /dev/null +++ b/scenes/storeScenes/Joystick.js @@ -0,0 +1,79 @@ +export default class Joystick { + constructor(scene, x, y, radius, baseColor, thumbColor) { + this.scene = scene + this.x = x + this.y = y + this.radius = radius + this.baseColor = baseColor + this.thumbColor = thumbColor + } + /** + * 创建摇杆,设置层级 + */ + createJoystick(layer = 100) { + // 创建基座 + this.joystickBase = this.scene.add.circle(0, 0, this.radius, this.baseColor) + this.joystickBase.setPosition(this.x, this.y) + // 创建按钮 + this.joystickButton = this.scene.add.circle(0, 0, this.radius / 2, this.thumbColor) + this.joystickButton.setPosition(this.x, this.y) + // 设置层级 + this.joystickBase.setDepth(layer) + this.joystickButton.setDepth(layer) + } + /** + * 获取摇杆归一化方向与力度 + * @returns {Object} 归一化方向 {x, y} 与力度 magnitude + */ + getJoystickDirection() { + // 获取摇杆方向,归一化 + const direction = { + x: this.joystickButton.x - this.joystickBase.x, + y: this.joystickButton.y - this.joystickBase.y, + } + // 计算力度 + const magnitude = Math.sqrt(direction.x ** 2 + direction.y ** 2) + // 归一化方向 + direction.x /= magnitude + direction.y /= magnitude + return {direction, magnitude} + } + /** + * 重置摇杆位置 + */ + resetJoystick() { + this.joystickButton.setPosition(this.x, this.y) + } + /** + * 监听摇杆输入 + */ + listenJoystickInput() { + // 监听按钮按下事件 + this.joystickButton.on('pointerdown', (pointer) => { + this.joystickButton.setPosition(pointer.x, pointer.y) + }) + // 监听按钮移动事件 + this.joystickButton.on('pointermove', (pointer) => { + // 计算摇杆按钮到基座中心的距离 + const dx = pointer.x - this.x + const dy = pointer.y - this.y + const distance = Math.sqrt(dx * dx + dy * dy) + + if (distance > this.radius) { + // 限制在基座范围内 + const angle = Math.atan2(dy, dx) + this.joystickButton.setPosition( + this.x + this.radius * Math.cos(angle), + this.y + this.radius * Math.sin(angle) + ) + } else { + // 在基座范围内,跟随手指 + this.joystickButton.setPosition(pointer.x, pointer.y) + } + }) + // 监听按钮松开事件 + this.joystickButton.on('pointerup', () => { + this.resetJoystick() + }) + } +} \ No newline at end of file