CINC/scenes/testScenes/ResourceTestScene.js

// 资源包测试场景

export default class ResourceTestScene extends Phaser.Scene {
  constructor() {
    super({ key: 'ResourceTestScene' });
    this.resourceCategories = ['PNG/Enemies', 'PNG/Interface', 'PNG/Players', 'PNG/Tiles', 'PNG/Weapons', 'Sounds'];
    this.currentCategory = 0;
    this.assetsLoaded = false;
    this.loadedAssets = {
      images: [],
      sounds: []
    };
  }
  
  preload() {
    // 加载资源
    this.loadAssets();
    
    // 显示加载进度
    this.createLoadingUI();
  }
  
  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('#000000');
    
    // 创建主UI
    this.createMainUI();
    
    // 设置输入处理
    this.setupInput();
    
    // 如果资源已经加载完成，初始化资源显示
    if (this.assetsLoaded) {
      this.updateResourceDisplay();
    }
  }
  
  /**
   * 加载所有资源
   */
  loadAssets() {
    // 加载PNG资源
    this.load.image('enemies-tilemap', 'assets/PNG/Enemies/Tilemap/tilemap.png');
    this.load.image('enemies-tilemap-packed', 'assets/PNG/Enemies/Tilemap/tilemap_packed.png');
    
    this.load.image('interface-tilemap', 'assets/PNG/Interface/Tilemap/tilemap.png');
    this.load.image('interface-tilemap-packed', 'assets/PNG/Interface/Tilemap/tilemap_packed.png');
    
    this.load.image('players-tilemap', 'assets/PNG/Players/Tilemap/tilemap.png');
    this.load.image('players-tilemap-packed', 'assets/PNG/Players/Tilemap/tilemap_packed.png');
    
    this.load.image('tiles-tilemap', 'assets/PNG/Tiles/Tilemap/tilemap.png');
    this.load.image('tiles-tilemap-packed', 'assets/PNG/Tiles/Tilemap/tilemap_packed.png');
    
    this.load.image('weapons-tilemap', 'assets/PNG/Weapons/Tilemap/tilemap.png');
    this.load.image('weapons-tilemap-packed', 'assets/PNG/Weapons/Tilemap/tilemap_packed.png');
    
    // 加载前几个敌人瓦片
    for (let i = 0; i < 8; i++) {
      this.load.image(`enemy-tile-${i}`, `assets/PNG/Enemies/Tiles/tile_${String(i).padStart(4, '0')}.png`);
    }
    
    // 加载前几个界面瓦片
    for (let i = 0; i < 16; i++) {
      this.load.image(`interface-tile-${i}`, `assets/PNG/Interface/Tiles/tile_${String(i).padStart(4, '0')}.png`);
    }
    
    // 加载前几个玩家瓦片
    for (let i = 0; i < 8; i++) {
      this.load.image(`player-tile-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
    }
    
    // 加载前几个地形瓦片
    for (let i = 0; i < 16; i++) {
      this.load.image(`tile-${i}`, `assets/PNG/Tiles/Tiles/tile_${String(i).padStart(4, '0')}.png`);
    }
    
    // 加载前几个武器瓦片
    for (let i = 0; i < 8; i++) {
      this.load.image(`weapon-tile-${i}`, `assets/PNG/Weapons/Tiles/tile_${String(i).padStart(4, '0')}.png`);
    }
    
    // 加载音效资源
    this.load.audio('coin-a', 'assets/Sounds/coin-a.ogg');
    this.load.audio('coin-b', 'assets/Sounds/coin-b.ogg');
    this.load.audio('jump-a', 'assets/Sounds/jump-a.ogg');
    this.load.audio('shoot-a', 'assets/Sounds/shoot-a.ogg');
    this.load.audio('explosion-a', 'assets/Sounds/explosion-a.ogg');
    this.load.audio('hurt-a', 'assets/Sounds/hurt-a.ogg');
    
    // 加载完成回调
    this.load.on('complete', () => {
      this.assetsLoaded = true;
      this.loadingText.setText('资源加载完成！');
      // 只有在resourceDisplay初始化后才调用updateResourceDisplay
      if (this.resourceDisplay) {
        this.updateResourceDisplay();
      }
    });
  }
  
  /**
   * 创建加载UI
   */
  createLoadingUI() {
    // 加载文本
    this.loadingText = this.add.text(10, 10, '加载资源...', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    });
    this.loadingText.setScrollFactor(0, 0);
    this.loadingText.setDepth(100);
    
    // 加载进度条
    this.progressBar = this.add.rectangle(10, 40, 300, 20, 0x555555);
    this.progressBar.setOrigin(0, 0);
    this.progressBar.setScrollFactor(0, 0);
    this.progressBar.setDepth(100);
    
    this.progressFill = this.add.rectangle(10, 40, 0, 20, 0x00ff00);
    this.progressFill.setOrigin(0, 0);
    this.progressFill.setScrollFactor(0, 0);
    this.progressFill.setDepth(100);
    
    // 更新进度
    this.load.on('progress', (progress) => {
      this.progressFill.width = progress * 300;
      this.loadingText.setText(`加载资源... ${Math.round(progress * 100)}%`);
    });
  }
  
  /**
   * 创建主UI
   */
  createMainUI() {
    // 标题
    this.titleText = this.add.text(this.sys.game.config.width / 2, 50, '资源包测试场景', {
      fontSize: '32px',
      fill: '#ffffff',
      fontFamily: 'Arial',
      fontWeight: 'bold'
    });
    this.titleText.setOrigin(0.5, 0.5);
    this.titleText.setScrollFactor(0, 0);
    this.titleText.setDepth(10);
    
    // 分类选择
    this.categoryText = this.add.text(10, 70, `资源分类: ${this.resourceCategories[this.currentCategory]}`, {
      fontSize: '18px',
      fill: '#00ff00',
      fontFamily: 'Arial'
    });
    this.categoryText.setScrollFactor(0, 0);
    this.categoryText.setDepth(10);
    
    // 导航按钮
    this.createNavigationButtons();
    
    // 资源显示区域
    this.resourceDisplay = this.add.container(0, 0);
    this.resourceDisplay.setDepth(5);
    
    // 操作提示
    this.instructionText = this.add.text(10, this.sys.game.config.height - 100, 
      '← → 键：切换资源分类 | 空格键：返回启动场景 | 点击音效图标播放音效', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    });
    this.instructionText.setScrollFactor(0, 0);
    this.instructionText.setDepth(10);
  }
  
  /**
   * 创建导航按钮
   */
  createNavigationButtons() {
    // 上一页按钮
    this.prevButton = this.add.rectangle(10, 100, 120, 40, 0x333333);
    this.prevButton.setOrigin(0, 0);
    this.prevButton.setScrollFactor(0, 0);
    this.prevButton.setDepth(10);
    this.prevButton.setInteractive({ useHandCursor: true });
    
    this.prevButtonText = this.add.text(20, 110, '上一页', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    });
    this.prevButtonText.setScrollFactor(0, 0);
    this.prevButtonText.setDepth(11);
    
    // 下一页按钮
    this.nextButton = this.add.rectangle(140, 100, 120, 40, 0x333333);
    this.nextButton.setOrigin(0, 0);
    this.nextButton.setScrollFactor(0, 0);
    this.nextButton.setDepth(10);
    this.nextButton.setInteractive({ useHandCursor: true });
    
    this.nextButtonText = this.add.text(150, 110, '下一页', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    });
    this.nextButtonText.setScrollFactor(0, 0);
    this.nextButtonText.setDepth(11);
    
    // 按钮事件
    this.prevButton.on('pointerdown', () => {
      this.currentCategory = (this.currentCategory - 1 + this.resourceCategories.length) % this.resourceCategories.length;
      this.updateCategoryDisplay();
    });
    
    this.nextButton.on('pointerdown', () => {
      this.currentCategory = (this.currentCategory + 1) % this.resourceCategories.length;
      this.updateCategoryDisplay();
    });
    
    // 悬停效果
    this.prevButton.on('pointerover', () => this.prevButton.setFillStyle(0x555555));
    this.prevButton.on('pointerout', () => this.prevButton.setFillStyle(0x333333));
    this.nextButton.on('pointerover', () => this.nextButton.setFillStyle(0x555555));
    this.nextButton.on('pointerout', () => this.nextButton.setFillStyle(0x333333));
  }
  
  /**
   * 更新分类显示
   */
  updateCategoryDisplay() {
    this.categoryText.setText(`资源分类: ${this.resourceCategories[this.currentCategory]}`);
    this.updateResourceDisplay();
  }
  
  /**
   * 更新资源显示
   */
  updateResourceDisplay() {
    if (!this.assetsLoaded) return;
    
    // 清空当前显示的资源（如果resourceDisplay已经初始化）
    if (this.resourceDisplay) {
      this.resourceDisplay.removeAll(true);
    }
    
    // 根据当前分类显示资源
    switch (this.currentCategory) {
      case 0: // PNG/Enemies
        this.displayEnemyAssets();
        break;
      case 1: // PNG/Interface
        this.displayInterfaceAssets();
        break;
      case 2: // PNG/Players
        this.displayPlayerAssets();
        break;
      case 3: // PNG/Tiles
        this.displayTileAssets();
        break;
      case 4: // PNG/Weapons
        this.displayWeaponAssets();
        break;
      case 5: // Sounds
        this.displaySoundAssets();
        break;
    }
  }
  
  /**
   * 显示敌人资源
   */
  displayEnemyAssets() {
    const centerX = 0;
    const centerY = 0;
    
    // 显示瓦片地图
    this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'enemies-tilemap').setScale(0.5));
    this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'enemies-tilemap-packed').setScale(0.5));
    
    // 显示瓦片
    for (let i = 0; i < 8; i++) {
      const x = centerX - 200 + (i % 4) * 100;
      const y = centerY + 100 + Math.floor(i / 4) * 100;
      const tile = this.add.image(x, y, `enemy-tile-${i}`).setScale(2);
      this.resourceDisplay.add(tile);
      
      // 添加瓦片编号
      this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Tile ${i}`, {
        fontSize: '12px',
        fill: '#ffffff',
        fontFamily: 'Arial'
      }));
    }
  }
  
  /**
   * 显示界面资源
   */
  displayInterfaceAssets() {
    const centerX = 0;
    const centerY = 0;
    
    // 显示瓦片地图
    this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'interface-tilemap').setScale(0.5));
    this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'interface-tilemap-packed').setScale(0.5));
    
    // 显示瓦片
    for (let i = 0; i < 16; i++) {
      const x = centerX - 300 + (i % 8) * 75;
      const y = centerY + 100 + Math.floor(i / 8) * 75;
      const tile = this.add.image(x, y, `interface-tile-${i}`).setScale(1.5);
      this.resourceDisplay.add(tile);
    }
  }
  
  /**
   * 显示玩家资源
   */
  displayPlayerAssets() {
    const centerX = 0;
    const centerY = 0;
    
    // 显示瓦片地图
    this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'players-tilemap').setScale(0.5));
    this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'players-tilemap-packed').setScale(0.5));
    
    // 显示瓦片
    for (let i = 0; i < 8; i++) {
      const x = centerX - 200 + (i % 4) * 100;
      const y = centerY + 100 + Math.floor(i / 4) * 100;
      const tile = this.add.image(x, y, `player-tile-${i}`).setScale(2);
      this.resourceDisplay.add(tile);
      
      // 添加瓦片编号
      this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Player ${i}`, {
        fontSize: '12px',
        fill: '#ffffff',
        fontFamily: 'Arial'
      }));
    }
  }
  
  /**
   * 显示地形瓦片资源
   */
  displayTileAssets() {
    const centerX = 0;
    const centerY = 0;
    
    // 显示瓦片地图
    this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'tiles-tilemap').setScale(0.5));
    this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'tiles-tilemap-packed').setScale(0.5));
    
    // 显示瓦片
    for (let i = 0; i < 16; i++) {
      const x = centerX - 300 + (i % 8) * 75;
      const y = centerY + 100 + Math.floor(i / 8) * 75;
      const tile = this.add.image(x, y, `tile-${i}`).setScale(1.5);
      this.resourceDisplay.add(tile);
    }
  }
  
  /**
   * 显示武器资源
   */
  displayWeaponAssets() {
    const centerX = 0;
    const centerY = 0;
    
    // 显示瓦片地图
    this.resourceDisplay.add(this.add.image(centerX - 300, centerY - 200, 'weapons-tilemap').setScale(0.5));
    this.resourceDisplay.add(this.add.image(centerX + 300, centerY - 200, 'weapons-tilemap-packed').setScale(0.5));
    
    // 显示瓦片
    for (let i = 0; i < 8; i++) {
      const x = centerX - 200 + (i % 4) * 100;
      const y = centerY + 100 + Math.floor(i / 4) * 100;
      const tile = this.add.image(x, y, `weapon-tile-${i}`).setScale(2);
      this.resourceDisplay.add(tile);
      
      // 添加瓦片编号
      this.resourceDisplay.add(this.add.text(x - 20, y + 40, `Weapon ${i}`, {
        fontSize: '12px',
        fill: '#ffffff',
        fontFamily: 'Arial'
      }));
    }
  }
  
  /**
   * 显示音效资源
   */
  displaySoundAssets() {
    const centerX = 0;
    const centerY = 0;
    const soundNames = ['coin-a', 'coin-b', 'jump-a', 'shoot-a', 'explosion-a', 'hurt-a'];
    const soundLabels = ['硬币A', '硬币B', '跳跃', '射击', '爆炸', '受伤'];
    
    for (let i = 0; i < soundNames.length; i++) {
      const x = centerX - 200 + (i % 3) * 200;
      const y = centerY + Math.floor(i / 3) * 150;
      
      // 创建音效按钮
      const button = this.add.rectangle(x, y, 150, 80, 0x444444);
      button.setInteractive({ useHandCursor: true });
      button.soundKey = soundNames[i];
      this.resourceDisplay.add(button);
      
      // 添加标签
      this.resourceDisplay.add(this.add.text(x - 60, y - 20, soundLabels[i], {
        fontSize: '14px',
        fill: '#ffffff',
        fontFamily: 'Arial'
      }));
      
      this.resourceDisplay.add(this.add.text(x - 60, y, soundNames[i], {
        fontSize: '12px',
        fill: '#cccccc',
        fontFamily: 'Arial'
      }));
      
      // 添加播放提示
      this.resourceDisplay.add(this.add.text(x - 40, y + 20, '点击播放', {
        fontSize: '12px',
        fill: '#00ff00',
        fontFamily: 'Arial'
      }));
      
      // 按钮事件
      button.on('pointerdown', () => {
        this.sound.play(button.soundKey);
      });
      
      button.on('pointerover', () => {
        button.setFillStyle(0x666666);
      });
      
      button.on('pointerout', () => {
        button.setFillStyle(0x444444);
      });
    }
  }
  
  /**
   * 设置输入处理
   */
  setupInput() {
    // 键盘输入
    this.input.keyboard.on('keydown-LEFT', () => {
      this.currentCategory = (this.currentCategory - 1 + this.resourceCategories.length) % this.resourceCategories.length;
      this.updateCategoryDisplay();
    });
    
    this.input.keyboard.on('keydown-RIGHT', () => {
      this.currentCategory = (this.currentCategory + 1) % this.resourceCategories.length;
      this.updateCategoryDisplay();
    });
    
    this.input.keyboard.on('keydown-SPACE', () => {
      this.scene.start('BootScene');
    });
  }
  
  update() {
    // 每帧更新
  }
}