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

Replace battle maps 63 and 64 with hand-painted assets

Browse Source
This commit is contained in:
Wickedness
2026-07-09 23:27:31 +09:00
parent 17c5cbf1ea
commit 57f4c0fd41
11 changed files with 35 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
## Scope
The first sixty-two 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 sixty-four 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
@@ -22,6 +22,7 @@ The first sixty-two campaign battles now use the same hand-painted tactical map
- 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.
- Immense maps can use a 120px tile target through `IMMENSE_LARGE_MAP_TILE_SIZE` when 128px output hits WebP encoding error 6.
- Vast maps can use a 112px tile target through `VAST_LARGE_MAP_TILE_SIZE` when 120px output becomes unreliable during WebP encoding.
- 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.
@@ -93,6 +94,8 @@ python scripts/generate-handpaint-map-sample.py --map fifty-ninth --webp-quality
python scripts/generate-handpaint-map-sample.py --map sixtieth --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map sixty-first --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map sixty-second --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map sixty-third --webp-quality 90
python scripts/generate-handpaint-map-sample.py --map sixty-fourth --webp-quality 90
```
Comparison example:
@@ -165,6 +168,8 @@ python scripts/generate-handpaint-map-sample.py --map thirtieth --tile-size 192
- `src/assets/images/battle/sixtieth-battle-map.webp`
- `src/assets/images/battle/sixty-first-battle-map.webp`
- `src/assets/images/battle/sixty-second-battle-map.webp`
- `src/assets/images/battle/sixty-third-battle-map.webp`
- `src/assets/images/battle/sixty-fourth-battle-map.webp`
## QA Outputs
@@ -290,5 +295,9 @@ python scripts/generate-handpaint-map-sample.py --map thirtieth --tile-size 192
- `docs/sixty-first-battle-map-handpaint-preview.png`
- `docs/sixty-second-battle-map-handpaint-before-after.png`
- `docs/sixty-second-battle-map-handpaint-preview.png`
- `docs/sixty-third-battle-map-handpaint-before-after.png`
- `docs/sixty-third-battle-map-handpaint-preview.png`
- `docs/sixty-fourth-battle-map-handpaint-before-after.png`
- `docs/sixty-fourth-battle-map-handpaint-preview.png`
Browser screenshots are saved per verification run after build/deploy.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

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

@@ -24,6 +24,7 @@ MASSIVE_LARGE_MAP_TILE_SIZE = 144
COLOSSAL_LARGE_MAP_TILE_SIZE = 136
GIGANTIC_LARGE_MAP_TILE_SIZE = 128
IMMENSE_LARGE_MAP_TILE_SIZE = 120
VAST_LARGE_MAP_TILE_SIZE = 112
TILE = DEFAULT_TILE_SIZE
RNG = random.Random(240704)
@@ -623,6 +624,26 @@ MAP_CONFIGS = {
"seed": 241314,
"tile_size": IMMENSE_LARGE_MAP_TILE_SIZE,
},
"sixty-third": {
"slug": "sixty-third-battle-map",
"terrain_export": "sixtyThirdBattleMap",
"units_export": "sixtyThirdBattleUnits",
"ally_positions_export": "sixtyThirdBattleAllyPositions",
"out": BATTLE_IMAGE_DIR / "sixty-third-battle-map.webp",
"before": BATTLE_IMAGE_DIR / "sixty-third-battle-map.svg",
"seed": 241324,
"tile_size": VAST_LARGE_MAP_TILE_SIZE,
},
"sixty-fourth": {
"slug": "sixty-fourth-battle-map",
"terrain_export": "sixtyFourthBattleMap",
"units_export": "sixtyFourthBattleUnits",
"ally_positions_export": "sixtyFourthBattleAllyPositions",
"out": BATTLE_IMAGE_DIR / "sixty-fourth-battle-map.webp",
"before": BATTLE_IMAGE_DIR / "sixty-fourth-battle-map.svg",
"seed": 241334,
"tile_size": VAST_LARGE_MAP_TILE_SIZE,
},
}
@@ -1264,8 +1285,8 @@ def main() -> None:
config = dict(MAP_CONFIGS[args.map])
if args.tile_size is not None:
if args.tile_size < 120:
raise ValueError("--tile-size must be 120 or greater")
if args.tile_size < VAST_LARGE_MAP_TILE_SIZE:
raise ValueError(f"--tile-size must be {VAST_LARGE_MAP_TILE_SIZE} or greater")
config["tile_size"] = args.tile_size
out_path = args.out or Path(config["out"])
before_path = args.before or Path(config["before"])

96
src/assets/images/battle/sixty-fourth-battle-map.svg
View File

@@ -1,96 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 1760" role="img" aria-labelledby="title desc">
<title id="title">Weishui camps map</title>
<desc id="desc">Original tactical battlefield map with Wei River crossings, Shu supply camps, Wei fortified palisades, signal towers, villages, cliffs, roads, and winter ridges.</desc>
<defs>
<linearGradient id="ground" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#4b594a"/>
<stop offset="0.45" stop-color="#77806a"/>
<stop offset="1" stop-color="#9a805e"/>
</linearGradient>
<linearGradient id="river" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#1f405a"/>
<stop offset="0.45" stop-color="#4b7f90"/>
<stop offset="1" stop-color="#9ab5a8"/>
</linearGradient>
<linearGradient id="road" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#b27a4d"/>
<stop offset="0.52" stop-color="#dfbf7b"/>
<stop offset="1" stop-color="#946842"/>
</linearGradient>
<filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="64"/>
<feColorMatrix type="saturate" values="0.18"/>
<feBlend mode="multiply" in2="SourceGraphic"/>
</filter>
<filter id="mist" x="-6%" y="-6%" width="112%" height="112%">
<feGaussianBlur stdDeviation="2.2"/>
</filter>
</defs>
<rect width="2048" height="1760" fill="url(#ground)"/>
<path d="M0 426 C250 328 432 414 640 510 C870 618 1060 574 1284 492 C1528 404 1754 462 2048 344" fill="none" stroke="url(#river)" stroke-width="102" stroke-linecap="round"/>
<path d="M0 560 C292 482 474 580 700 668 C936 760 1118 710 1346 628 C1592 540 1812 584 2048 496" fill="none" stroke="#2c6678" stroke-width="64" stroke-linecap="round" opacity="0.92"/>
<path d="M110 1580 C322 1428 548 1308 790 1160 C1058 996 1324 894 1568 752 C1778 630 1900 560 2040 520" fill="none" stroke="url(#road)" stroke-width="48" stroke-linecap="round"/>
<path d="M250 1422 C458 1322 684 1194 884 1014 C1078 842 1302 810 1532 664 C1748 526 1898 442 2030 384" fill="none" stroke="#c98f5e" stroke-width="30" stroke-linecap="round"/>
<path d="M420 1680 C560 1500 728 1370 952 1246 C1198 1110 1452 1058 1642 914 C1840 764 1940 626 2044 586" fill="none" stroke="#dfb96d" stroke-width="30" stroke-linecap="round"/>
<path d="M610 1234 C760 1100 856 950 1038 840 C1224 728 1428 650 1620 520" fill="none" stroke="#ead08e" stroke-width="24" stroke-linecap="round" opacity="0.92"/>
<g fill="#344734" opacity="0.9">
<path d="M0 0 L610 0 L498 226 L650 440 L360 574 L0 472 Z"/>
<path d="M732 0 L1210 0 L1074 292 L840 430 L676 218 Z"/>
<path d="M1334 0 L2048 0 L2048 300 L1878 258 L1646 382 L1448 226 Z"/>
<path d="M0 722 L436 696 L320 982 L510 1226 L0 1342 Z"/>
<path d="M1546 780 L2048 658 L2048 1222 L1774 1128 L1512 1208 Z"/>
</g>
<g fill="#26372f" opacity="0.82">
<ellipse cx="316" cy="812" rx="270" ry="152"/>
<ellipse cx="630" cy="1050" rx="252" ry="142"/>
<ellipse cx="1110" cy="1300" rx="324" ry="160"/>
<ellipse cx="1522" cy="1164" rx="282" ry="136"/>
<ellipse cx="1116" cy="734" rx="286" ry="132"/>
<ellipse cx="1638" cy="492" rx="232" ry="112"/>
</g>
<g fill="#75593c" stroke="#2f2318" stroke-width="8">
<rect x="238" y="1426" width="286" height="150" rx="6"/>
<rect x="612" y="1236" width="294" height="160" rx="6"/>
<rect x="1014" y="1052" width="306" height="166" rx="6"/>
<rect x="1390" y="798" width="336" height="184" rx="6"/>
<rect x="1714" y="548" width="302" height="168" rx="6"/>
</g>
<g fill="#563d35" stroke="#241915" stroke-width="10">
<path d="M1450 460 L1686 414 L1824 552 L1758 728 L1506 762 L1372 612 Z"/>
<path d="M986 742 L1222 696 L1360 826 L1294 1000 L1040 1032 L912 880 Z"/>
<path d="M1636 196 L1878 168 L2024 292 L1960 460 L1716 496 L1568 354 Z"/>
<path d="M1176 1268 L1400 1230 L1532 1352 L1468 1508 L1228 1534 L1102 1392 Z"/>
<path d="M1712 1012 L1940 980 L2040 1112 L1998 1266 L1756 1284 L1642 1146 Z"/>
</g>
<g fill="#e4c88c" stroke="#58442c" stroke-width="7">
<rect x="166" y="1304" width="126" height="86" rx="5"/>
<rect x="516" y="1142" width="136" height="88" rx="5"/>
<rect x="800" y="988" width="142" height="90" rx="5"/>
<rect x="1260" y="878" width="152" height="94" rx="5"/>
<rect x="1508" y="626" width="142" height="90" rx="5"/>
<rect x="1820" y="376" width="132" height="84" rx="5"/>
</g>
<g opacity="0.26" stroke="#eef0dd" stroke-width="5" stroke-linecap="round" filter="url(#mist)">
<path d="M124 244 C326 194 482 206 684 266"/>
<path d="M732 466 C930 414 1110 430 1318 492"/>
<path d="M1200 158 C1382 116 1580 132 1760 194"/>
<path d="M1320 1086 C1490 1040 1690 1058 1902 1122"/>
</g>
<g fill="#d9b65f" stroke="#4a3320" stroke-width="5">
<circle cx="340" cy="1436" r="22"/>
<circle cx="418" cy="1462" r="18"/>
<circle cx="688" cy="1266" r="21"/>
<circle cx="1108" cy="1080" r="22"/>
<circle cx="1476" cy="822" r="20"/>
<circle cx="1844" cy="562" r="22"/>
<circle cx="1858" cy="1046" r="20"/>
</g>
<g opacity="0.62" fill="#74302c">
<path d="M346 1378 l62 20 -62 20 z"/>
<path d="M700 1204 l66 20 -66 20 z"/>
<path d="M1122 1018 l68 20 -68 20 z"/>
<path d="M1510 766 l68 20 -68 20 z"/>
<path d="M1848 984 l58 18 -58 18 z"/>
</g>
<rect width="2048" height="1760" fill="url(#ground)" opacity="0.06" filter="url(#grain)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 MiB

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

@@ -1,97 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2016 1728" role="img" aria-labelledby="title desc">
<title id="title">Lucheng pursuit map</title>
<desc id="desc">Original tactical battlefield map with Lucheng pursuit roads, Shu return camps, Wei blocking forts, signal towers, rivers, villages, ridge gates, and supply routes.</desc>
<defs>
<linearGradient id="ground" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#3f4d42"/>
<stop offset="0.48" stop-color="#6d7557"/>
<stop offset="1" stop-color="#a2875c"/>
</linearGradient>
<linearGradient id="river" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#213e5a"/>
<stop offset="0.52" stop-color="#3b7081"/>
<stop offset="1" stop-color="#88aaa0"/>
</linearGradient>
<linearGradient id="road" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#bf9360"/>
<stop offset="0.5" stop-color="#e0bd79"/>
<stop offset="1" stop-color="#a4714e"/>
</linearGradient>
<filter id="grain" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="4" seed="63"/>
<feColorMatrix type="saturate" values="0.2"/>
<feBlend mode="multiply" in2="SourceGraphic"/>
</filter>
<filter id="soft" x="-4%" y="-4%" width="108%" height="108%">
<feGaussianBlur stdDeviation="1.3"/>
</filter>
</defs>
<rect width="2016" height="1728" fill="url(#ground)"/>
<path d="M118 94 C332 220 270 468 530 620 C808 782 714 1050 1010 1196 C1272 1326 1274 1514 1580 1612 C1762 1670 1900 1686 1984 1708" fill="none" stroke="url(#river)" stroke-width="82" stroke-linecap="round"/>
<path d="M1088 0 C1012 214 1098 390 1018 560 C940 730 1056 894 958 1088 C876 1252 902 1430 778 1668" fill="none" stroke="#2a6674" stroke-width="50" stroke-linecap="round" opacity="0.9"/>
<path d="M126 1510 C370 1358 620 1304 836 1138 C1062 964 1318 918 1510 734 C1700 552 1840 384 1996 292" fill="none" stroke="url(#road)" stroke-width="46" stroke-linecap="round"/>
<path d="M220 1352 C458 1268 650 1158 810 980 C1014 754 1230 790 1446 616 C1648 452 1818 310 2002 164" fill="none" stroke="#b17f55" stroke-width="30" stroke-linecap="round"/>
<path d="M520 1600 C642 1430 792 1356 994 1226 C1198 1094 1432 1090 1602 932 C1770 774 1862 612 2002 550" fill="none" stroke="#d7ad6b" stroke-width="30" stroke-linecap="round"/>
<path d="M692 1208 C824 1042 894 914 1046 770 C1202 622 1380 520 1560 370" fill="none" stroke="#e4c37d" stroke-width="24" stroke-linecap="round" opacity="0.95"/>
<path d="M424 990 C626 922 820 880 1028 812 C1260 736 1490 656 1694 508" fill="none" stroke="#c18f5d" stroke-width="22" stroke-linecap="round" opacity="0.82"/>
<g fill="#314333" opacity="0.92">
<path d="M0 0 L514 0 L392 230 L542 420 L284 548 L0 442 Z"/>
<path d="M664 0 L1086 0 L954 266 L748 408 L596 216 Z"/>
<path d="M1194 0 L2016 0 L2016 344 L1814 286 L1592 404 L1398 230 Z"/>
<path d="M1508 590 L2016 470 L2016 1030 L1730 936 L1460 1010 Z"/>
<path d="M0 632 L442 690 L278 954 L470 1190 L0 1276 Z"/>
</g>
<g fill="#21362e" opacity="0.78">
<ellipse cx="314" cy="780" rx="248" ry="154"/>
<ellipse cx="618" cy="1032" rx="238" ry="140"/>
<ellipse cx="1248" cy="1270" rx="326" ry="158"/>
<ellipse cx="1606" cy="1116" rx="254" ry="132"/>
<ellipse cx="1054" cy="682" rx="268" ry="134"/>
<ellipse cx="1480" cy="462" rx="210" ry="110"/>
</g>
<g fill="#745b41" stroke="#2f241d" stroke-width="8">
<rect x="250" y="1398" width="260" height="144" rx="6"/>
<rect x="596" y="1204" width="276" height="156" rx="6"/>
<rect x="984" y="1018" width="292" height="162" rx="6"/>
<rect x="1340" y="770" width="318" height="176" rx="6"/>
<rect x="1686" y="410" width="278" height="162" rx="6"/>
</g>
<g fill="#5a3d34" stroke="#251b16" stroke-width="10">
<path d="M1404 428 L1636 386 L1774 510 L1714 682 L1468 718 L1332 586 Z"/>
<path d="M946 704 L1174 660 L1304 786 L1246 960 L1002 990 L874 842 Z"/>
<path d="M1582 154 L1814 130 L1956 250 L1892 406 L1658 442 L1510 308 Z"/>
<path d="M1138 1228 L1354 1194 L1484 1312 L1424 1462 L1188 1486 L1060 1346 Z"/>
<path d="M1718 940 L1920 912 L2010 1036 L1966 1186 L1740 1204 L1636 1076 Z"/>
</g>
<g fill="#e3ca8f" stroke="#5a452f" stroke-width="7">
<rect x="170" y="1282" width="124" height="84" rx="5"/>
<rect x="500" y="1126" width="132" height="86" rx="5"/>
<rect x="762" y="968" width="138" height="88" rx="5"/>
<rect x="1222" y="858" width="148" height="92" rx="5"/>
<rect x="1462" y="580" width="138" height="88" rx="5"/>
<rect x="1764" y="316" width="128" height="82" rx="5"/>
</g>
<g opacity="0.24" stroke="#eff0dc" stroke-width="4" stroke-linecap="round" filter="url(#soft)">
<path d="M134 242 C320 198 456 202 642 250"/>
<path d="M728 444 C900 392 1088 404 1276 462"/>
<path d="M1178 158 C1342 118 1530 132 1710 184"/>
<path d="M1288 1056 C1460 1020 1642 1034 1852 1090"/>
</g>
<g fill="#daba6a" stroke="#4a3422" stroke-width="5">
<circle cx="334" cy="1410" r="22"/>
<circle cx="404" cy="1438" r="18"/>
<circle cx="666" cy="1234" r="21"/>
<circle cx="1074" cy="1044" r="22"/>
<circle cx="1418" cy="792" r="20"/>
<circle cx="1778" cy="428" r="22"/>
<circle cx="1838" cy="976" r="19"/>
</g>
<g opacity="0.6" fill="#77302d">
<path d="M332 1348 l58 18 -58 18 z"/>
<path d="M680 1176 l62 18 -62 18 z"/>
<path d="M1086 986 l66 20 -66 20 z"/>
<path d="M1452 734 l66 20 -66 20 z"/>
<path d="M1830 910 l54 18 -54 18 z"/>
</g>
<rect width="2016" height="1728" fill="url(#ground)" opacity="0.06" filter="url(#grain)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 MiB

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

@@ -12,8 +12,8 @@ import fiftyNinthBattleMapUrl from '../../assets/images/battle/fifty-ninth-battl
import sixtiethBattleMapUrl from '../../assets/images/battle/sixtieth-battle-map.webp';
import sixtyFirstBattleMapUrl from '../../assets/images/battle/sixty-first-battle-map.webp';
import sixtySecondBattleMapUrl from '../../assets/images/battle/sixty-second-battle-map.webp';
import sixtyThirdBattleMapUrl from '../../assets/images/battle/sixty-third-battle-map.svg';
import sixtyFourthBattleMapUrl from '../../assets/images/battle/sixty-fourth-battle-map.svg';
import sixtyThirdBattleMapUrl from '../../assets/images/battle/sixty-third-battle-map.webp';
import sixtyFourthBattleMapUrl from '../../assets/images/battle/sixty-fourth-battle-map.webp';
import sixtyFifthBattleMapUrl from '../../assets/images/battle/sixty-fifth-battle-map.svg';
import sixtySixthBattleMapUrl from '../../assets/images/battle/sixty-sixth-battle-map.svg';
import fiftySeventhBattleMapUrl from '../../assets/images/battle/fifty-seventh-battle-map.webp';