mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-29 22:31:29 +08:00
514 lines
14 KiB
JavaScript
514 lines
14 KiB
JavaScript
// scenes/testScenes/CharacterClassTestScene.js
|
|
// 角色类测试场景
|
|
|
|
import { InputSystem } from '../../systems/InputSystem.js';
|
|
import Character from '../../objects/Character.js';
|
|
import { VirtualJoystick } from '../../ui/VirtualJoystick.js';
|
|
|
|
export default class CharacterClassTestScene extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'CharacterClassTestScene' });
|
|
this.character = null;
|
|
this.inputSystem = null;
|
|
this.cursors = null;
|
|
this.keys = null;
|
|
|
|
// 虚拟摇杆相关
|
|
this.virtualJoystick = null;
|
|
this.joysticks = [];
|
|
|
|
|
|
}
|
|
|
|
preload() {
|
|
// 加载玩家瓦片图片
|
|
console.log('加载角色资源...');
|
|
|
|
// 加载Player0的动画帧
|
|
for (let i = 0; i < 8; i++) {
|
|
this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
// 加载Player1的动画帧
|
|
for (let i = 8; i < 16; i++) {
|
|
this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
|
|
}
|
|
|
|
console.log('角色资源加载完成');
|
|
}
|
|
|
|
create() {
|
|
// 设置物理世界
|
|
const worldSize = 2000;
|
|
this.physics.world.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
|
this.cameras.main.setBounds(-worldSize, -worldSize, worldSize * 2, worldSize * 2);
|
|
this.cameras.main.centerOn(0, 0);
|
|
|
|
// 设置背景色
|
|
this.cameras.main.setBackgroundColor('#222222');
|
|
|
|
// 创建地面网格
|
|
this.createGrid();
|
|
|
|
// 创建角色动画
|
|
this.createAnimations();
|
|
|
|
// 初始化输入系统
|
|
this.inputSystem = new InputSystem(this, {
|
|
keyboard: true,
|
|
mouse: true,
|
|
selection: true
|
|
});
|
|
|
|
// 创建单位组
|
|
this.unitGroup = this.add.group();
|
|
|
|
// 初始化技能轮盘
|
|
this.skillWheel = {
|
|
centerX: 0,
|
|
centerY: 0,
|
|
radius: 60,
|
|
isActive: false,
|
|
activeSkill: null,
|
|
activePointer: null,
|
|
skillButtons: [],
|
|
skillInfo: {
|
|
1: { key: 'skill1', name: '火球术', color: 0xff0000 },
|
|
2: { key: 'skill2', name: '治疗术', color: 0x00ff00 }
|
|
}
|
|
};
|
|
|
|
// 创建角色
|
|
this.createCharacter();
|
|
|
|
// 创建虚拟摇杆
|
|
this.createVirtualJoystick();
|
|
|
|
// 创建技能轮盘
|
|
this.createSkillWheel();
|
|
// 绑定技能轮盘事件
|
|
this.bindSkillWheelEvents();
|
|
|
|
// 设置输入控制
|
|
this.setupInput();
|
|
|
|
// 监听move-to-point事件，实现鼠标点击移动
|
|
this.events.on('move-to-point', (x, y) => {
|
|
if (this.character) {
|
|
this.character.setTarget(x, y);
|
|
}
|
|
});
|
|
|
|
// 监听select-unit事件
|
|
this.events.on('select-unit', (unit) => {
|
|
console.log('单位已选中:', unit);
|
|
});
|
|
|
|
// 显示提示信息
|
|
this.showInstructions();
|
|
}
|
|
|
|
/**
|
|
* 创建地面网格
|
|
*/
|
|
createGrid() {
|
|
const gridGraphics = this.add.graphics();
|
|
gridGraphics.lineStyle(1, 0x444444, 0.5);
|
|
|
|
// 绘制垂直线
|
|
for (let x = 0; x <= 2000; x += 16) {
|
|
gridGraphics.moveTo(x, 0);
|
|
gridGraphics.lineTo(x, 2000);
|
|
}
|
|
|
|
// 绘制水平线
|
|
for (let y = 0; y <= 2000; y += 16) {
|
|
gridGraphics.moveTo(0, y);
|
|
gridGraphics.lineTo(2000, y);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 创建角色动画
|
|
*/
|
|
createAnimations() {
|
|
console.log('创建角色动画...');
|
|
|
|
// 创建Player0的移动动画
|
|
this.anims.create({
|
|
key: 'player0-move',
|
|
frames: [
|
|
{ key: 'player0-1' },
|
|
{ key: 'player0-2' }
|
|
],
|
|
frameRate: 10,
|
|
repeat: -1
|
|
});
|
|
|
|
// 创建Player0的技能动画
|
|
this.anims.create({
|
|
key: 'player0-skill',
|
|
frames: [
|
|
{ key: 'player0-3' },
|
|
{ key: 'player0-4' },
|
|
{ key: 'player0-5' }
|
|
],
|
|
frameRate: 15,
|
|
repeat: 0
|
|
});
|
|
|
|
console.log('角色动画创建完成');
|
|
}
|
|
|
|
/**
|
|
* 创建角色
|
|
*/
|
|
createCharacter() {
|
|
console.log('创建角色...');
|
|
|
|
// 角色配置
|
|
const characterConfig = {
|
|
texture: 'player0-0',
|
|
idleTexture: 'player0-0',
|
|
moveAnimation: 'player0-move',
|
|
health: 100,
|
|
mana: 50,
|
|
speed: 150,
|
|
attack: 20,
|
|
defense: 10,
|
|
collisionRadius: 14,
|
|
skills: [
|
|
{
|
|
id: 'skill1',
|
|
name: '火球术',
|
|
cost: 10,
|
|
cooldown: 3000,
|
|
castTime: 1000,
|
|
animation: 'player0-skill'
|
|
},
|
|
{
|
|
id: 'skill2',
|
|
name: '治疗术',
|
|
cost: 15,
|
|
cooldown: 5000,
|
|
castTime: 1500,
|
|
animation: 'player0-skill'
|
|
}
|
|
]
|
|
};
|
|
|
|
// 创建角色
|
|
this.character = new Character(this, 100, 100, characterConfig);
|
|
this.character.setScale(2);
|
|
|
|
// 将角色添加到单位组
|
|
this.unitGroup.add(this.character);
|
|
|
|
// 自动选中角色
|
|
this.character.setSelected(true);
|
|
|
|
console.log('角色创建完成');
|
|
}
|
|
|
|
/**
|
|
* 设置输入控制
|
|
*/
|
|
setupInput() {
|
|
// 键盘控制
|
|
this.cursors = this.input.keyboard.createCursorKeys();
|
|
|
|
// 添加WASD键监听
|
|
this.keys = {
|
|
a: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
|
|
d: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D),
|
|
w: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
|
|
s: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
|
|
space: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)
|
|
};
|
|
|
|
// 技能按键
|
|
this.input.keyboard.on('keydown-Q', () => {
|
|
this.character.castSkill('skill1');
|
|
});
|
|
|
|
this.input.keyboard.on('keydown-W', () => {
|
|
this.character.castSkill('skill2');
|
|
});
|
|
|
|
// 鼠标点击设置目标由InputSystem处理，通过move-to-point事件
|
|
}
|
|
|
|
/**
|
|
* 创建虚拟摇杆
|
|
*/
|
|
createVirtualJoystick() {
|
|
// 创建左侧移动摇杆
|
|
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.events.on('move-relative', (direction) => {
|
|
if (this.character) {
|
|
this.character.moveRelative(direction.x, direction.y);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 创建技能轮盘
|
|
*/
|
|
createSkillWheel() {
|
|
// 技能轮盘基础位置（右下角）
|
|
this.skillWheel.centerX = this.scale.width - 100;
|
|
this.skillWheel.centerY = this.scale.height - 100;
|
|
|
|
// 创建技能轮盘基础（默认隐藏，选中技能时显示）
|
|
this.skillWheel.base = this.add.circle(this.skillWheel.centerX, this.skillWheel.centerY, this.skillWheel.radius, 0x444444, 0.5);
|
|
this.skillWheel.base.setScrollFactor(0); // 不随相机移动
|
|
this.skillWheel.base.setDepth(100);
|
|
this.skillWheel.base.setVisible(false);
|
|
|
|
// 创建技能按钮（扇形排列：技能1-2在右下角左上方，大半径扇形分布）
|
|
const skills = [1, 2];
|
|
const startAngle = -Math.PI; // 起始角度（-90度，左）
|
|
const endAngle = -Math.PI / 2; // 结束角度（0度，上）
|
|
const angleRange = endAngle - startAngle;
|
|
const angleStep = angleRange / (skills.length - 1);
|
|
|
|
this.skillWheel.skillButtons = [];
|
|
for (let i = 0; i < skills.length; i++) {
|
|
const skillIndex = skills[i];
|
|
// 计算技能按钮的角度（扇形排列）
|
|
const angle = startAngle + i * angleStep;
|
|
const distance = 120; // 增大技能按钮距离中心的距离
|
|
const x = this.skillWheel.centerX + Math.cos(angle) * distance;
|
|
const y = this.skillWheel.centerY + Math.sin(angle) * distance;
|
|
|
|
// 创建技能按钮
|
|
const button = this.add.circle(x, y, 25, this.skillWheel.skillInfo[skillIndex].color, 0.6);
|
|
button.setScrollFactor(0);
|
|
button.setDepth(100);
|
|
|
|
// 添加技能按键文本
|
|
const text = this.add.text(x, y, skillIndex.toString(), {
|
|
fontSize: '14px',
|
|
fill: '#000000',
|
|
fontFamily: 'Arial',
|
|
fontWeight: 'bold'
|
|
})
|
|
.setOrigin(0.5, 0.5)
|
|
.setScrollFactor(0)
|
|
.setDepth(101);
|
|
|
|
// 保存技能信息
|
|
button.skillIndex = skillIndex;
|
|
button.skillKey = this.skillWheel.skillInfo[skillIndex].key;
|
|
button.x = x;
|
|
button.y = y;
|
|
|
|
// 添加点击事件
|
|
button.setInteractive({ useHandCursor: true });
|
|
button.on('pointerdown', (pointer) => {
|
|
// 选中技能后，将轮盘中心设置为技能按钮的中心位置
|
|
this.skillWheel.centerX = x;
|
|
this.skillWheel.centerY = y;
|
|
this.skillWheel.base.setPosition(x, y);
|
|
this.skillWheel.base.setVisible(true);
|
|
|
|
this.skillWheel.activeSkill = skillIndex;
|
|
this.startSkillCast(pointer);
|
|
});
|
|
|
|
this.skillWheel.skillButtons.push(button);
|
|
}
|
|
|
|
// 创建轮盘旋钮
|
|
this.skillWheel.knob = this.add.circle(this.skillWheel.centerX, this.skillWheel.centerY, this.skillWheel.radius * 0.5, 0xff0000, 0.8);
|
|
this.skillWheel.knob.setScrollFactor(0);
|
|
this.skillWheel.knob.setDepth(101);
|
|
this.skillWheel.knob.setVisible(false);
|
|
}
|
|
|
|
/**
|
|
* 绑定技能轮盘事件
|
|
*/
|
|
bindSkillWheelEvents() {
|
|
// 鼠标移动事件
|
|
this.input.on('pointermove', (ptr) => {
|
|
// 只有在技能轮盘激活时才处理
|
|
if (!this.skillWheel.isActive || this.skillWheel.activePointer !== ptr) {
|
|
return;
|
|
}
|
|
|
|
// 更新旋钮位置
|
|
const dx = ptr.x - this.skillWheel.centerX;
|
|
const dy = ptr.y - this.skillWheel.centerY;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance > this.skillWheel.radius) {
|
|
// 限制在圆内
|
|
const angle = Math.atan2(dy, dx);
|
|
const knobX = this.skillWheel.centerX + Math.cos(angle) * this.skillWheel.radius;
|
|
const knobY = this.skillWheel.centerY + Math.sin(angle) * this.skillWheel.radius;
|
|
this.skillWheel.knob.setPosition(knobX, knobY);
|
|
} else {
|
|
this.skillWheel.knob.setPosition(ptr.x, ptr.y);
|
|
}
|
|
});
|
|
|
|
// 鼠标释放事件
|
|
this.input.on('pointerup', (ptr) => {
|
|
// 只有在技能轮盘激活时才处理
|
|
if (!this.skillWheel.isActive || this.skillWheel.activePointer !== ptr) {
|
|
return;
|
|
}
|
|
|
|
// 完成技能释放
|
|
this.finishSkillCast();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 开始技能施法
|
|
*/
|
|
startSkillCast(pointer) {
|
|
// 设置技能轮盘状态
|
|
this.skillWheel.isActive = true;
|
|
this.skillWheel.activePointer = pointer;
|
|
|
|
// 显示旋钮和轮盘基础
|
|
this.skillWheel.knob.setVisible(true);
|
|
this.skillWheel.base.setVisible(true);
|
|
|
|
// 设置旋钮初始位置为轮盘中心
|
|
this.skillWheel.knob.setPosition(this.skillWheel.centerX, this.skillWheel.centerY);
|
|
|
|
// 根据技能索引改变旋钮颜色
|
|
if (this.skillWheel.activeSkill && this.skillWheel.skillInfo[this.skillWheel.activeSkill]) {
|
|
this.skillWheel.knob.fillColor = this.skillWheel.skillInfo[this.skillWheel.activeSkill].color;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 完成技能释放
|
|
*/
|
|
finishSkillCast() {
|
|
// 检查是否有激活的技能和角色
|
|
if (!this.skillWheel.activeSkill || !this.character) {
|
|
return;
|
|
}
|
|
|
|
// 计算技能释放方向
|
|
const dx = this.skillWheel.knob.x - this.skillWheel.centerX;
|
|
const dy = this.skillWheel.knob.y - this.skillWheel.centerY;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
// 只有当旋钮移动到一定距离时才释放技能
|
|
if (distance > 10) {
|
|
// 归一化方向向量
|
|
const directionX = dx / distance;
|
|
const directionY = dy / distance;
|
|
|
|
// 释放技能
|
|
this.character.castSkill(this.skillWheel.skillInfo[this.skillWheel.activeSkill].key);
|
|
}
|
|
|
|
// 重置技能轮盘状态
|
|
this.skillWheel.isActive = false;
|
|
this.skillWheel.activeSkill = null;
|
|
this.skillWheel.activePointer = null;
|
|
|
|
// 隐藏旋钮和轮盘基础
|
|
this.skillWheel.knob.setVisible(false);
|
|
this.skillWheel.base.setVisible(false);
|
|
}
|
|
|
|
/**
|
|
* 显示提示信息
|
|
*/
|
|
showInstructions() {
|
|
// 标题
|
|
this.add.text(20, 20, '角色类测试场景', {
|
|
fontSize: '20px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial',
|
|
fontWeight: 'bold'
|
|
}).setScrollFactor(0, 0).setDepth(11);
|
|
|
|
// 操作提示
|
|
const instructions = [
|
|
'使用左侧虚拟摇杆移动角色',
|
|
'鼠标点击设置移动目标',
|
|
'右侧红色按钮：施放火球术',
|
|
'右侧绿色按钮：施放治疗术',
|
|
'角色会自动播放移动动画',
|
|
'按空格键返回启动场景'
|
|
];
|
|
|
|
for (let i = 0; i < instructions.length; i++) {
|
|
this.add.text(20, 50 + i * 25, instructions[i], {
|
|
fontSize: '14px',
|
|
fill: '#ffffff',
|
|
fontFamily: 'Arial'
|
|
}).setScrollFactor(0, 0).setDepth(11);
|
|
}
|
|
|
|
// 显示角色属性
|
|
this.add.text(20, 200, '角色属性:', {
|
|
fontSize: '16px',
|
|
fill: '#00ff00',
|
|
fontFamily: 'Arial',
|
|
fontWeight: 'bold'
|
|
}).setScrollFactor(0, 0).setDepth(11);
|
|
}
|
|
|
|
update() {
|
|
// 更新输入系统
|
|
if (this.inputSystem) {
|
|
this.inputSystem.update();
|
|
}
|
|
|
|
// 更新虚拟摇杆
|
|
if (this.virtualJoystick) {
|
|
this.virtualJoystick.update();
|
|
}
|
|
|
|
// 键盘移动控制
|
|
if (this.cursors && this.keys) {
|
|
let moveX = 0;
|
|
let moveY = 0;
|
|
|
|
if (this.cursors.left.isDown || this.keys.a.isDown) {
|
|
moveX = -1;
|
|
} else if (this.cursors.right.isDown || this.keys.d.isDown) {
|
|
moveX = 1;
|
|
}
|
|
|
|
if (this.cursors.up.isDown || this.keys.w.isDown) {
|
|
moveY = -1;
|
|
} else if (this.cursors.down.isDown || this.keys.s.isDown) {
|
|
moveY = 1;
|
|
}
|
|
|
|
// 只有在虚拟摇杆未激活时才使用键盘控制
|
|
if (this.character && (!this.virtualJoystick || !this.virtualJoystick.isActive)) {
|
|
this.character.moveRelative(moveX, moveY);
|
|
}
|
|
}
|
|
|
|
// 更新角色
|
|
if (this.character) {
|
|
this.character.update();
|
|
}
|
|
|
|
// 按空格键返回启动场景
|
|
if (this.keys && this.keys.space.isDown) {
|
|
this.scene.start('BootScene');
|
|
}
|
|
}
|
|
}
|