BACKDROP-GUIDE.md

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)