mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-29 20:41:29 +08:00
test(ASTS) 攻击技能测试场景多点触摸测试
This commit is contained in:
chicrobot committed
1 parent
2a5084ab2e
commit
84d05df3bd
1 file changed
+222
-11
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user