feat(control) 小地图

ui/MiniMap.js

@@ -0,0 +1,129 @@
+// 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);
+      });
+    }
+  }
+}