====== 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 [[yunhe:building|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.