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

Replace ninth battle map with hand-painted asset

Browse Source
This commit is contained in:
Wickedness
2026-07-09 15:02:05 +09:00
parent 4482a7e17a
commit e2fa97941f
7 changed files with 15 additions and 90 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 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.
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.
## Art Direction
@@ -25,6 +25,7 @@ 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
```
## Current Assets
@@ -37,6 +38,7 @@ python scripts/generate-handpaint-map-sample.py --map eighth --webp-quality 90
- `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`
## QA Outputs
@@ -54,5 +56,7 @@ python scripts/generate-handpaint-map-sample.py --map eighth --webp-quality 90
- `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`
Browser screenshots are saved per verification run after build/deploy.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
docs/ninth-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

@@ -91,6 +91,15 @@ MAP_CONFIGS = {
"before": BATTLE_IMAGE_DIR / "eighth-battle-map.svg",
"seed": 240774,
},
"ninth": {
"slug": "ninth-battle-map",
"terrain_export": "ninthBattleMap",
"units_export": "ninthBattleUnits",
"ally_positions_export": "ninthBattleAllyPositions",
"out": BATTLE_IMAGE_DIR / "ninth-battle-map.webp",
"before": BATTLE_IMAGE_DIR / "ninth-battle-map.svg",
"seed": 240784,
},
}

88
src/assets/images/battle/ninth-battle-map.svg
View File

@@ -1,88 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2600 2200" width="2600" height="2200">
<defs>
<filter id="nightGrain">
<feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="4" seed="922" />
<feColorMatrix type="saturate" values="0.55" />
<feBlend mode="multiply" in2="SourceGraphic" />
</filter>
<pattern id="grass" width="96" height="96" patternUnits="userSpaceOnUse">
<rect width="96" height="96" fill="#4e6547" />
<path d="M8 28h28M48 58h30M24 76l20-14M66 18l16 12" stroke="#9fb36f" stroke-width="3" opacity="0.22" />
<path d="M12 62l14-24M40 34l13-18M70 80l9-25" stroke="#263f2a" stroke-width="2" opacity="0.38" />
</pattern>
<pattern id="earth" width="104" height="104" patternUnits="userSpaceOnUse">
<rect width="104" height="104" fill="#816640" />
<path d="M0 26c38-18 70 12 104-8M0 70c42-18 72 14 104-4" stroke="#b08b59" stroke-width="7" opacity="0.24" />
<path d="M20 86l18-24M62 42l24-16M78 82l14-9" stroke="#423323" stroke-width="3" opacity="0.34" />
</pattern>
<pattern id="forest" width="126" height="110" patternUnits="userSpaceOnUse">
<rect width="126" height="110" fill="#233a29" />
<circle cx="26" cy="42" r="30" fill="#172a1b" />
<circle cx="62" cy="32" r="35" fill="#425f3f" />
<circle cx="96" cy="50" r="31" fill="#1f3622" />
<circle cx="52" cy="82" r="27" fill="#4e6844" />
<path d="M14 62c34 18 74 16 104-8M36 26c22 18 54 16 72-6" stroke="#0d1c12" stroke-width="5" opacity="0.38" />
</pattern>
<pattern id="hill" width="132" height="98" patternUnits="userSpaceOnUse">
<rect width="132" height="98" fill="#655f44" />
<path d="M-10 84c48-62 92-82 134-64c36 15 56 44 74 80" fill="#444530" opacity="0.72" />
<path d="M18 76c36-40 72-50 108-32" fill="none" stroke="#928957" stroke-width="10" opacity="0.28" />
</pattern>
<linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#4a839b" />
<stop offset="0.52" stop-color="#224e68" />
<stop offset="1" stop-color="#102b42" />
</linearGradient>
<linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#89735d" />
<stop offset="1" stop-color="#3d3025" />
</linearGradient>
<linearGradient id="torch" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffdf82" />
<stop offset="1" stop-color="#b24a20" />
</linearGradient>
</defs>
<rect width="2600" height="2200" fill="#101923" />
<rect width="2600" height="2200" fill="url(#grass)" opacity="0.92" />
<g filter="url(#nightGrain)">
<path d="M-120 1050C360 1010 780 1040 1140 1040C1540 1040 1980 980 2700 980" fill="none" stroke="#8e6f47" stroke-width="252" stroke-linecap="round" opacity="0.92" />
<path d="M-120 1050C360 1010 780 1040 1140 1040C1540 1040 1980 980 2700 980" fill="none" stroke="url(#earth)" stroke-width="150" stroke-linecap="round" opacity="0.92" />
<path d="M780 2180C760 1750 790 1420 810 1160C830 890 812 560 820 140" fill="none" stroke="#8e6f47" stroke-width="180" stroke-linecap="round" opacity="0.86" />
<path d="M780 2180C760 1750 790 1420 810 1160C830 890 812 560 820 140" fill="none" stroke="url(#earth)" stroke-width="104" stroke-linecap="round" opacity="0.82" />
<path d="M1380 2220c92-294 94-520 10-724c-82-198-70-382 36-552c116-184 126-438 30-892" fill="none" stroke="#102a3e" stroke-width="280" stroke-linecap="round" opacity="0.96" />
<path d="M1380 2220c92-294 94-520 10-724c-82-198-70-382 36-552c116-184 126-438 30-892" fill="none" stroke="url(#river)" stroke-width="180" stroke-linecap="round" opacity="0.98" />
<path d="M0 20c280-80 556-44 820 112c44 154-60 292-310 414c-262-30-430-126-510-292Z" fill="url(#forest)" opacity="0.84" />
<path d="M120 760c280-120 560-70 826 158c-84 226-350 354-796 374C18 1122-10 954 120 760Z" fill="url(#forest)" opacity="0.82" />
<path d="M870 80c230-82 432-48 606 94c2 150-104 262-318 334c-210-42-310-184-288-428Z" fill="url(#forest)" opacity="0.76" />
<path d="M430 1450c270-104 526-64 768 120c-48 208-236 336-566 384c-174-86-240-252-202-504Z" fill="url(#forest)" opacity="0.8" />
<path d="M2140 60c190-48 356-20 498 86v230c-174 46-334 16-480-92c-54-76-60-150-18-224Z" fill="url(#hill)" opacity="0.82" />
<path d="M2180 1720c176-58 332-34 468 72v350c-192 62-358 28-500-102c-42-122-32-228 32-320Z" fill="url(#hill)" opacity="0.82" />
<g transform="translate(1800 300)">
<rect x="-50" y="-34" width="700" height="1260" rx="22" fill="#1c1713" opacity="0.55" />
<rect x="0" y="0" width="600" height="1200" rx="16" fill="url(#wall)" stroke="#241d15" stroke-width="18" />
<path d="M0 160h600M0 340h600M0 520h600M0 700h600M0 880h600M0 1060h600" stroke="#30261d" stroke-width="12" opacity="0.72" />
<path d="M110 0v1200M300 0v1200M490 0v1200" stroke="#5f4f3d" stroke-width="10" opacity="0.48" />
<rect x="150" y="520" width="300" height="180" fill="#211914" stroke="#100b08" stroke-width="12" />
<path d="M150 520l150-90l150 90" fill="#6f4822" stroke="#21160e" stroke-width="12" />
<path d="M246 700v-108h108v108" fill="#0d0907" />
<circle cx="94" cy="520" r="20" fill="url(#torch)" opacity="0.9" />
<circle cx="506" cy="700" r="20" fill="url(#torch)" opacity="0.9" />
</g>
<g transform="translate(960 1300)">
<rect x="0" y="0" width="240" height="132" rx="10" fill="#5f4a35" stroke="#251d16" stroke-width="10" />
<path d="M-18 16L120-70l140 86Z" fill="#9a612d" stroke="#2b1f14" stroke-width="10" />
<path d="M72 132v-58h56v58" fill="#201713" />
</g>
<g transform="translate(70 1650)">
<rect x="0" y="0" width="360" height="245" rx="16" fill="#47574d" stroke="#1c241d" stroke-width="14" />
<path d="M22 60h315M22 124h315M22 188h315M86 22v200M180 22v200M274 22v200" stroke="#243126" stroke-width="9" opacity="0.7" />
<rect x="82" y="-38" width="196" height="84" fill="#8d5528" stroke="#24190e" stroke-width="10" />
</g>
</g>
<rect width="2600" height="2200" fill="#08101c" opacity="0.18" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1022 KiB

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

@@ -34,7 +34,7 @@ import fortyThirdBattleMapUrl from '../../assets/images/battle/forty-third-battl
import fourteenthBattleMapUrl from '../../assets/images/battle/fourteenth-battle-map.svg';
import fourthBattleMapUrl from '../../assets/images/battle/fourth-battle-map.webp';
import nineteenthBattleMapUrl from '../../assets/images/battle/nineteenth-battle-map.svg';
import ninthBattleMapUrl from '../../assets/images/battle/ninth-battle-map.svg';
import ninthBattleMapUrl from '../../assets/images/battle/ninth-battle-map.webp';
import secondBattleMapUrl from '../../assets/images/battle/second-battle-map.webp';
import seventhBattleMapUrl from '../../assets/images/battle/seventh-battle-map.webp';
import seventeenthBattleMapUrl from '../../assets/images/battle/seventeenth-battle-map.svg';