Hand-Painted Tactical Map Pipeline

Scope

The first five campaign battles now use the same hand-painted tactical map pipeline. The renderer still reads the original scenario tile coordinates and battle logic; only the map texture asset changes from flat/vector map art to low-contrast raster terrain.

Art Direction

Units must read before the terrain at 100% desktop browser scale.
Terrain uses muted greens, ochre roads, dark blue-green water, and compact structure markers.
Roads, forests, rivers, camps, villages, cliffs, and forts should be recognizable by silhouette and texture, not by high saturation.
The grid remains subtle and embedded in the paint grade, so it helps targeting without becoming the main visual layer.

Generator

scripts/generate-handpaint-map-sample.py reads terrain and unit positions from src/game/data/scenario.ts, then outputs a WebP map and documentation previews.

Example:

python scripts/generate-handpaint-map-sample.py --map second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fourth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifth --webp-quality 90

Current Assets

src/assets/images/battle/first-battle-map.webp
src/assets/images/battle/second-battle-map.webp
src/assets/images/battle/third-battle-map.webp
src/assets/images/battle/fourth-battle-map.webp
src/assets/images/battle/fifth-battle-map.webp

QA Outputs

docs/second-battle-map-handpaint-before-after.png
docs/second-battle-map-handpaint-preview.png
docs/third-battle-map-handpaint-before-after.png
docs/third-battle-map-handpaint-preview.png
docs/fourth-battle-map-handpaint-before-after.png
docs/fourth-battle-map-handpaint-preview.png
docs/fifth-battle-map-handpaint-before-after.png
docs/fifth-battle-map-handpaint-preview.png

Browser screenshots are saved per verification run after build/deploy.

2.0 KiB Raw Blame History