CINC/ui/MiniMap.js

// ui/MiniMap.js

export class MiniMap {
  constructor(scene, options = {}) {
    this.scene = scene;
    this.worldSize = options.worldSize || 2000;
    this.mapSize = options.mapSize || 200;
    this.x = options.x || 10;
    this.y = options.y || 10;
    
    // 计算缩放比例（将世界坐标转换为小地图坐标）
    this.scale = this.mapSize / (this.worldSize * 2);
    
    // 创建小地图容器
    this.container = scene.add.container(this.x, this.y);
    this.container.setScrollFactor(0, 0); // 小地图固定在屏幕上
    
    // 创建小地图背景
    this.background = scene.add.rectangle(0, 0, this.mapSize, this.mapSize, 0x000000, 0.5);
    this.background.setOrigin(0, 0);
    this.background.setStrokeStyle(1, 0xffffff, 0.8);
    this.container.add(this.background);
    
    // 创建视口指示器
    this.viewport = scene.add.rectangle(0, 0, 0, 0, 0xffffff, 0.3);
    this.viewport.setOrigin(0, 0);
    this.viewport.setStrokeStyle(1, 0xffffff, 1);
    this.container.add(this.viewport);
    
    // 创建单位标记数组
    this.unitMarkers = [];
    
    // 设置交互
    this.setupInteractions();
    
    // 更新小地图（初始调用）
    this.update();
  }
  
  setupInteractions() {
    // 启用容器交互
    this.container.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.mapSize, this.mapSize), Phaser.Geom.Rectangle.Contains);
    
    // 点击小地图移动相机
    this.container.on('pointerdown', (pointer) => {
      this.handleMapClick(pointer);
    });
    
    // 拖动小地图移动相机
    this.container.on('pointermove', (pointer) => {
      if (pointer.isDown) {
        this.handleMapDrag(pointer);
      }
    });
  }
  
  handleMapClick(pointer) {
    // 将小地图坐标转换为世界坐标
    const worldX = (pointer.x - this.x) / this.scale - this.worldSize;
    const worldY = (pointer.y - this.y) / this.scale - this.worldSize;
    
    // 移动相机到点击位置
    this.scene.cameras.main.centerOn(worldX, worldY);
  }
  
  handleMapDrag(pointer) {
    // 将小地图坐标转换为世界坐标
    const worldX = (pointer.x - this.x) / this.scale - this.worldSize;
    const worldY = (pointer.y - this.y) / this.scale - this.worldSize;
    
    // 移动相机到拖动位置
    this.scene.cameras.main.centerOn(worldX, worldY);
  }
  
  update() {
    // 更新视口指示器位置和大小
    this.updateViewport();
    
    // 更新单位标记
    this.updateUnitMarkers();
  }
  
  updateViewport() {
    const camera = this.scene.cameras.main;
    
    // 计算相机视口在世界中的位置和大小
    const viewportLeft = camera.scrollX;
    const viewportTop = camera.scrollY;
    const viewportWidth = camera.width * camera.zoom;
    const viewportHeight = camera.height * camera.zoom;
    
    // 将世界坐标转换为小地图坐标
    const mapLeft = (viewportLeft + this.worldSize) * this.scale;
    const mapTop = (viewportTop + this.worldSize) * this.scale;
    const mapWidth = viewportWidth * this.scale;
    const mapHeight = viewportHeight * this.scale;
    
    // 更新视口指示器
    this.viewport.setPosition(mapLeft, mapTop);
    this.viewport.setSize(mapWidth, mapHeight);
  }
  
  updateUnitMarkers() {
    // 清除现有标记
    this.unitMarkers.forEach(marker => {
      marker.destroy();
    });
    this.unitMarkers = [];
    
    // 获取所有单位
    if (this.scene.unitGroup) {
      const units = this.scene.unitGroup.getChildren();
      
      units.forEach(unit => {
        // 将单位世界坐标转换为小地图坐标
        const mapX = (unit.x + this.worldSize) * this.scale;
        const mapY = (unit.y + this.worldSize) * this.scale;
        
        // 创建单位标记
        const marker = this.scene.add.circle(mapX, mapY, 2, 0xff0000, 1);
        marker.setOrigin(0.5, 0.5);
        
        // 将标记添加到容器和数组中
        this.container.add(marker);
        this.unitMarkers.push(marker);
      });
    }
  }
}