Hand-Painted Tactical Map Pipeline

Scope

The first twenty 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
python scripts/generate-handpaint-map-sample.py --map sixth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map seventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map eighth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map ninth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map tenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map eleventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twelfth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fourteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map sixteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map seventeenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map eighteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map nineteenth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twentieth --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
src/assets/images/battle/sixth-battle-map.webp
src/assets/images/battle/seventh-battle-map.webp
src/assets/images/battle/eighth-battle-map.webp
src/assets/images/battle/ninth-battle-map.webp
src/assets/images/battle/tenth-battle-map.webp
src/assets/images/battle/eleventh-battle-map.webp
src/assets/images/battle/twelfth-battle-map.webp
src/assets/images/battle/thirteenth-battle-map.webp
src/assets/images/battle/fourteenth-battle-map.webp
src/assets/images/battle/fifteenth-battle-map.webp
src/assets/images/battle/sixteenth-battle-map.webp
src/assets/images/battle/seventeenth-battle-map.webp
src/assets/images/battle/eighteenth-battle-map.webp
src/assets/images/battle/nineteenth-battle-map.webp
src/assets/images/battle/twentieth-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
docs/sixth-battle-map-handpaint-before-after.png
docs/sixth-battle-map-handpaint-preview.png
docs/seventh-battle-map-handpaint-before-after.png
docs/seventh-battle-map-handpaint-preview.png
docs/eighth-battle-map-handpaint-before-after.png
docs/eighth-battle-map-handpaint-preview.png
docs/ninth-battle-map-handpaint-before-after.png
docs/ninth-battle-map-handpaint-preview.png
docs/tenth-battle-map-handpaint-before-after.png
docs/tenth-battle-map-handpaint-preview.png
docs/eleventh-battle-map-handpaint-before-after.png
docs/eleventh-battle-map-handpaint-preview.png
docs/twelfth-battle-map-handpaint-before-after.png
docs/twelfth-battle-map-handpaint-preview.png
docs/thirteenth-battle-map-handpaint-before-after.png
docs/thirteenth-battle-map-handpaint-preview.png
docs/fourteenth-battle-map-handpaint-before-after.png
docs/fourteenth-battle-map-handpaint-preview.png
docs/fifteenth-battle-map-handpaint-before-after.png
docs/fifteenth-battle-map-handpaint-preview.png
docs/sixteenth-battle-map-handpaint-before-after.png
docs/sixteenth-battle-map-handpaint-preview.png
docs/seventeenth-battle-map-handpaint-before-after.png
docs/seventeenth-battle-map-handpaint-preview.png
docs/eighteenth-battle-map-handpaint-before-after.png
docs/eighteenth-battle-map-handpaint-preview.png
docs/nineteenth-battle-map-handpaint-before-after.png
docs/nineteenth-battle-map-handpaint-preview.png
docs/twentieth-battle-map-handpaint-before-after.png
docs/twentieth-battle-map-handpaint-preview.png

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

5.5 KiB Raw Blame History