broadfield-dev/stack-overflow-game

1# Backdrop Creation Guide2 3## Screen Layout (256×224 pixels)4 5```6┌─────────────────────────────────────────────────────────────┐7│ 0,0                                                    256,0 │8│                                                               │9│  SCORE: 0      ┌──────────────────┐                          │10│  LEVEL: 1      │                  │         NEXT:            │11│  LINES: 0      │   PLAY AREA      │         ┌──┐             │12│                │   88,32          │         │  │             │13│                │   80×160 px      │         └──┘             │14│                │                  │                          │15│                │   10×20 blocks   │                          │16│                │   (8×8 each)     │                          │17│                │                  │                          │18│                │                  │                          │19│                │                  │                          │20│                │                  │                          │21│                │                  │                          │22│                │                  │                          │23│                │                  │                          │24│                │                  │                          │25│                │                  │                          │26│                └──────────────────┘                          │27│                168,192                                       │28│                                                               │29│ 0,224                                                  256,224│30└─────────────────────────────────────────────────────────────┘31```32 33## Play Area Specifications34 35- **Top-left corner**: (88, 32)36- **Bottom-right corner**: (168, 192)37- **Width**: 80 pixels (10 blocks × 8 pixels)38- **Height**: 160 pixels (20 blocks × 8 pixels)39- **Block size**: 8×8 pixels40 41## UI Element Positions42 43### Left Side (Score/Stats)44- **Score**: X: 8, Y: 845- **Level**: X: 8, Y: 2446- **Lines**: X: 8, Y: 4047 48### Right Side (Next Piece)49- **"NEXT:" label**: X: 184, Y: 4050- **Next piece preview**: X: 184, Y: 5251 52## Design Tips53 541. **Keep the play area visible**: The play area should be clearly distinguishable from the background552. **Avoid busy patterns in play area**: Keep the area at (88, 32) to (168, 192) relatively clear563. **Consider contrast**: Blocks will be colored based on your backdrop's dominant colors574. **Safe zones**: 58   - Left side (0-87): Can have artwork, but leave room for score text59   - Right side (169-256): Can have artwork, but leave room for next piece60   - Top (0-31): Can have artwork/title61   - Bottom (193-224): Can have artwork/footer62 63## Color Palette Extraction64 65The game extracts 7 dominant colors from your backdrop to color the Tetris pieces:66- **Color 0**: I-piece (4-block line)67- **Color 1**: O-piece (square)68- **Color 2**: T-piece69- **Color 3**: S-piece70- **Color 4**: Z-piece71- **Color 5**: J-piece72- **Color 6**: L-piece73 74**Tips for color extraction:**75- Use vibrant, distinct colors in your backdrop76- Avoid too many similar shades77- The algorithm skips very dark colors (brightness < 40)78- Colors are quantized and sorted by frequency79 80## Template Image81 82**Quick Start:** Run `npm run generate-template` to create `BACKDROP-TEMPLATE.png`83 84This template shows:85- **Bright magenta (#FF00FF) play area** - Easy to see and select86- **Grid lines** showing 8×8 pixel blocks87- **Dimension arrows** with measurements88- **Corner markers** in red89- **Labels** for all areas90 91### Using the Template92 931. Run `npm run generate-template`942. Open `BACKDROP-TEMPLATE.png` in your image editor (Photoshop, GIMP, etc.)953. Create new layers BELOW the template layer964. Design your artwork on these layers975. The magenta area shows exactly where the play area will be986. When finished, delete or hide the template layer997. Export as 256×224 PNG1008. Save to `public/assets/backdrops/level-X/backdrop.png`101 102## Example Workflow103 1041. Generate and open the template: `npm run generate-template`1052. In your image editor, create layers below the template1063. Design your artwork around the magenta play area1074. Make sure the play area has good contrast1085. Include 7 distinct colors you want for the blocks1096. Delete the template layer1107. Export as PNG (256×224)1118. Place in `public/assets/backdrops/level-X/backdrop.png`1129. Test in game to see the extracted colors113 114## Placeholder Backdrops115 116The generated placeholder backdrops show:117- **Yellow border**: Exact play area boundary118- **Yellow corner markers**: Play area corners119- **Grid lines**: 8×8 pixel block grid120- **Labels**: Coordinates and dimensions121- **Level indicator**: "L1", "L2", etc.122 123Use these as templates to understand the layout before creating your final artwork!124 125## Resolution Reference126 127- **Total screen**: 256×224 pixels (classic retro resolution)128- **Play area**: 80×160 pixels129- **Block size**: 8×8 pixels130- **Grid**: 10 blocks wide × 20 blocks tall131- **Aspect ratio**: Approximately 8:7 (slightly wider than square)132 133