diff --git a/scenes/testScenes/AttackSkillTestScene.js b/scenes/testScenes/AttackSkillTestScene.js index 006a2c3..c9b66aa 100644 --- a/scenes/testScenes/AttackSkillTestScene.js +++ b/scenes/testScenes/AttackSkillTestScene.js @@ -34,6 +34,13 @@ export default class AttackSkillTestScene extends Phaser.Scene { this.skills = {}; // 技能预览相关变量 this.skillPreview = null; + + // 多点触控相关变量 + this.activeTouches = new Map(); // 存储活跃的触摸点 + this.maxTouchPoints = 10; // 最大触摸点数量 + this.touchVisualizations = []; // 触摸点可视化元素 + this.joysticks = []; // 多个虚拟摇杆 + this.dualJoystickEnabled = false; // 禁用双摇杆，只保留左侧移动摇杆 } // create方法：当场景创建时自动调用，用于初始化游戏元素 @@ -140,8 +147,19 @@ export default class AttackSkillTestScene extends Phaser.Scene { // 不执行框选结束操作 return false; }); - // 创建虚拟摇杆实例 - this.virtualJoystick = new VirtualJoystick(this); + // 初始化多点触控处理 + this.initMultiTouch(); + + // 创建左侧移动摇杆 + this.virtualJoystick = new VirtualJoystick(this, true); + this.virtualJoystick.centerX = 150; + this.virtualJoystick.centerY = this.scale.height - 150; + this.virtualJoystick.base.setPosition(this.virtualJoystick.centerX, this.virtualJoystick.centerY); + this.virtualJoystick.knob.setPosition(this.virtualJoystick.centerX, this.virtualJoystick.centerY); + this.joysticks.push(this.virtualJoystick); + + // 创建触摸点可视化 + this.createTouchVisualizations(); // === 4. 创建角色 === // 创建一个单位组，用于管理游戏中的所有角色 @@ -282,6 +300,13 @@ export default class AttackSkillTestScene extends Phaser.Scene { this.virtualJoystick.update(); } + // 更新双摇杆状态 + this.joysticks.forEach(joystick => { + if (joystick.update) { + joystick.update(); + } + }); + // 相机锁定逻辑：如果有锁定状态且有当前控制的角色，则让相机跟随角色 import('../../systems/ControlMode.js').then(mod => { if (mod.cameraLocked && this.currentlyControlled) { @@ -562,31 +587,40 @@ export default class AttackSkillTestScene extends Phaser.Scene { /** * 释放技能 * @param {number} skillIndex 技能索引（1-4） + * @param {Object} direction 技能释放方向（可选） */ - castSkill(skillIndex) { + castSkill(skillIndex, direction = null) { // 检查是否有当前控制的角色 if (!this.currentlyControlled) return; // 根据当前控制角色类型和技能索引释放对应技能 if (this.currentlyControlled.type === 'yuange' || this.currentlyControlled.type === 'yuange-puppet') { - this.castYuangeSkill(skillIndex); + this.castYuangeSkill(skillIndex, direction); } else if (this.currentlyControlled.type === 'diaochan') { - this.castDiaochanSkill(skillIndex); + this.castDiaochanSkill(skillIndex, direction); } } /** * 释放元歌技能 * @param {number} skillIndex 技能索引（1-4） + * @param {Object} direction 技能释放方向（可选） */ - castYuangeSkill(skillIndex) { + castYuangeSkill(skillIndex, direction = null) { const yuange = this.characters.find(char => char.name === 'yuange'); - // 计算技能释放方向（基于技能轮盘中心到指针的相对方向） - const pointer = this.input.activePointer; - // 计算轮盘中心到指针的方向向量 - const directionX = pointer.x - this.skillWheel.centerX; - const directionY = pointer.y - this.skillWheel.centerY; + // 计算技能释放方向 + let directionX, directionY; + if (direction) { + // 使用传入的方向参数（来自右侧摇杆） + directionX = direction.x * 100; + directionY = direction.y * 100; + } else { + // 基于技能轮盘中心到指针的相对方向 + const pointer = this.input.activePointer; + directionX = pointer.x - this.skillWheel.centerX; + directionY = pointer.y - this.skillWheel.centerY; + } if (this.isControllingPuppet) { // 控制傀儡时的技能 @@ -1472,6 +1506,170 @@ export default class AttackSkillTestScene extends Phaser.Scene { }); } + /** + * 初始化多点触控处理 + */ + initMultiTouch() { + // 启用多点触控 + this.input.addPointer(this.maxTouchPoints - 1); // 默认为1，所以需要添加9个 + + // 监听触摸开始事件 + this.input.on('pointerdown', (pointer) => { + this.activeTouches.set(pointer.id, { + x: pointer.x, + y: pointer.y, + time: Date.now() + }); + this.updateTouchVisualization(); + }); + + // 监听触摸移动事件 + this.input.on('pointermove', (pointer) => { + if (this.activeTouches.has(pointer.id)) { + this.activeTouches.set(pointer.id, { + x: pointer.x, + y: pointer.y, + time: Date.now() + }); + this.updateTouchVisualization(); + } + }); + + // 监听触摸结束事件 + this.input.on('pointerup', (pointer) => { + this.activeTouches.delete(pointer.id); + this.updateTouchVisualization(); + }); + + // 监听触摸离开屏幕事件 + this.input.on('pointerout', (pointer) => { + // 只有当触摸点不是技能轮盘的activePointer时，才从activeTouches中删除 + if (!this.skillWheel || !this.skillWheel.isActive || this.skillWheel.activePointer !== pointer) { + this.activeTouches.delete(pointer.id); + this.updateTouchVisualization(); + } + }); + } + + /** + * 创建双虚拟摇杆 + */ + createDualJoysticks() { + // 创建左侧移动摇杆 + const leftJoystick = new VirtualJoystick(this, true); + leftJoystick.centerX = 150; + leftJoystick.centerY = this.scale.height - 150; + leftJoystick.base.setPosition(leftJoystick.centerX, leftJoystick.centerY); + leftJoystick.knob.setPosition(leftJoystick.centerX, leftJoystick.centerY); + this.joysticks.push(leftJoystick); + } + + /** + * 创建触摸点可视化 + */ + createTouchVisualizations() { + // 创建触摸点可视化元素 + for (let i = 0; i < this.maxTouchPoints; i++) { + const visualization = this.add.circle(0, 0, 30, 0xffffff, 0.5); + visualization.setStrokeStyle(2, 0x00ff00, 1); + visualization.setVisible(false); + visualization.setScrollFactor(0); + visualization.setDepth(102); + + const label = this.add.text(0, 0, i.toString(), { + fontSize: '14px', + fill: '#000000', + fontFamily: 'Arial', + fontWeight: 'bold' + }); + label.setOrigin(0.5, 0.5); + label.setVisible(false); + label.setScrollFactor(0); + label.setDepth(103); + + this.touchVisualizations.push({ circle: visualization, label: label }); + } + } + + /** + * 更新触摸点可视化 + */ + updateTouchVisualization() { + // 重置所有可视化元素 + this.touchVisualizations.forEach(viz => { + viz.circle.setVisible(false); + viz.label.setVisible(false); + }); + + // 更新活跃触摸点的可视化 + let i = 0; + for (const [id, touch] of this.activeTouches.entries()) { + if (i < this.touchVisualizations.length) { + const viz = this.touchVisualizations[i]; + viz.circle.setPosition(touch.x, touch.y); + viz.circle.setVisible(true); + viz.label.setPosition(touch.x, touch.y); + viz.label.setText(id.toString()); + viz.label.setVisible(true); + i++; + } + } + } + + /** + * 处理右侧摇杆输入 + */ + handleRightJoystickInput(direction) { + // 处理右侧摇杆输入 + // 这里可以实现攻击、技能释放等操作 + if (Math.abs(direction.x) > 0.1 || Math.abs(direction.y) > 0.1) { + // 创建一个临时的指示箭头 + this.createDirectionIndicator(direction); + + // 如果有当前控制的角色，使用右侧摇杆方向释放技能 + if (this.currentlyControlled) { + // 默认使用技能2（飞镖攻击） + this.castSkill(2, direction); + } + } + } + + /** + * 创建方向指示箭头 + */ + createDirectionIndicator(direction) { + // 创建方向指示箭头 + const centerX = this.scale.width - 150; + const centerY = this.scale.height - 150; + + const length = 100; + const endX = centerX + direction.x * length; + const endY = centerY + direction.y * length; + + // 检查是否已存在指示箭头 + if (this.directionIndicator) { + this.directionIndicator.clear(); + } else { + this.directionIndicator = this.add.graphics(); + this.directionIndicator.setScrollFactor(0); + this.directionIndicator.setDepth(9); + } + + // 绘制箭头 + this.directionIndicator.lineStyle(3, 0xffff00, 1); + this.directionIndicator.beginPath(); + this.directionIndicator.moveTo(centerX, centerY); + this.directionIndicator.lineTo(endX, endY); + this.directionIndicator.strokePath(); + + // 3秒后清除箭头 + this.time.delayedCall(300, () => { + if (this.directionIndicator) { + this.directionIndicator.clear(); + } + }); + } + /** * 窗口大小变化时的处理函数 * 当浏览器窗口大小改变时，调整游戏画布的大小以适应新窗口 @@ -1487,5 +1685,18 @@ export default class AttackSkillTestScene extends Phaser.Scene { if (this.controlInfoText) { this.controlInfoText.setPosition(10, window.innerHeight - 60); } + + // 更新摇杆位置 + this.joysticks.forEach((joystick) => { + // 左侧摇杆 + joystick.centerX = 150; + joystick.centerY = window.innerHeight - 150; + if (joystick.base) { + joystick.base.setPosition(joystick.centerX, joystick.centerY); + } + if (joystick.knob) { + joystick.knob.setPosition(joystick.centerX, joystick.centerY); + } + }); } } \ No newline at end of file