Camera 2 - Fog of war

[DouglasOrr]

Either range-based, or line-of-sight based.

[DouglasOrr]

First attempt used a render texture to "cut out" parts of the scene. This is very precise (e.g. supports partial occlusion by fog), but might be a bit fiddly to get right.

Instead, since we only want to fog two specific types of thing, maybe we do it "manually":

• Hide enemy ships that are outside visible range... use visible=false
• Show where the fog is... render a starry background with circles centred on player-owned ships & planets

---

For the record - the RenderTexture stub was:

const camera = this.cameras.main;
this.fog = this.add.renderTexture(0, 0, camera.width, camera.height).setOrigin(0.5, 0.5);
this.fog.setScale(0.9/camera.zoom, 0.9/camera.zoom);
this.fog.setPosition(camera.midPoint.x, camera.midPoint.y);
planet.depth = 1;
playerMoon.depth = 1;
enemyMoon.depth = 1;
const g = new Phaser.GameObjects.Graphics(this, {
    fillStyle: {
        color: 0xff0000,
        alpha: 1
    }
});
g.fillCircle(1000, 800, 400);
this.fog.setMask(new Phaser.Display.Masks.GeometryMask(this, g).setInvertAlpha(true));
this.fog.setDepth(-1);
this.fog.fill(0x001000, 0.8);
this.game.events.on("prerender", () => {
    const camera = this.cameras.main;
    this.fog.setScale(0.9/camera.zoom, 0.9/camera.zoom);
    this.fog.setPosition(camera.midPoint.x, camera.midPoint.y);
}, this);