monsterplex/src/data/themes.js

115 lines
4.6 KiB
JavaScript

// Per-campaign themes for the IN-LEVEL (play) presentation - the parallax
// background stack, base camera color, and terrain look shown while actually
// driving a level. This is distinct from a campaign's *map* art (bgKey) and
// menu music (musicKey), which live on the campaign object in
// data/levels/index.js.
//
// Adding a new campaign: add one entry below keyed by the campaign's `id`
// (see data/levels/index.js). You may set the whole object or only the bits
// you want to change - getTheme() merges your entry over DEFAULT_THEME, the
// campaign 1 "Evergreen Lake" look - so any field you leave out (or an
// entire missing entry) falls back to the baseline. A brand-new campaign is
// therefore already fully themed and only needs an entry for whatever it
// wants to customize (swap the art, recolor the terrain, add a new theme
// axis for this campaign only, etc.).
//
// Every texture key referenced here must exist in util/assetManifest.js so
// PreloadScene loads it (and a placeholder is generated if the file is
// missing).
// ---------------------------------------------------------------------------
// Terrain styles - the palettes Terrain.js draws the drivable ground with.
// `decor` picks the edge-decoration pass: 'foliage' = grass/leaf tufts
// (the default), 'urban' = graffiti tags, trash, a faded painted centerline,
// oil stains, and a dusk rim light (see Terrain's _drawUrbanDecor & friends).
// ---------------------------------------------------------------------------
// Campaign 1 baseline: painterly foliage + dirt road (Terrain.js's original
// hardcoded palette, moved here untouched - greens picked to match
// assets/backgrounds/bg_mid.png and bg_near.png's foliage).
export const OUTDOORS_TERRAIN = {
decor: 'foliage',
roadTop: 0xa5814f,
roadEdge: 0x5c4128,
roadPebble: 0x50381f,
roadHighlight: 0xc9a56d,
subsoil: 0x3f5c28,
mid: 0x36531f,
deep: 0x223a15,
tufts: [0x4a7a2e, 0x6fa23f, 0x9bbf4a, 0x8a5a3a],
};
// Campaign 2: urban wasteland. The road is dark warm asphalt that reads
// clearly against bg_mid_2/bg_near_2's brown-dusk silhouettes (which hover
// around #2a2329-#473737) - the surface sits a distinct step lighter/warmer
// while the exposed underlayers drop DARKER than the backdrop, so a cut
// cross-section reads as a shadowed trench receding into the scene. The
// faded yellow centerline, neon graffiti, scattered trash, and oil stains
// carry the "abandoned city road" story.
export const URBAN_TERRAIN = {
decor: 'urban',
roadTop: 0x322d2a,
roadEdge: 0x161211,
roadPebble: 0x221c19,
roadHighlight: 0x554b43,
subsoil: 0x241e20,
mid: 0x1a1518,
deep: 0x110e10,
// Faded painted centerline (worn-down yellow, low alpha).
lineColor: 0xd9b44a,
lineAlpha: 0.3,
// Dusk rim light along the road surface (matches bg_far_2's rose sky).
edgeGlow: 0x92656d,
// Neon spray-paint colors for the graffiti tags.
graffiti: [0xff5d8f, 0x53e0d0, 0xffd23e, 0xff8c42, 0xf4f0e6],
// Trash fleck colors, indexed by kind in Terrain:
// [0] crumpled paper, [1]/[2] bottle caps, [3] rusted rebar, [4] glass.
trash: [0xd8d3c8, 0xd85a4a, 0x5a8fd8, 0x6e4632, 0x9fd8e0],
};
// The default / campaign 1 look. Other campaigns inherit from this for any
// field they don't override, so this stays the single source for "the
// baseline presentation".
export const DEFAULT_THEME = {
// Camera background color, drawn behind the parallax stack and only
// visible through gaps. A hex string, the same format the scenes pass to
// Phaser's setBackgroundColor().
bgColor: '#8fc7e8',
// The three parallax layers, back to front. `far` is the full-viewport
// sky; `mid`/`near` are bottom-anchored ground tiles (see PlayScene's
// _buildParallax). Keys are texture keys, not file paths.
parallax: {
far: 'bg_far',
mid: 'bg_mid',
near: 'bg_near',
},
// The drivable ground's palette + decoration style (see above).
terrain: OUTDOORS_TERRAIN,
};
export const THEMES = {
// Campaign 1 uses the baseline presentation as-is.
campaign01: DEFAULT_THEME,
// Campaign 2 ("Underprivileged Community") - the urban _2 background set,
// a dusk base color matched to bg_far_2's sky, and the asphalt-terrain
// look above.
campaign02: {
bgColor: '#92656d',
parallax: {
far: 'bg_far_2',
mid: 'bg_mid_2',
near: 'bg_near_2',
},
terrain: URBAN_TERRAIN,
},
// Add campaign03: { ... } here when it's ready.
};
// Resolves the theme for a campaign id, always returning a complete theme
// (falls back to the default for unknown/absent campaigns).
export function getTheme(campaignId) {
const theme = THEMES[campaignId];
return theme ? { ...DEFAULT_THEME, ...theme } : DEFAULT_THEME;
}