allen/gamercomp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7090e6f01db6d28e716de58a22bedaaea19cb316
gamercomp/frontend/public/docs/BACKGROUND_CATALOG.md
T
Allen 7090e6f01d Initial commit
2026-04-30 02:14:25 +00:00

471 lines
30 KiB
Markdown
Raw Blame History

# Background Catalog
Complete catalog of all 120 procedural backgrounds available in the GamerComp game generation system.
**15 themes x 8 variants = 120 unique backgrounds**
---
## Table of Contents
1. [Overview](#overview)
2. [Theme Categories](#theme-categories)
- [Space](#space-theme)
- [Nature](#nature-theme)
- [Urban](#urban-theme)
- [Fantasy](#fantasy-theme)
- [Abstract](#abstract-theme)
- [Retro](#retro-theme)
- [Indoor](#indoor-theme)
- [Weather](#weather-theme)
- [Sports](#sports-theme)
- [Seasonal](#seasonal-theme)
- [Underwater](#underwater-theme)
- [Sky](#sky-theme)
- [Mechanical](#mechanical-theme)
- [Spooky](#spooky-theme)
- [Colorful](#colorful-theme)
3. [Compatible Music Moods](#compatible-music-moods)
4. [Compatible Avatar Contexts](#compatible-avatar-contexts)
5. [API Usage](#api-usage)
6. [Visual Preview Guide](#visual-preview-guide)
---
## Overview
All backgrounds are procedurally generated using Canvas 2D rendering. Each background features:
- **Animated elements** - Smooth animations driven by time parameter
- **Layered rendering** - Base layer, mid layer, and particle effects
- **Customizable colors** - 4-color palette per background
- **Particle systems** - Optional ambient particles (stars, rain, sparkles, etc.)
- **Mood-based filtering** - Find backgrounds by emotional tone
- **Game genre recommendations** - Suggested game types for each background
### Particle Types Available
| Type | Description |
|------|-------------|
| `stars` | Twinkling star field |
| `rain` | Falling rain drops |
| `snow` | Gentle snowfall |
| `particles` | Generic floating particles |
| `fog` | Drifting fog wisps |
| `bubbles` | Rising bubbles |
| `leaves` | Falling leaves |
| `sparkles` | Glittering sparkles |
| `fireflies` | Glowing fireflies |
| `dust` | Floating dust motes |
---
## Theme Categories
### Space Theme
Cosmic environments featuring nebulas, planets, and interstellar phenomena.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Nebula | `space_nebula` | Swirling nebula clouds with twinkling stars | wonder | `#0B0B2B` `#1A0A3E` `#3D1A78` `#7B2FBE` | sparkles | puzzle, story, creative |
| Asteroid Field | `space_asteroidField` | Rocky asteroids drifting through dark space | tense | `#0A0A14` `#1C1C2E` `#4A3A2A` `#8B7355` | dust | action, racing, sports |
| Deep Space | `space_deepSpace` | The void of deep space with distant starlight | serene | `#000005` `#050510` `#0A0A20` `#111133` | stars | puzzle, story, rpg |
| Planets | `space_planets` | Colorful planets against a starry backdrop | wonder | `#0B0B2B` `#0F1640` `#CC5533` `#44BBAA` | sparkles | creative, rpg, story |
| Space Station | `space_spaceStation` | Orbital station with geometric structures | focused | `#0A0A1E` `#151530` `#3A3A55` `#88AACC` | dust | puzzle, action, physics |
| Warp Speed | `space_warpSpeed` | Light streaks from faster-than-light travel | energetic | `#000010` `#0A0A30` `#2244AA` `#66BBFF` | particles | racing, action, sports |
| Satellites | `space_satellites` | Satellites orbiting above a dark Earth | calm | `#060615` `#101030` `#334466` `#AACCDD` | stars | puzzle, trivia, creative |
| Black Hole | `space_blackHole` | A black hole bending light around its event horizon | intense | `#000000` `#0A0510` `#220A33` `#FF6622` | particles | action, rpg, physics |
---
### Nature Theme
Natural outdoor environments from forests to oceans.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Forest | `nature_forest` | A dense forest with layered canopy and dappled light | peaceful | `#1A3320` `#2D5A27` `#4A7A3F` `#8FB86A` | fireflies | story, rpg, puzzle |
| Jungle | `nature_jungle` | Thick tropical jungle with hanging vines and humid air | adventurous | `#0D2B0D` `#1A4D1A` `#2D7A2D` `#55AA33` | fireflies | action, rpg, pet |
| Desert | `nature_desert` | Rolling sand dunes under a blazing sun | warm | `#F4A460` `#DAA06D` `#C2955A` `#8B6914` | dust | racing, action, rpg |
| Mountains | `nature_mountains` | Snow-capped mountain peaks under sweeping skies | majestic | `#2C3E50` `#4A6B5A` `#7A9B6B` `#FFFFFF` | fog | rpg, sports, story |
| Ocean | `nature_ocean` | Vast ocean stretching to the horizon at sunset | serene | `#1A5276` `#2E86C1` `#5DADE2` `#AED6F1` | fog | puzzle, story, creative |
| Underwater | `nature_underwater` | Deep beneath the waves with shafts of sunlight | mystical | `#0A2342` `#1A4B6E` `#2E86C1` `#48D1CC` | bubbles | puzzle, pet, creative |
| Waterfall | `nature_waterfall` | A cascading waterfall in a lush green cliff | refreshing | `#1B4332` `#2D6A4F` `#52B788` `#B7E4C7` | fog | puzzle, creative, story |
| Meadow | `nature_meadow` | A sunny meadow with wildflowers and gentle breeze | joyful | `#4CAF50` `#81C784` `#A5D6A7` `#FFF59D` | leaves | pet, creative, story, puzzle |
---
### Urban Theme
City environments from skylines to subways.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| City Skyline | `urban_citySkyline` | City skyline silhouetted against a glowing sunset | inspiring | `#1A1A2E` `#2D2D44` `#4A4A66` `#FF8844` | dust | story, rpg, creative |
| Street | `urban_street` | Busy city street with lamp posts and passing lights | busy | `#2C3E50` `#566573` `#808B96` `#FFD700` | dust | racing, action, sports |
| Rooftop | `urban_rooftop` | Rooftop view over a twinkling nighttime city | reflective | `#1B2631` `#2C3E50` `#5D6D7E` `#F4D03F` | fireflies | story, puzzle, creative |
| Neon District | `urban_neonDistrict` | Rain-slicked streets glowing with neon signs | electric | `#0D0D1A` `#1A0A2E` `#FF00FF` `#00FFCC` | rain | action, racing, music |
| Subway | `urban_subway` | Underground subway platform with arriving train lights | gritty | `#1C1C1C` `#333333` `#555555` `#FFCC00` | dust | action, puzzle, rpg |
| Park | `urban_park` | A peaceful city park with trees and walking paths | relaxed | `#2E7D32` `#4CAF50` `#81C784` `#795548` | leaves | pet, puzzle, story, creative |
| Mall | `urban_mall` | Bright mall interior with shop windows and escalators | lively | `#E8E8E8` `#CCCCCC` `#888888` `#FF6B6B` | sparkles | trivia, creative, pet |
| Alley | `urban_alley` | A narrow alley with a single warm light overhead | mysterious | `#111118` `#1E1E28` `#333340` `#BB8844` | fog | rpg, action, story |
---
### Fantasy Theme
Magical and fantastical environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Castle | `fantasy_castle` | A grand castle silhouette against a twilight sky with golden banners | heroic | `#1a1040` `#2d1b69` `#8b7355` `#ffd700` | fireflies | rpg, action, story |
| Dungeon | `fantasy_dungeon` | Dark stone corridors lit by flickering torches and glowing embers | dark | `#0a0a0f` `#1a1520` `#4a3728` `#ff6a00` | particles | rpg, action, puzzle |
| Enchanted Forest | `fantasy_enchantedForest` | A mystical forest with glowing mushrooms and magical light | mystical | `#0a1a0f` `#0d2818` `#1a4a2a` `#44ff88` | fireflies | rpg, story, puzzle |
| Floating Islands | `fantasy_floatingIslands` | Majestic islands suspended in a violet sky with waterfalls | wonder | `#1a0a3a` `#2d1b69` `#5a8a5a` `#88ccff` | sparkles | rpg, puzzle, creative |
| Magical Library | `fantasy_magicalLibrary` | Towering bookshelves with floating magical tomes and arcane symbols | scholarly | `#1a0f0a` `#2d1a10` `#6b4423` `#cc88ff` | sparkles | puzzle, trivia, story |
| Crystal Cave | `fantasy_crystalCave` | An underground cavern filled with luminous crystal formations | ethereal | `#0a0a1a` `#0f1a2d` `#225588` `#44ddff` | sparkles | puzzle, rpg, creative |
| Temple | `fantasy_temple` | An ancient temple with towering marble pillars and sacred golden light | sacred | `#1a1025` `#2d1a3a` `#c9b77a` `#ffd700` | dust | rpg, story, trivia |
| Tower | `fantasy_tower` | A tall wizard tower under a starlit sky with arcane energy | arcane | `#0a0a20` `#151540` `#554488` `#aa66ff` | sparkles | rpg, puzzle, trivia |
---
### Abstract Theme
Non-representational visual patterns and effects.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Geometric Patterns | `abstract_geometricPatterns` | Interlocking geometric shapes in warm contrasting tones | focused | `#0d1b2a` `#1b2838` `#e07a5f` `#f2cc8f` | dust | puzzle, trivia, creative |
| Gradients | `abstract_gradients` | Smoothly blending gradient orbs with ethereal color transitions | dreamy | `#0f0c29` `#302b63` `#24243e` `#ff6b6b` | sparkles | creative, story, music |
| Particle Fields | `abstract_particleFields` | A dynamic network of connected particle nodes with pulsing energy | energetic | `#000000` `#111122` `#00ff88` `#0088ff` | particles | action, puzzle, physics |
| Minimalist | `abstract_minimalist` | Clean open space with a single bold accent line | calm | `#f5f5f0` `#e8e4dd` `#2d2d2d` `#c44536` | none | puzzle, trivia, creative |
| Waves | `abstract_waves` | Layered sinusoidal waves undulating in cool blue tones | flowing | `#0a192f` `#172a45` `#00b4d8` `#90e0ef` | bubbles | creative, music, physics |
| Fractals | `abstract_fractals` | Recursive branching patterns that grow and pulse | complex | `#0a0a0a` `#1a1a2e` `#e94560` `#0f3460` | sparkles | puzzle, physics, creative |
| Kaleidoscope | `abstract_kaleidoscope` | Symmetric radial patterns rotating like a living kaleidoscope | playful | `#1a1a2e` `#16213e` `#e94560` `#ffd166` | sparkles | music, creative, puzzle |
| Matrix | `abstract_matrix` | Cascading columns of digital characters streaming down | digital | `#000000` `#001100` `#00ff41` `#008f11` | none | action, puzzle, trivia |
---
### Retro Theme
Nostalgic gaming aesthetics from past eras.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Pixel Grid | `retro_pixelGrid` | A chunky pixel grid with classic 8-bit color blocks | nostalgic | `#1a1a2e` `#16213e` `#00ff88` `#ff6600` | sparkles | action, puzzle, creative |
| Arcade Cabinet | `retro_arcadeCabinet` | Inside view of a dark arcade with neon-lit cabinet edges | fun | `#0a0a15` `#1a0a2e` `#ff2277` `#ffcc00` | dust | action, racing, sports |
| CRT Effects | `retro_crtEffects` | Authentic CRT monitor with phosphor glow and scan line interference | vintage | `#0a0a0a` `#0f1a0f` `#33ff33` `#88ff88` | none | action, puzzle, trivia |
| Vaporwave | `retro_vaporwave` | Aesthetic sunset horizon with perspective grid and palm silhouettes | aesthetic | `#0d0221` `#261447` `#ff71ce` `#01cdfe` | stars | creative, music, racing |
| Scanlines | `retro_scanlines` | Dense horizontal scan lines over a shifting color field | technical | `#0a0a1a` `#141428` `#00aaff` `#ff4444` | none | action, puzzle, physics |
| Glitch | `retro_glitch` | Fragmented display with chromatic aberration and corrupted data | chaotic | `#0a0a0a` `#1a0a1a` `#ff0055` `#00ffcc` | particles | action, racing, physics |
| 8-Bit | `retro_eightBit` | Charming 8-bit scene with blocky pixel clouds and hills | cheerful | `#2b2b6e` `#3d3d94` `#5bc0eb` `#fde74c` | none | action, puzzle, creative |
| Synthwave | `retro_synthwave` | Outrun-style neon horizon with receding road and mountain silhouettes | epic | `#0d0015` `#1a0033` `#ff2975` `#f222ff` | stars | racing, action, sports |
---
### Indoor Theme
Interior environments and spaces.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Laboratory | `indoor_laboratory` | Dark science lab with glowing equipment and bubbling vials | mysterious | `#1a1e2e` `#2a3040` `#0f6b5e` `#44eebb` | bubbles | puzzle, trivia, rpg |
| Classroom | `indoor_classroom` | Bright classroom with chalkboard, desks, and warm sunlight | cheerful | `#f5f0e0` `#d4c9a8` `#5b8c5a` `#8b5e3c` | dust | trivia, puzzle, story |
| Bedroom | `indoor_bedroom` | Cozy bedroom at night with warm lamp glow and string lights | cozy | `#2a1f3d` `#3d2b5a` `#e8a87c` `#ffd166` | fireflies | story, creative, pet |
| Kitchen | `indoor_kitchen` | Bright kitchen with checkered floor and warm appliance glow | warm | `#fff8e7` `#f0d9a0` `#c97b3a` `#8b4513` | dust | creative, pet, puzzle |
| Arcade | `indoor_arcade` | Dark arcade with neon-lit cabinets and glowing screens | energetic | `#0d0d1a` `#1a0a2e` `#ff00ff` `#00ffff` | sparkles | action, racing, sports |
| Office | `indoor_office` | Modern office with monitor glow and large windows | focused | `#e8e4dc` `#c5bfb2` `#4a6fa5` `#2c3e50` | dust | puzzle, trivia, creative |
| Library | `indoor_library` | Grand library with towering bookshelves and reading lamps | serene | `#2c1810` `#4a3020` `#c4956a` `#f4e4c1` | dust | story, trivia, puzzle, rpg |
| Gym | `indoor_gym` | Modern gym with equipment silhouettes and bright overhead lights | energetic | `#1a1a24` `#2a2a3a` `#ff4444` `#ff8800` | dust | action, sports, racing |
---
### Weather Theme
Atmospheric and meteorological conditions.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Rain | `weather_rain` | Overcast sky with steady rainfall, puddles, and muted city outlines | melancholy | `#3a4a5a` `#2a3a4a` `#5a6a7a` `#8899aa` | rain | story, puzzle, rpg |
| Snow | `weather_snow` | Gentle snowfall over a soft winter landscape with frosted trees | peaceful | `#c8d8e8` `#a0b8cc` `#e8eef4` `#FFFFFF` | snow | puzzle, pet, creative, story |
| Storm | `weather_storm` | Dark storm clouds with heavy rain, wind-bent trees, and thunder | intense | `#1a1a25` `#252535` `#3a3a55` `#667788` | rain | action, rpg, racing |
| Sunset | `weather_sunset` | Vibrant sunset with orange-purple gradient and silhouette landscape | warm | `#1a0a2e` `#cc4400` `#ff8833` `#ffd166` | sparkles | story, creative, pet, music |
| Sunrise | `weather_sunrise` | Early morning sunrise with pink-orange sky, mist, and dewy fields | hopeful | `#2a1a40` `#884466` `#ee8855` `#ffe4a0` | dust | puzzle, pet, creative, sports |
| Fog | `weather_fog` | Thick fog with barely visible shapes and dim lights | eerie | `#8a8a8a` `#666666` `#aaaaaa` `#cccccc` | fog | story, rpg, puzzle |
| Lightning | `weather_lightning` | Pitch-dark sky lit by dramatic lightning bolts | dramatic | `#0a0a18` `#1a1a30` `#3344aa` `#eeeeff` | rain | action, rpg, racing |
| Aurora | `weather_aurora` | Dark arctic sky with shimmering aurora borealis | magical | `#0a0a1a` `#0d1b2a` `#22cc88` `#8844dd` | stars | creative, rpg, story, music |
---
### Sports Theme
Athletic venues and environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Stadium | `sports_stadium` | Large outdoor stadium with green pitch and bright floodlights | exciting | `#1a3a1a` `#2a5a2a` `#88cc44` `#ffffff` | sparkles | sports, action, trivia |
| Race Track | `sports_raceTrack` | Asphalt race track with lane markings and grandstand | fast | `#333333` `#555555` `#cc0000` `#ffffff` | dust | racing, action, sports |
| Court | `sports_court` | Indoor basketball court with polished hardwood and arena lighting | competitive | `#c47a34` `#e8944a` `#ffffff` `#2255aa` | sparkles | sports, action, trivia |
| Field | `sports_field` | Open soccer field under blue sky with goals and corner flags | fresh | `#2a7a2a` `#3a9a3a` `#ffffff` `#88cc44` | leaves | sports, action, pet |
| Arena | `sports_arena` | Dark fighting arena with dramatic spotlights and ropes | intense | `#1a1a2e` `#2a2a44` `#ff4444` `#ffaa00` | dust | action, sports, rpg |
| Pool | `sports_pool` | Olympic swimming pool with lane dividers and rippling water | calm | `#1a6088` `#2288aa` `#44bbdd` `#88eeff` | sparkles | sports, racing, puzzle |
| Gym | `sports_gym` | Gymnastics arena with spring floor and apparatus silhouettes | competitive | `#ddc8a0` `#c4a870` `#ffffff` `#cc3333` | dust | sports, action, creative |
| Skatepark | `sports_skatepark` | Urban skatepark with concrete ramps and graffiti | cool | `#555566` `#777788` `#ff6600` `#ffcc00` | leaves | action, sports, racing, creative |
---
### Seasonal Theme
Time-of-year and holiday-themed environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Spring Meadow | `seasonal_springMeadow` | A sunny spring meadow with wildflowers and gentle hills | cheerful | `#87CEEB` `#98FB98` `#FFD700` `#FF69B4` | leaves | puzzle, creative, pet |
| Autumn Leaves | `seasonal_autumnLeaves` | A warm autumn landscape with falling leaves and golden light | warm | `#2C1810` `#CC5500` `#DD8833` `#FFD700` | leaves | puzzle, story, rpg |
| Winter Wonderland | `seasonal_winterWonderland` | A serene winter landscape with snow-covered hills | calm | `#1A2744` `#4A7CB5` `#C8E0F4` `#FFFFFF` | snow | puzzle, story, creative |
| Summer Beach | `seasonal_summerBeach` | A vibrant summer beach scene with rolling waves and warm sand | energetic | `#0077BE` `#00BFFF` `#F4D03F` `#FF6347` | sparkles | action, sports, racing |
| Harvest | `seasonal_harvest` | Golden harvest fields with wheat rows and warm sunset | warm | `#5C3317` `#D4A017` `#8B4513` `#FFD700` | dust | puzzle, story, creative |
| Blossom | `seasonal_blossom` | Gentle cherry blossom petals drifting under pink-tinted skies | peaceful | `#FFB7C5` `#FF69B4` `#FFF0F5` `#98FB98` | leaves | puzzle, story, creative, music |
| Snowfall | `seasonal_snowfall` | Heavy snowfall over a dark winter night with distant lights | calm | `#0D1B2A` `#1B2838` `#415A77` `#E0E1DD` | snow | puzzle, story, rpg |
| Tropical | `seasonal_tropical` | A lush tropical scene with dense foliage and vivid colors | energetic | `#00CED1` `#FF6347` `#228B22` `#FFD700` | fireflies | action, racing, sports, pet |
---
### Underwater Theme
Aquatic and marine environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Coral Reef | `underwater_coralReef` | A vibrant coral reef teeming with colorful marine life | cheerful | `#006994` `#00A8CC` `#FF6F61` `#FFB347` | bubbles | puzzle, pet, creative |
| Deep Sea | `underwater_deepSea` | The mysterious deep sea with bioluminescent creatures | mysterious | `#0A0A2E` `#0D1B3E` `#1A3A5C` `#00FFCC` | fireflies | rpg, story, puzzle |
| Kelp Forest | `underwater_kelpForest` | A towering kelp forest with dappled light filtering through | peaceful | `#0B4F3A` `#1A7A5C` `#2FA87A` `#7EC8A0` | bubbles | puzzle, creative, story |
| Submarine | `underwater_submarine` | A submarine expedition through dark ocean depths | adventurous | `#0A1628` `#1A3050` `#D4AA44` `#CC4444` | bubbles | action, rpg, story |
| Shipwreck | `underwater_shipwreck` | A sunken ship resting on the ocean floor, overgrown with sea life | mysterious | `#0A1A2A` `#1A3344` `#8B7355` `#44AA88` | bubbles | rpg, story, puzzle |
| Abyss | `underwater_abyss` | The abyssal zone with volcanic vents and glowing magma cracks | dark | `#020208` `#050515` `#0A0A30` `#FF2200` | particles | action, rpg, story |
| Ice Cave | `underwater_iceCave` | An underwater ice cavern with crystalline formations | calm | `#0A2A4A` `#1A5A8A` `#88CCEE` `#E0F0FF` | sparkles | puzzle, story, creative |
| Treasure | `underwater_treasure` | A hidden underwater treasure trove glowing with golden riches | adventurous | `#0D2B45` `#1A4A6A` `#FFD700` `#FF8C00` | sparkles | rpg, action, puzzle |
---
### Sky Theme
Aerial and atmospheric perspectives.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Clouds | `sky_clouds` | A bright blue sky filled with drifting puffy white clouds | peaceful | `#4A90D9` `#87CEEB` `#FFFFFF` `#F0F8FF` | dust | puzzle, creative, pet |
| Flying High | `sky_flyingHigh` | High altitude perspective with streaking wind lines and brilliant sun | energetic | `#1E3A6E` `#4682B4` `#FFD700` `#FFFFFF` | sparkles | action, racing, sports |
| Hot Air Balloon | `sky_hotAirBalloon` | Colorful hot air balloons floating gently across a warm sky | cheerful | `#87CEEB` `#FF6347` `#FFD700` `#FFFFFF` | dust | puzzle, creative, pet, music |
| Airplane View | `sky_airplaneView` | View from an airplane window looking down at a sea of clouds | calm | `#1A3366` `#336699` `#FFFFFF` `#AACCEE` | dust | puzzle, story, creative |
| Stratosphere | `sky_stratosphere` | The edge of space where the atmosphere fades and Earth curves below | mysterious | `#0A0A2E` `#1A1A5E` `#4444AA` `#8888DD` | stars | story, rpg, puzzle |
| Bird's Eye | `sky_birdsEye` | A bird's eye view looking down at patchwork fields and winding rivers | peaceful | `#5588BB` `#88BBDD` `#228B22` `#DEB887` | dust | puzzle, creative, story |
| Horizon | `sky_horizon` | A dramatic sunset horizon with layers of warm orange, pink, and gold | warm | `#1A0533` `#CC4488` `#FF8844` `#FFD700` | dust | story, music, creative, rpg |
| Starfield | `sky_starfield` | A clear night sky bursting with stars and a faint galactic band | calm | `#000011` `#0A0A2A` `#1A1A44` `#FFFFFF` | stars | puzzle, story, rpg, music |
---
### Mechanical Theme
Industrial and technological environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Gears | `mechanical_gears` | Interlocking gears turning against a dark steel backdrop | focused | `#1A1A24` `#2A2A38` `#7A7A88` `#C08040` | dust | puzzle, physics, rpg |
| Circuits | `mechanical_circuits` | Circuit board traces with glowing data paths | focused | `#0A0F14` `#112222` `#00CC88` `#33FFAA` | sparkles | puzzle, trivia, physics |
| Factory | `mechanical_factory` | Factory floor with smokestacks and warning stripes | busy | `#1A1510` `#2A2520` `#8B7355` `#DDAA44` | dust | action, physics, puzzle |
| Robot Factory | `mechanical_robotFactory` | Robot assembly line with mechanical arms and sparks | playful | `#151520` `#222238` `#5588CC` `#FFAA33` | sparkles | action, puzzle, creative |
| Conveyor Belts | `mechanical_conveyorBelts` | Layered conveyor belts moving crates and parts | busy | `#18181F` `#28283A` `#666680` `#DD8822` | dust | puzzle, action, physics |
| Pipes | `mechanical_pipes` | Interconnected pipe network with valves and joints | complex | `#121218` `#1E2A1E` `#558855` `#88BB44` | dust | puzzle, physics, rpg |
| Steampunk | `mechanical_steamPunk` | Brass gears, gauges, and steam vents in warm tones | adventurous | `#1A1008` `#2A1A0A` `#C08040` `#E8C060` | dust | rpg, story, action |
| Tech Lab | `mechanical_techLab` | Clean tech laboratory with holographic displays | curious | `#0E0E1A` `#1A1A30` `#4455AA` `#66DDFF` | sparkles | puzzle, trivia, creative |
---
### Spooky Theme
Eerie and horror-themed environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Haunted House | `spooky_hauntedHouse` | A looming haunted house silhouette against a moonlit sky | eerie | `#0A0812` `#1A1025` `#3A2255` `#CCCC88` | fog | story, puzzle, rpg |
| Graveyard | `spooky_graveyard` | Moonlit graveyard with crooked tombstones and mist | somber | `#080810` `#121828` `#2A3348` `#99AA77` | fog | rpg, story, puzzle |
| Dark Forest | `spooky_darkForest` | Dense dark forest with twisted trees and glowing eyes | foreboding | `#050808` `#0A1510` `#1A2A18` `#3A5530` | fireflies | rpg, action, story |
| Abandoned Building | `spooky_abandonedBuilding` | Crumbling abandoned building with broken windows and debris | desolate | `#0A0A0E` `#181820` `#3A3A48` `#667766` | dust | action, puzzle, rpg |
| Crypt | `spooky_crypt` | Underground stone crypt with torchlight and coffins | dread | `#060608` `#101015` `#2A2A35` `#558855` | dust | rpg, action, story |
| Manor | `spooky_manor` | Gothic manor interior with candlelight and portraits | gothic | `#0A080C` `#1A1020` `#3A2040` `#886644` | dust | story, rpg, puzzle |
| Fog | `spooky_fog` | Thick rolling fog obscuring dark shapes and dim lights | mysterious | `#0A0E12` `#151E28` `#2A3844` `#556688` | fog | story, puzzle, rpg |
| Shadows | `spooky_shadows` | Near-total darkness with shifting shadows and faint light | paranoid | `#050506` `#0E0E14` `#1C1C2A` `#332244` | dust | action, puzzle, rpg |
---
### Colorful Theme
Vibrant and visually striking environments.
| Variant | ID | Description | Mood | Colors | Particles | Recommended For |
|---------|-----|-------------|------|--------|-----------|-----------------|
| Rainbow | `colorful_rainbow` | Bold rainbow arcs and bands across a bright sky | joyful | `#FF4444` `#FFAA33` `#FFEE33` `#44DD55` | sparkles | creative, puzzle, music |
| Paint Splatter | `colorful_paintSplatter` | Colorful paint splatters on a light canvas | creative | `#FAFAE8` `#FF3366` `#3388FF` `#FFCC00` | particles | creative, music, action |
| Candy World | `colorful_candyWorld` | Candy landscape with lollipops, gumdrops, and sugar hills | sweet | `#FFE0F0` `#FF88BB` `#88DDFF` `#AAFFAA` | sparkles | pet, creative, puzzle |
| Disco | `colorful_disco` | Disco floor with mirror ball and sweeping colored lights | energetic | `#1A0A2E` `#2A1A44` `#FF33AA` `#33FFCC` | sparkles | music, action, sports |
| Neon | `colorful_neon` | Neon signs and glowing outlines against dark city night | electric | `#0A0A18` `#151530` `#FF0088` `#00FFCC` | particles | action, racing, music |
| Tie-Dye | `colorful_tieDye` | Swirling tie-dye patterns with organic color blending | psychedelic | `#FF4488` `#FFAA22` `#44DDBB` `#8844FF` | particles | creative, music, story |
| Gradient | `colorful_gradient` | Smooth shifting color gradients with geometric accents | peaceful | `#FF6B6B` `#FECA57` `#48DBFB` `#FF9FF3` | sparkles | puzzle, creative, trivia |
| Prism | `colorful_prism` | Light splitting through prisms into rainbow beams | mystical | `#1A1A2E` `#0F3460` `#E94560` `#FFFFFF` | sparkles | puzzle, physics, creative |
---
## Compatible Music Moods
Backgrounds are tagged with compatible music moods for cohesive game experiences:
| Music Mood | Example Backgrounds |
|------------|---------------------|
| ambient | space_nebula, nature_ocean, weather_fog |
| calm | nature_meadow, weather_snow, sky_clouds |
| dreamy | abstract_gradients, seasonal_blossom, weather_aurora |
| energetic | space_warpSpeed, sports_stadium, colorful_disco |
| epic | fantasy_castle, weather_sunset, mechanical_steamPunk |
| electronic | abstract_particleFields, retro_synthwave, colorful_neon |
| playful | colorful_candyWorld, retro_pixelGrid, mechanical_robotFactory |
| tense | space_asteroidField, spooky_crypt, weather_storm |
| mysterious | underwater_deepSea, spooky_fog, sky_stratosphere |
| happy | seasonal_springMeadow, sky_hotAirBalloon, underwater_treasure |
---
## Compatible Avatar Contexts
Recommended avatar context pairings for backgrounds:
| Background Theme | Recommended Avatar Contexts |
|------------------|----------------------------|
| space | astronaut, robot, alien, superhero |
| nature | explorer, hiker, animal, fairy |
| urban | cyclist, skater, runner, casual |
| fantasy | knight, wizard, fairy, dragon |
| abstract | geometric, minimal, gamer |
| retro | pixel, arcade, classic |
| indoor | student, worker, gamer, casual |
| weather | raincoat, winter, summer |
| sports | athlete, racer, swimmer |
| seasonal | holiday, themed |
| underwater | diver, mermaid, fish |
| sky | pilot, bird, balloon |
| mechanical | robot, engineer, steampunk |
| spooky | ghost, monster, vampire |
| colorful | party, disco, rainbow |
---
## API Usage
### Get All Themes
```javascript
const summary = BackgroundEngine.getThemeSummary();
// Returns: [{ theme: 'space', variants: [...], count: 8 }, ...]
```
### Get Total Background Count
```javascript
const total = BackgroundEngine.getTotalCount();
// Returns: 120
```
### Find Backgrounds by Game Genre
```javascript
const puzzleBackgrounds = BackgroundEngine.findByGenre('puzzle');
// Returns array of backgrounds recommended for puzzle games
```
### Find by Music Mood
```javascript
const calmBackgrounds = BackgroundEngine.findByMusicMood('calm');
// Returns backgrounds compatible with calm music
```
### Get Random Background from Theme
```javascript
const bg = BackgroundEngine.getRandomFromTheme('space');
// Returns: { theme: 'space', variant: 'nebula' } (random)
```
### Get Random Matching Filters
```javascript
const bg = BackgroundEngine.getRandomMatching({
mood: 'energetic',
tags: ['neon']
});
```
### Validate Catalog Integrity
```javascript
const issues = BackgroundEngine.validateCatalog();
// Returns array of any missing/invalid registrations
```
---
## Visual Preview Guide
Each background can be previewed using the BackgroundEngine:
```javascript
// Initialize canvas
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext('2d');
// Render a specific background
BackgroundEngine.set('space', 'nebula');
// In animation loop:
function render(time) {
BackgroundEngine.render(ctx, canvas.width, canvas.height, time / 1000);
requestAnimationFrame(render);
}
render(0);
```
### Color Palette Structure
Each background defines 4 colors:
- **Color 1**: Primary/dominant background color
- **Color 2**: Secondary background color
- **Color 3**: Accent/highlight color
- **Color 4**: Detail/contrast color
### Render Layers
1. **Base Layer** (`renderBase`) - Sky, ground, gradients
2. **Mid Layer** (`renderMid`) - Objects, details, animations
3. **Particle Layer** - Ambient particle effects (optional)
---
## Catalog Statistics
| Metric | Value |
|--------|-------|
| Total Themes | 15 |
| Variants Per Theme | 8 |
| Total Backgrounds | 120 |
| Particle Types | 10 |
| Moods Available | 16 |
| Game Genres Mapped | 10 |
---
*Last Updated: 2026-02-05*
*Version: 1.0.0*
Reference in New Issue View Git Blame Copy Permalink