3.4 KiB
Tetris Attack — art spec
All art is optional and drop-in. The game ships fully playable on procedural
fallbacks; paint a sheet, drop it at the path below, set that path in
data/tetrisattack-artwork.json, and reload — no code changes needed. Any sheet
left path: null keeps rendering procedurally.
Style target: bright, crisp 16-bit Super NES look (no CRT/scanline overlay).
UI text uses the m6x11 pixel font (already loaded).
1. Panels — assets/images/tetrisattack/tetrisattack-panels.png
frameWidth: 48, frameHeight: 48 (a grid of 48×48 cells, left→right, top→bottom).
Six panel colors, in this fixed order (index = color):
| frame | color |
|---|---|
| 0 | red |
| 1 | yellow |
| 2 | green |
| 3 | cyan |
| 4 | purple |
| 5 | blue |
- Row 0 (frames 0–5) — the normal resting panel for each color. Give each a distinct icon/shape as well as a distinct hue (the original uses heart, circle, up-triangle, diamond, star, inverted-triangle) so colorblind players can read the board by shape. The procedural fallback already draws these six shapes.
- Row 1 (frames 6–11) (optional) — the "face / flashing" state shown while a matched group is popping, same color order. If absent, the game tints/flashes the row-0 frame instead.
No "garbage block" art is needed — garbage panels are a versus-only mechanic and this is a 1-player build.
2. Characters — assets/images/tetrisattack/tetrisattack-characters.png
frameWidth: 200, frameHeight: 280 (portrait cells, left→right, top→bottom).
Six characters, 3 poses each = 18 frames. Character order (rows), pose order (columns within a row):
| row | character | frames (neutral, happy, worried) |
|---|---|---|
| 0 | Beth | 0, 1, 2 |
| 1 | Jerry | 3, 4, 5 |
| 2 | Michael | 6, 7, 8 |
| 3 | Steve | 9, 10, 11 |
| 4 | Victor | 12, 13, 14 |
| 5 | Klaxon | 15, 16, 17 |
The six characters are friends you are helping, not opponents — they watch you dig their board out and react to how it's going:
- neutral — used in the Stage Clear intro cutscene and as the idle friend.
- happy — you just pulled off a chain/combo, or cleared their round (they cheer).
- worried — the stack is near the top, or you just topped out (they fret with you).
Until this sheet is supplied, characters fall back to their existing round
portraits from the shared opponents.png sheet (Beth 18, Jerry 10, Michael 15,
Steve 17, Victor 2, Klaxon 29).
To re-theme, re-order, or swap which friends appear, edit
data/tetrisattack.json → stageClear.rounds (each round's characterId,
spriteIndex, and its introLines / winLines / loseLines arrays —
introLines plays in order, one line per keypress, so write as many beats as you
like; win/lose lines are picked at random). The
character↔frame mapping above is by round order, so keep the sheet rows in sync
with that array.
3. Backgrounds — assets/images/tetrisattack/background-{characterId}-r{1..5}.png
One 1920×1080 image per friend per stage (-r1..-r5). These are lazy-loaded as
that friend's round begins, are shown behind their stage, and one of them is
picked at random as the backdrop of their intro cutscene.