CINC/scenes/testScenes/CharacterAnimationTestScene.js

// 角色动画测试场景
// 使用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();
    }
  }
}