heros_web/docs/battle-map-art-direction-first-sample.md

Battle Map Art Direction: First Battle Sample

Goal

Raise the first battle map from flat placeholder-like terrain to an original hand-painted tactical RPG battlefield while keeping the existing 20x18 tactical grid, unit positions, movement rules, and battle data unchanged.

Readability Priority

• Unit sprites must read before the map.
• Terrain contrast stays one step below characters, combat UI, and hover/selection feedback.
• Texture detail should add depth without turning into visual noise at an explicit 1920x1080 CSS viewport, 100% browser zoom, and DPR 1.
• Terrain identity must remain clear: road, forest, hill, river, village, camp, fort.

Terrain Palette

• Plain: muted olive grass with subtle yellow-green and brown brush flecks.
• Road: warm dusty tan with irregular edges, wheel marks, and compacted earth strokes.
• Forest: dark desaturated green canopy clusters with soft shadows, not black outlines.
• Hill: ochre stone and dry earth mounds, low-profile shapes that do not compete with units.
• Cliff: darker rock planes with sharper facets, used sparingly as impassable-looking terrain.
• River: subdued blue-green water with horizontal ripple highlights and darker bank shadows.
• Village: small ochre-roof huts, fences, and packed dirt clearings.
• Camp: simple canvas tents and banners, warm tan but low contrast.
• Fort: dark wood palisade and watch platforms with muted yellow flags.

Grid And Tactical Form

• The map art itself should not contain heavy grid lines.
• Tile positions are preserved by rendering each terrain cell at 224px inside the existing 4480x4032 map.
• Organic edges may cross tile boundaries visually, but tactical meaning must still match the terrain array.
• Roads should visually connect from tile center to tile center so route planning is obvious.

Sample Evaluation

• First battle lower-left camp and starting road should guide the eye toward the central route.
• Central village and river should be readable without stealing focus.
• Enemy fort area in the upper-right must imply an enemy line without becoming a large UI-like block.
• At an explicit 1920x1080 CSS viewport, 100% browser zoom, and DPR 1, Liu Bei, Guan Yu, Zhang Fei, and enemy units must remain the strongest silhouettes. Follow docs/desktop-browser-qa-standard.md for capture verification.