Implement Fog of War
Guides an agent to build, tune, and debug fog of war with line-of-sight in Three.js games
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
Teaches an AI coding agent a structured method for adding fog of war to a Three.js action game: a shared line-of-sight system that decides what the player and enemies can see, plus a soft fog overlay that hides unseen areas and walls. Once installed, the agent follows a set order for architecture, tuning values, lifecycle handling (such as turning fog off in menus), and validation tests instead of improvising. It is guidance for writing game code, not a finished game feature.
Great for
- Game developers building top-down, orthographic, or isometric Three.js action games who want wall-aware visibility
- Teams that need enemies to hide behind obstacles and to keep targeting fair to the player
Skip it if
- Projects that do not use Three.js or a comparable WebGL renderer, since the guidance assumes Three.js scene, camera and layer APIs
- Non-developers looking for a ready-made fog effect; the skill edits a codebase and requires engineering review of the changes
Try asking
- “Add wall-aware fog of war to my Three.js isometric shooter so enemies behind pillars are hidden”
- “Our fog shader shows radial spokes at the walls; debug and fix the artifacts”
- “Tune the player vision radius and fog opacity so the inner play area stays readable”
- “Write deterministic tests for line-of-sight and hidden-enemy targeting in my game”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
implement-fog-of-war.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip implement-fog-of-war.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip implement-fog-of-war.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Point the agent at your own obstacle, camera, and lifecycle code first; the skill tells it to inspect before editing.
- Ask for the tuning steps in order (geometry, ranges, clear radius, falloff) rather than changing many values at once.
- Review the generated tests and visual results yourself, especially motion and wall edges, since the skill cannot judge gameplay feel.
What's inside
- agents/openai.yaml
- references/mechanics.md
- references/validation.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.