Wickedness/heros_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace tenth battle map with hand-painted asset

Browse Source
This commit is contained in:
Wickedness
2026-07-09 15:04:46 +09:00
parent e2fa97941f
commit 1630e10ab6
7 changed files with 15 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/battle-map-terrain-atlas-pipeline.md
View File

@@ -2,7 +2,7 @@
## Scope
The first nine 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.
The first ten 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
@@ -26,6 +26,7 @@ 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
```
## Current Assets
@@ -39,6 +40,7 @@ python scripts/generate-handpaint-map-sample.py --map ninth --webp-quality 90
- `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`
## QA Outputs
@@ -58,5 +60,7 @@ python scripts/generate-handpaint-map-sample.py --map ninth --webp-quality 90
- `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`
Browser screenshots are saved per verification run after build/deploy.

BIN
docs/tenth-battle-map-handpaint-before-after.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
docs/tenth-battle-map-handpaint-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

9
scripts/generate-handpaint-map-sample.py
View File

@@ -100,6 +100,15 @@ MAP_CONFIGS = {
"before": BATTLE_IMAGE_DIR / "ninth-battle-map.svg",
"seed": 240784,
},
"tenth": {
"slug": "tenth-battle-map",
"terrain_export": "tenthBattleMap",
"units_export": "tenthBattleUnits",
"ally_positions_export": "tenthBattleAllyPositions",
"out": BATTLE_IMAGE_DIR / "tenth-battle-map.webp",
"before": BATTLE_IMAGE_DIR / "tenth-battle-map.svg",
"seed": 240794,
},
}

97
src/assets/images/battle/tenth-battle-map.svg
View File

@@ -1,97 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2800 2200" width="2800" height="2200">
<defs>
<filter id="smokeGrain">
<feTurbulence type="fractalNoise" baseFrequency="0.022" numOctaves="4" seed="1010" />
<feColorMatrix type="saturate" values="0.5" />
<feBlend mode="multiply" in2="SourceGraphic" />
</filter>
<pattern id="plain" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="#516247" />
<path d="M10 28h26M42 68h34M64 18l18 14M20 82l22-15" stroke="#9bad6b" stroke-width="3" opacity="0.18" />
<path d="M12 56l14-22M50 38l20-18M76 80l10-24" stroke="#263922" stroke-width="2" opacity="0.36" />
</pattern>
<pattern id="road" width="112" height="112" patternUnits="userSpaceOnUse">
<rect width="112" height="112" fill="#806943" />
<path d="M0 30c42-18 78 14 112-8M0 78c44-20 76 12 112-5" stroke="#b99b66" stroke-width="8" opacity="0.24" />
<path d="M18 88l22-28M60 46l26-18M86 86l12-10" stroke="#3a2d20" stroke-width="3" opacity="0.38" />
</pattern>
<pattern id="forest" width="132" height="112" patternUnits="userSpaceOnUse">
<rect width="132" height="112" fill="#203425" />
<circle cx="24" cy="48" r="30" fill="#152616" />
<circle cx="64" cy="34" r="38" fill="#3d5a38" />
<circle cx="104" cy="54" r="31" fill="#1f3420" />
<circle cx="54" cy="84" r="28" fill="#4d6741" />
<path d="M12 66c36 18 78 16 110-10M36 26c24 20 58 18 76-8" stroke="#0b190e" stroke-width="5" opacity="0.38" />
</pattern>
<pattern id="hill" width="132" height="100" patternUnits="userSpaceOnUse">
<rect width="132" height="100" fill="#675f43" />
<path d="M-12 86c48-62 92-82 134-64c38 16 58 46 76 82" fill="#43442f" opacity="0.72" />
<path d="M18 78c38-42 74-52 110-32" fill="none" stroke="#958b58" stroke-width="10" opacity="0.28" />
</pattern>
<linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#426f88" />
<stop offset="0.52" stop-color="#1e4963" />
<stop offset="1" stop-color="#102a3e" />
</linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8b755f" />
<stop offset="1" stop-color="#3e3026" />
</linearGradient>
<radialGradient id="fire" cx="0.5" cy="0.38" r="0.58">
<stop offset="0" stop-color="#ffe394" />
<stop offset="0.48" stop-color="#d76c2f" />
<stop offset="1" stop-color="#4c1f16" stop-opacity="0" />
</radialGradient>
</defs>
<rect width="2800" height="2200" fill="#10171d" />
<rect width="2800" height="2200" fill="url(#plain)" opacity="0.94" />
<g filter="url(#smokeGrain)">
<path d="M-100 1500C330 1458 720 1480 1090 1496C1460 1512 1950 1500 2920 1460" fill="none" stroke="#92744c" stroke-width="258" stroke-linecap="round" opacity="0.9" />
<path d="M-100 1500C330 1458 720 1480 1090 1496C1460 1512 1950 1500 2920 1460" fill="none" stroke="url(#road)" stroke-width="154" stroke-linecap="round" opacity="0.92" />
<path d="M600 2180C610 1800 610 1420 612 1040C614 760 604 500 612 180" fill="none" stroke="#92744c" stroke-width="184" stroke-linecap="round" opacity="0.86" />
<path d="M600 2180C610 1800 610 1420 612 1040C614 760 604 500 612 180" fill="none" stroke="url(#road)" stroke-width="106" stroke-linecap="round" opacity="0.84" />
<path d="M2020 1840C2020 1480 2010 1120 2025 760C2032 574 2052 384 2036 120" fill="none" stroke="#92744c" stroke-width="178" stroke-linecap="round" opacity="0.86" />
<path d="M2020 1840C2020 1480 2010 1120 2025 760C2032 574 2052 384 2036 120" fill="none" stroke="url(#road)" stroke-width="100" stroke-linecap="round" opacity="0.82" />
<path d="M1420 2220c82-306 78-574-10-806c-78-208-62-422 48-640c86-170 100-360 42-572" fill="none" stroke="#102a3e" stroke-width="286" stroke-linecap="round" opacity="0.96" />
<path d="M1420 2220c82-306 78-574-10-806c-78-208-62-422 48-640c86-170 100-360 42-572" fill="none" stroke="url(#river)" stroke-width="182" stroke-linecap="round" opacity="0.98" />
<path d="M0 20c260-74 520-34 780 120c52 178-76 324-384 438C170 530 34 410-14 246Z" fill="url(#forest)" opacity="0.84" />
<path d="M138 760c314-116 606-62 878 158c-118 238-404 364-858 378C14 1124 8 944 138 760Z" fill="url(#forest)" opacity="0.82" />
<path d="M720 1840c230-86 450-54 660 94c-44 164-198 260-462 288c-146-70-210-194-198-382Z" fill="url(#forest)" opacity="0.78" />
<path d="M2110 36c204-54 384-22 540 92v300c-184 44-356 8-512-110c-64-90-72-184-28-282Z" fill="url(#hill)" opacity="0.82" />
<path d="M2380 1780c178-50 330-22 456 84v300c-190 54-354 24-492-90c-42-112-30-210 36-294Z" fill="url(#hill)" opacity="0.82" />
<g transform="translate(1835 455)">
<rect x="-70" y="-70" width="900" height="1120" rx="20" fill="#18120f" opacity="0.58" />
<rect x="0" y="0" width="770" height="1010" rx="14" fill="url(#wall)" stroke="#211811" stroke-width="20" />
<path d="M0 140h770M0 292h770M0 444h770M0 596h770M0 748h770M0 900h770" stroke="#2e241b" stroke-width="12" opacity="0.72" />
<path d="M132 0v1010M330 0v1010M536 0v1010" stroke="#63513e" stroke-width="10" opacity="0.48" />
<rect x="250" y="504" width="270" height="168" fill="#1f1713" stroke="#0e0907" stroke-width="12" />
<path d="M250 504l135-84l135 84" fill="#734a24" stroke="#21160e" stroke-width="12" />
<path d="M336 672v-100h98v100" fill="#0d0907" />
<circle cx="120" cy="220" r="72" fill="url(#fire)" opacity="0.74" />
<circle cx="645" cy="720" r="78" fill="url(#fire)" opacity="0.7" />
</g>
<g transform="translate(620 865)">
<rect x="0" y="0" width="260" height="140" rx="10" fill="#5f4a35" stroke="#251d16" stroke-width="10" />
<path d="M-20 18L130-74l152 92Z" fill="#98622d" stroke="#2b1f14" stroke-width="10" />
<path d="M78 140v-62h60v62" fill="#201713" />
</g>
<g transform="translate(1265 1640)">
<rect x="0" y="0" width="230" height="126" rx="10" fill="#5d4935" stroke="#251d16" stroke-width="9" />
<path d="M-18 14L115-62l134 76Z" fill="#8c5a2a" stroke="#2b1f14" stroke-width="9" />
<path d="M72 126v-54h54v54" fill="#201713" />
</g>
<path d="M1880 680c210 40 456 28 752-38" fill="none" stroke="#15100d" stroke-width="20" opacity="0.35" />
<path d="M1840 1270c214 48 482 34 826-42" fill="none" stroke="#15100d" stroke-width="18" opacity="0.32" />
<path d="M160 1510c260 58 550 58 870 0" fill="none" stroke="#d8b15f" stroke-width="10" opacity="0.16" />
</g>
<rect width="2800" height="2200" fill="#07090c" opacity="0.18" />
<path d="M1860 460c-160 240-126 536 102 888" fill="none" stroke="#ffb15f" stroke-width="12" opacity="0.12" />
<path d="M1780 470c-102 228-76 470 78 724" fill="none" stroke="#ffe0a0" stroke-width="8" opacity="0.08" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/images/battle/tenth-battle-map.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

2
src/game/data/battleMapAssets.ts
View File

@@ -40,7 +40,7 @@ import seventhBattleMapUrl from '../../assets/images/battle/seventh-battle-map.w
import seventeenthBattleMapUrl from '../../assets/images/battle/seventeenth-battle-map.svg';
import sixteenthBattleMapUrl from '../../assets/images/battle/sixteenth-battle-map.svg';
import sixthBattleMapUrl from '../../assets/images/battle/sixth-battle-map.webp';
import tenthBattleMapUrl from '../../assets/images/battle/tenth-battle-map.svg';
import tenthBattleMapUrl from '../../assets/images/battle/tenth-battle-map.webp';
import thirteenthBattleMapUrl from '../../assets/images/battle/thirteenth-battle-map.svg';
import thirtiethBattleMapUrl from '../../assets/images/battle/thirtieth-battle-map.svg';
import thirtyEighthBattleMapUrl from '../../assets/images/battle/thirty-eighth-battle-map.svg';