Table of Contents

Adding artwork to Banners of Yunhe

Every picture in the game is painted by the program unless an image file replaces it. This is done in the source code (see Source and licence): put a file in public/art/ with the right name and rebuild (npm run build, or the desktop builds). The build lists the folder automatically. Any image you leave out keeps its painted version, so art can be added one piece at a time.

PNG (with transparency) or WebP is best; JPEG works for pictures that fill a rectangle. Sizes are suggestions: images are scaled to fit, so keep the shapes (aspect ratios) given here. Draw at 2× the shown size for sharp results on high-resolution screens.

Remember to record where each image came from, and its licence, in ASSETS.md.

Strategic map

File What Shape and size
map.background.png the whole world map, behind everything 1920 × 1360 (the map area is the centre 1200 × 760, starting 360 from the left and 300 from the top; the rest is the land around it, seen on wide screens). The roads, river and city positions are drawn by the game on top, so leave them out or match src/ui/StrategicMap.tsx
city.plains.png, city.forest.png, city.hills.png a walled town, by terrain 160 × 130, transparent, town standing on the bottom fifth
banner.f01.png … banner.f06.png each house's flag on its pole, used on the map and on the battlefield 64 × 80, transparent, pole on the left edge, foot of the pole at the bottom

Battlefield

File What Shape and size
terrain.plains.png, terrain.forest.png, terrain.hill.png, terrain.water.png, terrain.bridge.png, terrain.wall.png, terrain.gate.png, terrain.gate.damaged.png, terrain.gate.broken.png, terrain.keep.png one hex tile each 152 × 152 with a pointed-top hexagon of radius 68 in the centre; outside the hexagon transparent
unit.foot.f01.png … unit.cavalry.f06.png (formation foot, archers or cavalry, then the house) a squad of soldiers in the house colours, facing right; the game mirrors it for defenders 192 × 128, transparent, feet near the bottom quarter

Interface

File What Shape and size
portrait.o01.png … portrait.o48.png officer portraits (shown only once the officer is known to you) square, 256 × 256
emblem.f01.png … emblem.f06.png a house emblem for the lists and headers square, 64 × 64, transparent
title.png the title-screen picture 1760 × 440

Checking

Run npm run dev and open the game. A misnamed file is simply ignored and the painted version shows. public/art/manifest.json lists what the build found.