// 角色动画测试场景 // 使用Player0和Player1图片作为移动帧 // 导入系统和UI组件 import { InputSystem } from '../../systems/InputSystem.js'; import { SelectionSystem } from '../../systems/SelectionSystem.js'; import { CommandSystem } from '../../systems/CommandSystem.js'; // 导入Unit类 import Unit from '../../objects/Unit.js'; export default class CharacterAnimationTestScene extends Phaser.Scene { constructor() { super({ key: 'CharacterAnimationTestScene' }); this.tileSize = 16; // 瓦片大小 this.player = null; // 玩家角色 this.inputSystem = null; // 输入系统 this.selectionSystem = null; // 选择系统 this.commandSystem = null; // 命令系统 this.keys = null; // 键盘按键 } preload() { // 加载玩家瓦片图片 console.log('加载玩家瓦片图片...'); // 加载Player0的动画帧(假设tile_0000.png到tile_0007.png是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的动画帧(假设tile_0008.png到tile_0015.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.createCharacterAnimations(); // 初始化系统 - 开启鼠标移动和选择 this.inputSystem = new InputSystem(this, { keyboard: true, mouse: true, selection: true }); this.selectionSystem = new SelectionSystem(this); this.commandSystem = new CommandSystem(this); // 创建单位组 this.unitGroup = this.add.group(); // 创建玩家角色 this.createPlayer(); // 设置输入控制 this.setupInput(); // 添加碰撞检测 this.physics.add.collider(this.unitGroup, this.unitGroup); // 显示提示信息 this.showInstructions(); } /** * 创建地面网格 */ createGrid() { // 创建网格线 const gridGraphics = this.add.graphics(); gridGraphics.lineStyle(1, 0x444444, 0.5); // 绘制垂直线 for (let x = 0; x <= 2000; x += this.tileSize) { gridGraphics.moveTo(x, 0); gridGraphics.lineTo(x, 2000); } // 绘制水平线 for (let y = 0; y <= 2000; y += this.tileSize) { gridGraphics.moveTo(0, y); gridGraphics.lineTo(2000, y); } } /** * 创建角色动画 */ createCharacterAnimations() { console.log('创建角色动画...'); // 创建Player0的移动动画 this.anims.create({ key: 'player0-move', frames: [ { key: 'player0-0' }, { key: 'player0-1' }, { key: 'player0-2' }, { key: 'player0-3' }, { key: 'player0-4' }, { key: 'player0-5' }, { key: 'player0-6' }, { key: 'player0-7' } ], frameRate: 10, repeat: -1 }); // 创建Player1的移动动画 this.anims.create({ key: 'player1-move', frames: [ { key: 'player1-0' }, { key: 'player1-1' }, { key: 'player1-2' }, { key: 'player1-3' }, { key: 'player1-4' }, { key: 'player1-5' }, { key: 'player1-6' }, { key: 'player1-7' } ], frameRate: 10, repeat: -1 }); console.log('角色动画创建完成'); } /** * 创建玩家角色 */ createPlayer() { console.log('创建玩家角色...'); // 创建玩家角色使用Unit类 this.player = new Unit(this, 0, 0, 'player0-0'); this.player.setScale(2); // 放大角色 this.player.setBounce(0.2); // 反弹效果 // 自动选中玩家 this.events.emit('select-unit', this.player); // 将玩家添加到单位组 this.unitGroup.add(this.player); console.log('玩家角色创建完成'); } /** * 设置输入控制 */ setupInput() { // 只保留必要的按键监听,键盘移动由InputSystem处理 this.cursors = this.input.keyboard.createCursorKeys(); // 切换角色按钮 this.createButton(this.sys.game.config.width - 200, 100, '切换角色', () => { this.switchCharacter(); }); // 返回启动场景按钮 this.createButton(this.sys.game.config.width - 200, 150, '返回启动场景', () => { this.scene.start('BootScene'); }); } /** * 创建按钮 */ createButton(x, y, text, callback) { // 按钮背景 const button = this.add.rectangle(x, y, 180, 40, 0x333333); button.setOrigin(0.5, 0.5); button.setScrollFactor(0, 0); button.setDepth(10); button.setInteractive({ useHandCursor: true }); // 按钮文本 const buttonText = this.add.text(x - 70, y - 15, text, { fontSize: '14px', fill: '#ffffff', fontFamily: 'Arial' }); buttonText.setScrollFactor(0, 0); buttonText.setDepth(11); // 按钮事件 button.on('pointerdown', callback); button.on('pointerover', () => { button.setFillStyle(0x555555); }); button.on('pointerout', () => { button.setFillStyle(0x333333); }); } /** * 切换角色 */ switchCharacter() { // 根据当前使用的纹理切换角色 if (this.player.anims.currentAnim && this.player.anims.currentAnim.key === 'player0-move') { // 切换到Player1 this.player.play('player1-move'); console.log('切换到Player1'); } else { // 切换到Player0 this.player.play('player0-move'); console.log('切换到Player0'); } } /** * 显示提示信息 */ showInstructions() { // 标题 this.add.text(20, 20, '角色动画测试场景', { fontSize: '20px', fill: '#ffffff', fontFamily: 'Arial', fontWeight: 'bold' }).setScrollFactor(0, 0).setDepth(11); // 操作提示 const instructions = [ 'WASD或方向键移动角色', '角色移动时播放动画', '点击"切换角色"按钮切换Player0和Player1', '角色动画使用Player0和Player1的图片作为移动帧', '按空格键返回启动场景' ]; 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.currentCharacterText = this.add.text(20, 200, '当前角色: Player0', { fontSize: '16px', fill: '#00ff00', fontFamily: 'Arial', fontWeight: 'bold' }).setScrollFactor(0, 0).setDepth(11); } update() { // 更新输入系统 this.inputSystem.update(); // 更新所有单位 this.unitGroup.getChildren().forEach(unit => { if (unit.update) { unit.update(); } unit.updateMovement(); // 处理角色动画 this.updateCharacterAnimation(unit); }); // 按空格键返回启动场景 if (this.cursors.space.isDown) { this.scene.start('BootScene'); } } /** * 更新角色动画 * @param {Object} unit - 单位对象 */ updateCharacterAnimation(unit) { // 检查单位是否在移动 const isMoving = Math.abs(unit.body.velocity.x) > 10 || Math.abs(unit.body.velocity.y) > 10; if (isMoving) { // 处理角色朝向 if (unit.body.velocity.x < -10) { unit.setFlipX(true); // 向左翻转 } else if (unit.body.velocity.x > 10) { unit.setFlipX(false); // 向右不翻转 } // 播放动画 if (!unit.anims.isPlaying) { // 根据当前角色播放对应的移动动画 if (this.currentCharacterText.text === '当前角色: Player0') { unit.play('player0-move'); } else { unit.play('player1-move'); } } } else { // 停止动画,保持当前帧 unit.anims.pause(); } } }