CINC/scenes/TmpScene.js

export default class TmpScene extends Phaser.Scene {
  constructor() {
    super({ key: 'TmpScene' });
  }

  preload() {
    // 加载资源
  }

  create() {
    // 创建场景
    // 物理世界和相机边界
    const worldSize = this.mapWidth * this.tileSize;
    this.physics.world.setBounds(0, 0, worldSize, worldSize);
    this.cameras.main.setBounds(0, 0, worldSize, worldSize);
    // 设置背景色
    this.cameras.main.setBackgroundColor('#222222');

    // 创建地图编辑区域
    console.log('创建地图编辑区域');
    this.createMapArea();

    // 创建瓦片选择区域
    console.log('创建瓦片选择区域');
    this.createTileSelectionArea();
  }

  createMapArea() {
    // 创建地图容器
    this.mapContainer = this.add.container(0, 0);
    this.mapContainer.setDepth(1);
    
    // 创建背景网格
    this.createGrid();
    
    // 创建地图层（用于放置瓦片）
    this.mapLayer = this.add.container(0, 0);
    this.mapContainer.add(this.mapLayer);
    
    // 初始化空地图
    this.mapData = [];
    for (let y = 0; y < this.mapHeight; y++) {
      this.mapData[y] = [];
      for (let x = 0; x < this.mapWidth; x++) {
        this.mapData[y][x] = -1; // -1表示空瓦片
      }
    }
  }

  //创建背景网格
  createGrid() {
    // 创建网格线
    const gridGraphics = this.add.graphics();
    gridGraphics.lineStyle(1, 0x444444, 0.5);
    
    // 绘制垂直线
    for (let x = 0; x <= this.mapWidth; x++) {
      gridGraphics.moveTo(x * this.tileSize, 0);
      gridGraphics.lineTo(x * this.tileSize, this.mapHeight * this.tileSize);
    }
    
    // 绘制水平线
    for (let y = 0; y <= this.mapHeight; y++) {
      gridGraphics.moveTo(0, y * this.tileSize);
      gridGraphics.lineTo(this.mapWidth * this.tileSize, y * this.tileSize);
    }
    
    this.mapContainer.add(gridGraphics);
  }

  createTileSelectionArea() {
    // 瓦片选择区域位置
    const tilePanelX = 10;
    const tilePanelY = 10;
    const chunkSize = 16;
    const tilePictureSizeX = 288;
    const tilePictureSizeY = 208;
    
    // 瓦片选择区域背景
    const tilePanel = this.add.rectangle(tilePanelX, tilePanelY, tilePictureSizeX, tilePictureSizeY+chunkSize, 0x111111, 0.8);
    tilePanel.setOrigin(0, 0);
    tilePanel.setScrollFactor(0, 0);
    tilePanel.setDepth(10);
    
    // 瓦片选择区域标题
    this.add.text(tilePanelX, tilePanelY, '瓦片选择', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial',
      fontWeight: 'bold'
    }).setScrollFactor(0, 0).setDepth(11);
    
    // 瓦片选择容器 - 注意：这是一个Container对象，可以使用removeAll方法
    this.tileSelectionContainer = this.add.container(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize);
    this.tileSelectionContainer.setScrollFactor(0, 0);
    this.tileSelectionContainer.setDepth(11);
    
    // 当前选中瓦片显示 - 改为使用Container容器，而不是Rectangle，这样可以使用removeAll方法
    this.selectedTileContainer = this.add.container(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize*2);
    this.selectedTileContainer.setScrollFactor(0, 0);
    this.selectedTileContainer.setDepth(11);
    
    // 添加选中瓦片背景
    const selectedTileBg = this.add.rectangle(0, 0, 16, 16, 0x333333);
    selectedTileBg.setOrigin(0, 0);
    selectedTileBg.setDepth(10);
    this.selectedTileContainer.add(selectedTileBg);
    
    this.add.text(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize, '当前选中瓦片:', {
      fontSize: '16px',
      fill: '#ffffff',
      fontFamily: 'Arial'
    }).setScrollFactor(0, 0).setDepth(11);
  }
}