// 测试场景:迷雾测试 import Unit from '../../objects/Unit.js'; import { InputSystem } from '../../systems/InputSystem.js'; import { SelectionSystem } from '../../systems/SelectionSystem.js'; import { CommandSystem } from '../../systems/CommandSystem.js'; export default class FogOfWarTestScene extends Phaser.Scene { constructor() { super({ key: 'FogOfWarTestScene' }); } create() { // 创建玩家纹理 if (!this.textures.exists('player')) { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#000000ff'; ctx.beginPath(); ctx.arc(16, 16, 14, 0, Math.PI * 2); ctx.fill(); this.textures.addCanvas('player', canvas); } // 创建敌人纹理 if (!this.textures.exists('enemy')) { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ff0000ff'; ctx.beginPath(); ctx.arc(16, 16, 14, 0, Math.PI * 2); ctx.fill(); this.textures.addCanvas('enemy', canvas); } // 物理世界和相机边界 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.inputSystem = new InputSystem(this, { keyboard: true, mouse: true, joystick: false, selection: true }); this.selectionSystem = new SelectionSystem(this); this.commandSystem = new CommandSystem(this); // 创建单位组 this.unitGroup = this.add.group(); // 创建玩家单位 this.playerUnit = new Unit(this, 0, 0, 'player'); this.playerUnit.setDepth(2); // 确保玩家在迷雾之上 this.unitGroup.add(this.playerUnit); // 自动选中玩家单位 this.events.emit('select-unit', this.playerUnit); // 创建多个敌人单位,分布在不同位置 for (let i = 0; i < 10; i++) { const x = Math.random() * 1600 - 800; const y = Math.random() * 1600 - 800; const enemyUnit = new Unit(this, x, y, 'enemy'); enemyUnit.setDepth(2); // 确保敌人在迷雾之上 this.unitGroup.add(enemyUnit); } // 添加碰撞检测 this.physics.add.collider(this.unitGroup, this.unitGroup); // 创建迷雾系统 this.createFogOfWar(worldSize); // 添加场景说明文本 const titleText = this.add.text(10, 10, '测试场景:迷雾测试', { fontSize: '20px', fill: '#ffffff' }); titleText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动 titleText.setDepth(10); // 设置深度,确保显示在游戏元素上方 const fogText = this.add.text(10, 40, '玩家周围会显示视野,迷雾会随玩家移动而变化', { fontSize: '16px', fill: '#ffffff' }); fogText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动 fogText.setDepth(10); // 设置深度,确保显示在游戏元素上方 const controlsText = this.add.text(10, 70, 'WASD或方向键移动视角,鼠标右键移动单位', { fontSize: '16px', fill: '#ffffff' }); controlsText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动 controlsText.setDepth(10); // 设置深度,确保显示在游戏元素上方 const spaceText = this.add.text(10, 100, '按空格键返回菜单', { fontSize: '16px', fill: '#ffffff' }); spaceText.setScrollFactor(0, 0); // 固定在屏幕上,不随相机移动 spaceText.setDepth(10); // 设置深度,确保显示在游戏元素上方 // 空格键切换场景 this.input.keyboard.on('keydown-SPACE', () => { this.scene.start('BootScene'); }); // 添加返回菜单按钮 this.createReturnButton(); // 添加相机移动控制 this.cameraSpeed = 2; this.cameraKeys = this.input.keyboard.addKeys({ up: Phaser.Input.Keyboard.KeyCodes.W, down: Phaser.Input.Keyboard.KeyCodes.S, left: Phaser.Input.Keyboard.KeyCodes.A, right: Phaser.Input.Keyboard.KeyCodes.D }); } /** * 创建返回菜单按钮 */ createReturnButton() { // 创建按钮背景 const button = this.add.rectangle(10, 130, 150, 40, 0x333333); button.setOrigin(0, 0); button.setScrollFactor(0, 0); button.setDepth(10); button.setInteractive({ useHandCursor: true }); // 按钮文本 const buttonText = this.add.text(25, 140, '返回菜单', { fontSize: '16px', fill: '#ffffff', fontFamily: 'Arial' }); buttonText.setScrollFactor(0, 0); buttonText.setDepth(11); // 按钮事件 button.on('pointerdown', () => { this.scene.start('BootScene'); }); button.on('pointerover', () => { button.setFillStyle(0x555555); }); button.on('pointerout', () => { button.setFillStyle(0x333333); }); } /** * 创建迷雾系统 * @param {number} worldSize - 世界大小 */ createFogOfWar(worldSize) { // 创建迷雾纹理 if (!this.textures.exists('fogTexture')) { const canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 64; const ctx = canvas.getContext('2d'); // 创建渐变效果 const gradient = ctx.createRadialGradient(32, 32, 0, 32, 32, 32); gradient.addColorStop(0, 'rgba(0, 0, 0, 0)'); // 中心透明 gradient.addColorStop(0.7, 'rgba(0, 0, 0, 0.8)'); // 边缘不透明 ctx.fillStyle = gradient; ctx.fillRect(0, 0, 64, 64); this.textures.addCanvas('fogTexture', canvas); } // 创建迷雾图层 this.fogLayer = this.add.graphics(); this.fogLayer.setDepth(1); // 迷雾在单位之下 // 视野范围 this.viewRange = 300; // 更新迷雾 this.updateFogOfWar(); } /** * 更新迷雾 */ updateFogOfWar() { if (!this.playerUnit) return; // 清除当前迷雾 this.fogLayer.clear(); // 获取玩家位置 const playerX = this.playerUnit.x; const playerY = this.playerUnit.y; // 创建迷雾遮罩 this.fogLayer.fillStyle(0x000000, 0.8); this.fogLayer.fillRect(-2000, -2000, 4000, 4000); // 创建视野区域(圆形) this.fogLayer.fillStyle(0x000000, 0); this.fogLayer.setBlendMode(Phaser.BlendModes.ERASE); // 绘制视野圆 this.fogLayer.beginPath(); this.fogLayer.arc(playerX, playerY, this.viewRange, 0, Math.PI * 2); this.fogLayer.fillPath(); // 重置混合模式 this.fogLayer.setBlendMode(Phaser.BlendModes.NORMAL); } update() { this.inputSystem.update(); // 更新相机移动 if (this.cameraKeys.left.isDown) { this.cameras.main.scrollX -= this.cameraSpeed; } if (this.cameraKeys.right.isDown) { this.cameras.main.scrollX += this.cameraSpeed; } if (this.cameraKeys.up.isDown) { this.cameras.main.scrollY -= this.cameraSpeed; } if (this.cameraKeys.down.isDown) { this.cameras.main.scrollY += this.cameraSpeed; } this.unitGroup.getChildren().forEach(unit => { if (unit.update) { unit.update(); } unit.updateMovement(); }); // 更新迷雾 this.updateFogOfWar(); } }