| # 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) |
|
|
|
|
