RTS Fog of War

About this style

Fog of war is the convention in strategy games that the player sees only what their own units and buildings can see. Most real-time strategy games layer it in two states: a dark shroud over ground that has never been explored, and a dimmer veil over ground that has been seen but is no longer watched, where the terrain shows but enemy movements do not. The term comes from military writing about uncertainty on the battlefield. Strategy games, war-game tools and dashboards that reveal information step by step use the look to make scouting feel like discovery.

Make a 10-second top-down strategy-game map seen through its fog of war: units move out and the fog lifts in soft circles around them, resource fields appear and get tagged, the minimap pings, and an enemy base is revealed.

<inputs>
If I don't give you something, use the default and don't ask.
- Game: Ochre Front (fictional).
- Map: Saltpan Mesa.
- Player: Marrow Survey Corps (turquoise). Enemy: Cinder Pact (persimmon).
- Units: one scout bike, a squad of four rangers, one survey drone, two harvesters at the outpost.
- Resources found, in order: Crystal field · 1,500 · Copperstone seam · 2,500 · Crystal field · 1,500
- Resources held: Crystal 350, rising by two deliveries of 50 to 450 · Ore 200 · Supply 14/30
- Clock: 06:12, counting to 06:22.
- Alerts: "Crystal field found" · "Copperstone seam found" · "Crystal field found" · "ENEMY BASE SIGHTED · NORTHEAST RIDGE"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a top-down real-time strategy map painted like a high-end strategy game: a sunlit desert mesa in clay and sage, three clear fog states (never explored, explored but unwatched, in sight), units whose sight lifts the fog in soft circles as they move, and a restrained HUD of resources, minimap, unit tiles and alerts.
- Palette: mesa clay #C9774B, sunlit tops #E59A63, cliff faces in shadow #7A3C2A with strata lines #8E4A34; sand flats #E7C996 with ripple lines #D8B57E; salt pan #F1E6CF with cracks #D4C3A2; sage scrub #8FA77A and #5F7D5A; dry riverbed #B98F64; water pools #3E9AA6 with rims #7CC6C9; unexplored fog ink #161B2E carrying drifting cloud #222A44 with lighter wisps #2C3555 and a cool rim #4A5A8A where it meets the light; explored shroud: the terrain desaturated 70%, darkened to 45% and tinted #5A6A8C; player turquoise #2EC4B6, deep #157A73; enemy persimmon #FF6B3D, deep #A33A1C; crystals #6CF0D8 with glints #E6FFF9; copperstone #D88A4A with #8C5230; HUD panels #10141F at 86% with a 1px #3A4566 border and 2px corner ticks; HUD text #EDEFF5, secondary #9AA3BD. Warm clay under cold indigo fog, so every reveal is a change of temperature as well as light.
- The world: 3840 × 2160 px, painted once at load into an offscreen canvas, lit from the upper left: mesas as stepped plateaus (two or three tiers) with seeded fBm outlines, each tier a sunlit top, a bright rim and a shadowed cliff face to the lower right with strata lines; sand flats with dune ripples; a salt pan with Voronoi crack polygons; 1,800 sage clumps (three-blob shapes, each with a soft shadow); a dry riverbed winding west to east; two water pools; scattered rocks with shadows. The player outpost sits in the southwest at world (620, 1700); the enemy base in the northeast at world (3150, 520), on a ridge.
- Fog, recomputed from t each frame on a 480 × 270 grid (8 world px per cell) and drawn as smooth upscaled masks:
  - in sight V: for each unit and structure, a soft disc smoothstep(r + 40, r − 40, distance), combined by max; sight radii: outpost 300, scout bike 360, each ranger 260, drone 440, harvesters 180;
  - explored E: precompute at load, at a fixed 1/30 s step along every unit's path, the time each cell first comes into sight; then E(t) ramps from 0 to 1 over 0.4 s after that time, so the shroud lifts softly and explored ground never returns to ink;
  - drawing: terrain everywhere; the shroud treatment where E is 1 and V is 0; the ink fog where E is 0, its two cloud layers drifting at 12 and 20px/s, its edge displaced ±30px by noise so it breaks into wisps, with the thin cool rim along the boundary. Circles of sight are always soft: no hard black edges.
- Units, top-down, about twice the detail of a real game sprite, each with a soft shadow down-right:
  - scout bike: a two-wheeled rover 44px long with a rider, a turquoise fairing and a faint dust trail;
  - rangers: four 28px figures (helmet, backpack, shoulder pads in turquoise) in a diamond, each bobbing a 2px stride at 3 Hz;
  - survey drone: a 36px quadrotor with four soft rotor discs (blurred rings, never strobing) and a turquoise lens, its shadow offset 40px down-right because it flies;
  - harvesters: boxy six-wheeled haulers 60px long with a front scoop and a crystal hopper;
  - outpost: a hexagonal command post 160px across with a turquoise roof band, a landing pad and a crystal silo.
  - Paths are seeded Catmull-Rom splines with arc-length parameterization; speed eases in and out of each order; headings rotate smoothly toward travel.
- Orders: when a group is ordered, a turquoise path line with moving chevrons draws from it to the target in 0.3 s and a target marker (a ring with four ticks) pulses twice, then both fade.
- Resources: crystal fields as clusters of 6–12 hexagonal prisms (lit top facets, darker sides, one glint sliding up a facet every 2 s); copperstone as copper nuggets set in grey rock with shadows. When a field's center first comes into sight, a turquoise ring draws around it (0.4 s) and a HUD tag pops beside it ("Crystal · 1,500", Barlow Semi Condensed 600, 20px, on a panel chip), its minimap marker appears, and the alert feed adds a line.
- Enemy base: a persimmon-walled compound on the ridge: an octagonal keep with a domed roof, two gate towers, three barracks, a refinery whose stack lifts slow smoke puffs, and six idle enemy units patrolling short loops. Its smoke plume is visible rising out of the fog before the base is. When the drone's sight reaches it, persimmon corner ticks draw on each structure and a persimmon tag "Cinder Pact base" pops.
- HUD:
  - top bar x 120–1800, y 70–122: resource readouts (an icon, a label in Barlow Semi Condensed 600, 22px, uppercase, tracked 0.08em, secondary; the value in IBM Plex Mono 500, 26px), the supply readout, and the clock at the right end. Values roll like an odometer when they change;
  - minimap x 120–440, y 700–1020: the whole world at 1/12 scale with the same three fog states, unit dots, resource marks, a 1px white viewport rectangle that follows the camera, and pings: two rings expanding to 60px over 0.6 s, turquoise for finds and persimmon for the enemy, never more than two pings a second;
  - unit tiles x 500–1100, y 920–1020: one tile per selected unit (icon, a health bar);
  - alert feed x 1380–1800 from y 150: lines slide in from the right on a panel, newest on top.
- Camera: the viewport scrolls the world on cubic-bezier(0.45, 0, 0.2, 1), never faster than 600px/s: it starts on the outpost, follows the scouts north-east, and finally zooms out to 0.85 to frame both the explored corridor and the enemy base. No shake.
- The final alert banner: "ENEMY BASE SIGHTED · NORTHEAST RIDGE" in Barlow Semi Condensed 800 italic, 52px, #EDEFF5, on a persimmon-edged panel at x 560–1360, y 160–240, sliding down from y 100.
- Premium: three fog states that read instantly, soft circles of sight that follow real units, shroud that remembers where you've been, a painted world with lit cliffs, a HUD whose numbers agree with the map. Cheap: a flat grey overlay with hard holes punched in it, a black screen with a spotlight, sprites sliding without headings.
Banned: real strategy games, factions, unit designs or UI layouts; a flat grey fog; hard-edged circles; glow or bloom; lens flares; strobing alerts; more than two minimap pings in any second; camera shake; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: the outpost and two harvesters at a crystal field sit in one soft circle of light; everything else is ink fog with drifting cloud; the HUD draws in (the top bar slides down, the minimap and unit tiles slide up), the clock running.
- 1.2–3.0s: the scout bike and rangers are ordered north-east (the path line and target marker draw); they move out and the fog lifts in soft circles along their way, leaving shroud behind; the first crystal field is found at 2.2 s (ring, tag, ping, alert).
- 3.0–4.8s: the drone lifts off and flies a wider arc to the north; the copperstone seam is found (3.6 s) and the second crystal field (4.3 s); a harvester delivers at 3.5 s and Crystal rolls to 400; the camera follows.
- 4.8–6.0s: the scouts crest the ridge; a long corridor of shroud lies behind them; ahead, the enemy's smoke plume rises out of the fog. At 6.0 s: the scouts on the ridge, three tagged resources, the fog front at the north-east with the plume above it, the HUD complete.
- 6.0–7.6s: the drone pushes on and the fog lifts over the enemy base (6.3–7.0 s): walls, keep, towers and patrols appear and get their persimmon ticks; the minimap pings persimmon (6.6 and 7.1 s); the banner slides down (7.0 s); the second delivery rolls Crystal to 450 (7.2 s).
- 7.6–8.6s: the camera eases out to 0.85, framing the corridor and the base; the rangers halt and fan into a line facing it; the alert feed shows all four lines.
- 8.6–10.0s: hold: clouds drift in the fog, smoke rises, the patrols walk, the clock reads 06:22.
For other lengths, stretch the scouting run; keep the base reveal, the banner and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Paint the world once at load (keep load under 10 s). Unit positions and headings, order markers, rotor spins and patrol loops are closed-form functions of t; the first-seen times are precomputed once at load at a fixed 1/30 s step. Each frame, build V and E for the visible part of the grid into ImageData masks, upscale them with smoothing, and composite terrain, shroud and fog through them; the minimap uses the same masks downsampled. The HUD is HTML over the canvas.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the three fog states read apart in every frame; every revealed area traces back to a unit's or structure's sight; explored ground stays shroud and never returns to ink; circles of sight are soft; each resource tag appears only when its field comes into sight; the minimap matches the main view; the HUD numbers match the inputs (Crystal 350, 400, 450); the enemy base appears only when the drone reaches it; nothing important is within 60px of an edge; and the 6.0 s and final frames are complete compositions. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Topographic Contour Map

Made by us

A calm cartographic animation: smooth brown contour lines draw in from valley to summit, the terrain slowly morphs as a…

Cartographic Route Map

Made by us

A print-style travel map that draws itself: water-lined coast, ink mountains and serif labels, then a red route line ca…

Ride-Hailing App

Made by us

A night map seen through a phone that works like a lens, the city dimmed around it: a coral route draws along procedura…

Globe Flight Paths

Made by us

A print-style dotted globe of a fictional world turns on warm paper while vermilion and cobalt arcs fly a new airline's…