// 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); }); } } }