# Backdrop Creation Guide

## Screen Layout (256×224 pixels)

```
┌─────────────────────────────────────────────────────────────┐
│ 0,0                                                    256,0 │
│                                                               │
│  SCORE: 0      ┌──────────────────┐                          │
│  LEVEL: 1      │                  │         NEXT:            │
│  LINES: 0      │   PLAY AREA      │         ┌──┐             │
│                │   88,32          │         │  │             │
│                │   80×160 px      │         └──┘             │
│                │                  │                          │
│                │   10×20 blocks   │                          │
│                │   (8×8 each)     │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                │                  │                          │
│                └──────────────────┘                          │
│                168,192                                       │
│                                                               │
│ 0,224                                                  256,224│
└─────────────────────────────────────────────────────────────┘
```

## Play Area Specifications

- **Top-left corner**: (88, 32)
- **Bottom-right corner**: (168, 192)
- **Width**: 80 pixels (10 blocks × 8 pixels)
- **Height**: 160 pixels (20 blocks × 8 pixels)
- **Block size**: 8×8 pixels

## UI Element Positions

### Left Side (Score/Stats)
- **Score**: X: 8, Y: 8
- **Level**: X: 8, Y: 24
- **Lines**: X: 8, Y: 40

### Right Side (Next Piece)
- **"NEXT:" label**: X: 184, Y: 40
- **Next piece preview**: X: 184, Y: 52

## Design Tips

1. **Keep the play area visible**: The play area should be clearly distinguishable from the background
2. **Avoid busy patterns in play area**: Keep the area at (88, 32) to (168, 192) relatively clear
3. **Consider contrast**: Blocks will be colored based on your backdrop's dominant colors
4. **Safe zones**: 
   - Left side (0-87): Can have artwork, but leave room for score text
   - Right side (169-256): Can have artwork, but leave room for next piece
   - Top (0-31): Can have artwork/title
   - Bottom (193-224): Can have artwork/footer

## Color Palette Extraction

The game extracts 7 dominant colors from your backdrop to color the Tetris pieces:
- **Color 0**: I-piece (4-block line)
- **Color 1**: O-piece (square)
- **Color 2**: T-piece
- **Color 3**: S-piece
- **Color 4**: Z-piece
- **Color 5**: J-piece
- **Color 6**: L-piece

**Tips for color extraction:**
- Use vibrant, distinct colors in your backdrop
- Avoid too many similar shades
- The algorithm skips very dark colors (brightness < 40)
- Colors are quantized and sorted by frequency

## Template Image

**Quick Start:** Run `npm run generate-template` to create `BACKDROP-TEMPLATE.png`

This template shows:
- **Bright magenta (#FF00FF) play area** - Easy to see and select
- **Grid lines** showing 8×8 pixel blocks
- **Dimension arrows** with measurements
- **Corner markers** in red
- **Labels** for all areas

### Using the Template

1. Run `npm run generate-template`
2. Open `BACKDROP-TEMPLATE.png` in your image editor (Photoshop, GIMP, etc.)
3. Create new layers BELOW the template layer
4. Design your artwork on these layers
5. The magenta area shows exactly where the play area will be
6. When finished, delete or hide the template layer
7. Export as 256×224 PNG
8. Save to `public/assets/backdrops/level-X/backdrop.png`

## Example Workflow

1. Generate and open the template: `npm run generate-template`
2. In your image editor, create layers below the template
3. Design your artwork around the magenta play area
4. Make sure the play area has good contrast
5. Include 7 distinct colors you want for the blocks
6. Delete the template layer
7. Export as PNG (256×224)
8. Place in `public/assets/backdrops/level-X/backdrop.png`
9. Test in game to see the extracted colors

## Placeholder Backdrops

The generated placeholder backdrops show:
- **Yellow border**: Exact play area boundary
- **Yellow corner markers**: Play area corners
- **Grid lines**: 8×8 pixel block grid
- **Labels**: Coordinates and dimensions
- **Level indicator**: "L1", "L2", etc.

Use these as templates to understand the layout before creating your final artwork!

## Resolution Reference

- **Total screen**: 256×224 pixels (classic retro resolution)
- **Play area**: 80×160 pixels
- **Block size**: 8×8 pixels
- **Grid**: 10 blocks wide × 20 blocks tall
- **Aspect ratio**: Approximately 8:7 (slightly wider than square)