Hand-Painted Tactical Map Pipeline

Scope

The first fifty-eight 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.

Resolution Policy

Battles 1-25 keep the original 224px hand-painted tile target.
Large maps starting at battle 26 use a 192px tile target through LARGE_MAP_TILE_SIZE in the generator.
Very large maps can use a 176px tile target through VERY_LARGE_MAP_TILE_SIZE when WebP encoding or browser memory pressure becomes the limiting factor.
Ultra large maps can use a 160px tile target through ULTRA_LARGE_MAP_TILE_SIZE when 176px output exceeds WebP encoder limits.
Extreme large maps can use a 152px tile target through EXTREME_LARGE_MAP_TILE_SIZE when 160px output exceeds WebP encoder limits.
Massive maps can use a 144px tile target through MASSIVE_LARGE_MAP_TILE_SIZE when 152px output approaches the WebP encoder edge.
Colossal maps can use a 136px tile target through COLOSSAL_LARGE_MAP_TILE_SIZE when 144px output hits WebP encoding error 6.
Gigantic maps can use a 128px tile target through GIGANTIC_LARGE_MAP_TILE_SIZE when 136px output would exceed the known WebP encoder comfort range.
Re-evaluate the tile target before a generated map's longest edge approaches roughly 16,384px at 192px per tile.
Use --tile-size only for controlled comparisons; commit the selected production size in the map config.

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. Map configs can set tile_size; otherwise the default is 224px.

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
python scripts/generate-handpaint-map-sample.py --map twenty-first --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-fourth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-fifth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-sixth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-seventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-eighth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map twenty-ninth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirtieth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-first --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-fourth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-fifth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-sixth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-seventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-eighth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map thirty-ninth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fortieth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-first --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-fourth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-fifth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-sixth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-seventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-eighth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map forty-ninth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fiftieth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-first --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-fourth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-fifth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-sixth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-seventh --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map fifty-eighth --webp-quality 90

Comparison example:

python scripts/generate-handpaint-map-sample.py --map thirtieth --tile-size 192 --out tmp\thirtieth-battle-map-192-test.webp --comparison tmp\thirtieth-battle-map-192-test-before-after.png --preview tmp\thirtieth-battle-map-192-test-preview.png --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
src/assets/images/battle/twenty-first-battle-map.webp
src/assets/images/battle/twenty-second-battle-map.webp
src/assets/images/battle/twenty-third-battle-map.webp
src/assets/images/battle/twenty-fourth-battle-map.webp
src/assets/images/battle/twenty-fifth-battle-map.webp
src/assets/images/battle/twenty-sixth-battle-map.webp
src/assets/images/battle/twenty-seventh-battle-map.webp
src/assets/images/battle/twenty-eighth-battle-map.webp
src/assets/images/battle/twenty-ninth-battle-map.webp
src/assets/images/battle/thirtieth-battle-map.webp
src/assets/images/battle/thirty-first-battle-map.webp
src/assets/images/battle/thirty-second-battle-map.webp
src/assets/images/battle/thirty-third-battle-map.webp
src/assets/images/battle/thirty-fourth-battle-map.webp
src/assets/images/battle/thirty-fifth-battle-map.webp
src/assets/images/battle/thirty-sixth-battle-map.webp
src/assets/images/battle/thirty-seventh-battle-map.webp
src/assets/images/battle/thirty-eighth-battle-map.webp
src/assets/images/battle/thirty-ninth-battle-map.webp
src/assets/images/battle/fortieth-battle-map.webp
src/assets/images/battle/forty-first-battle-map.webp
src/assets/images/battle/forty-second-battle-map.webp
src/assets/images/battle/forty-third-battle-map.webp
src/assets/images/battle/forty-fourth-battle-map.webp
src/assets/images/battle/forty-fifth-battle-map.webp
src/assets/images/battle/forty-sixth-battle-map.webp
src/assets/images/battle/forty-seventh-battle-map.webp
src/assets/images/battle/forty-eighth-battle-map.webp
src/assets/images/battle/forty-ninth-battle-map.webp
src/assets/images/battle/fiftieth-battle-map.webp
src/assets/images/battle/fifty-first-battle-map.webp
src/assets/images/battle/fifty-second-battle-map.webp
src/assets/images/battle/fifty-third-battle-map.webp
src/assets/images/battle/fifty-fourth-battle-map.webp
src/assets/images/battle/fifty-fifth-battle-map.webp
src/assets/images/battle/fifty-sixth-battle-map.webp
src/assets/images/battle/fifty-seventh-battle-map.webp
src/assets/images/battle/fifty-eighth-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
docs/twenty-first-battle-map-handpaint-before-after.png
docs/twenty-first-battle-map-handpaint-preview.png
docs/twenty-second-battle-map-handpaint-before-after.png
docs/twenty-second-battle-map-handpaint-preview.png
docs/twenty-third-battle-map-handpaint-before-after.png
docs/twenty-third-battle-map-handpaint-preview.png
docs/twenty-fourth-battle-map-handpaint-before-after.png
docs/twenty-fourth-battle-map-handpaint-preview.png
docs/twenty-fifth-battle-map-handpaint-before-after.png
docs/twenty-fifth-battle-map-handpaint-preview.png
docs/twenty-sixth-battle-map-handpaint-before-after.png
docs/twenty-sixth-battle-map-handpaint-preview.png
docs/twenty-seventh-battle-map-handpaint-before-after.png
docs/twenty-seventh-battle-map-handpaint-preview.png
docs/twenty-eighth-battle-map-handpaint-before-after.png
docs/twenty-eighth-battle-map-handpaint-preview.png
docs/twenty-ninth-battle-map-handpaint-before-after.png
docs/twenty-ninth-battle-map-handpaint-preview.png
docs/thirtieth-battle-map-handpaint-before-after.png
docs/thirtieth-battle-map-handpaint-preview.png
docs/thirty-first-battle-map-handpaint-before-after.png
docs/thirty-first-battle-map-handpaint-preview.png
docs/thirty-second-battle-map-handpaint-before-after.png
docs/thirty-second-battle-map-handpaint-preview.png
docs/thirty-third-battle-map-handpaint-before-after.png
docs/thirty-third-battle-map-handpaint-preview.png
docs/thirty-fourth-battle-map-handpaint-before-after.png
docs/thirty-fourth-battle-map-handpaint-preview.png
docs/thirty-fifth-battle-map-handpaint-before-after.png
docs/thirty-fifth-battle-map-handpaint-preview.png
docs/thirty-sixth-battle-map-handpaint-before-after.png
docs/thirty-sixth-battle-map-handpaint-preview.png
docs/thirty-seventh-battle-map-handpaint-before-after.png
docs/thirty-seventh-battle-map-handpaint-preview.png
docs/thirty-eighth-battle-map-handpaint-before-after.png
docs/thirty-eighth-battle-map-handpaint-preview.png
docs/thirty-ninth-battle-map-handpaint-before-after.png
docs/thirty-ninth-battle-map-handpaint-preview.png
docs/fortieth-battle-map-handpaint-before-after.png
docs/fortieth-battle-map-handpaint-preview.png
docs/forty-first-battle-map-handpaint-before-after.png
docs/forty-first-battle-map-handpaint-preview.png
docs/forty-second-battle-map-handpaint-before-after.png
docs/forty-second-battle-map-handpaint-preview.png
docs/forty-third-battle-map-handpaint-before-after.png
docs/forty-third-battle-map-handpaint-preview.png
docs/forty-fourth-battle-map-handpaint-before-after.png
docs/forty-fourth-battle-map-handpaint-preview.png
docs/forty-fifth-battle-map-handpaint-before-after.png
docs/forty-fifth-battle-map-handpaint-preview.png
docs/forty-sixth-battle-map-handpaint-before-after.png
docs/forty-sixth-battle-map-handpaint-preview.png
docs/forty-seventh-battle-map-handpaint-before-after.png
docs/forty-seventh-battle-map-handpaint-preview.png
docs/forty-eighth-battle-map-handpaint-before-after.png
docs/forty-eighth-battle-map-handpaint-preview.png
docs/forty-ninth-battle-map-handpaint-before-after.png
docs/forty-ninth-battle-map-handpaint-preview.png
docs/fiftieth-battle-map-handpaint-before-after.png
docs/fiftieth-battle-map-handpaint-preview.png
docs/fifty-first-battle-map-handpaint-before-after.png
docs/fifty-first-battle-map-handpaint-preview.png
docs/fifty-second-battle-map-handpaint-before-after.png
docs/fifty-second-battle-map-handpaint-preview.png
docs/fifty-third-battle-map-handpaint-before-after.png
docs/fifty-third-battle-map-handpaint-preview.png
docs/fifty-fourth-battle-map-handpaint-before-after.png
docs/fifty-fourth-battle-map-handpaint-preview.png
docs/fifty-fifth-battle-map-handpaint-before-after.png
docs/fifty-fifth-battle-map-handpaint-preview.png
docs/fifty-sixth-battle-map-handpaint-before-after.png
docs/fifty-sixth-battle-map-handpaint-preview.png
docs/fifty-seventh-battle-map-handpaint-before-after.png
docs/fifty-seventh-battle-map-handpaint-preview.png
docs/fifty-eighth-battle-map-handpaint-before-after.png
docs/fifty-eighth-battle-map-handpaint-preview.png

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

17 KiB Raw Blame History