# Stratego — Sprite Build Guide Everything you need to build the art for Stratego. There are **two separate deliverables**: 1. **`stratego-pieces.png`** — the unit character spritesheet (the main job). ← this doc 2. **One game-menu icon** at frame 46 of the existing `game-icons.png` (brief note at bottom). The companion file `sprite.md` is the terse code-side spec; this file is the artist-facing build guide. If the two ever disagree, the numbers here were read straight from the running code. --- ## 1. `stratego-pieces.png` — quick facts | Property | Value | |---|---| | **File path** | `public/assets/images/stratego-pieces.png` | | **Source file** | `public/assets/images/stratego-pieces.psd` (keep, like other games) | | **Cell size** | **140 × 140 px** per frame | | **Layout** | **6 columns × 2 rows**, row-major (frame = `row*6 + col`) | | **Full image size** | **840 × 280 px** | | **Frame count** | **12** | | **Background** | **Transparent** (alpha) — required | | **Color mode** | RGBA, 8-bit | Phaser slices it on a fixed 140×140 grid with no padding/margin. Keep every frame inside its own 140×140 cell; don't bleed art across cell boundaries. ### Cell grid (what goes where) ``` col0 col1 col2 col3 col4 col5 row0 [0 Flag ] [1 Spy ] [2 Scout] [3 Miner] [4 Sgt ] [5 Lt ] row1 [6 Capt ] [7 Major] [8 Col ] [9 Gen ] [10 Mrshl][11 Bomb] ``` --- ## 2. Frame-by-frame contents The number is the **rank** (also drawn by code in the corner — see §3). "Qty" is how many of each piece are on a side, for your awareness only — you draw **one** frame per type regardless of quantity. | Frame | Unit | Rank | Qty | Role / art suggestion | |---|---|---|---|---| | 0 | **Flag** | — | 1 | The objective; capturing it wins. A pennant/flag on a staff. | | 1 | **Spy** | 1 | 1 | Assassinates the Marshal *when it attacks*. A masked figure / dagger / cloak. | | 2 | **Scout** | 2 | 8 | Moves any distance in a line. A runner / binoculars / light recon. | | 3 | **Miner** | 3 | 5 | The only piece that can defuse Bombs. A pickaxe / shovel / sapper. | | 4 | **Sergeant** | 4 | 4 | Foot soldier. Chevrons (3 stripes). | | 5 | **Lieutenant** | 5 | 4 | Junior officer. One bar / single pip. | | 6 | **Captain** | 6 | 4 | Officer. Two bars / pips. | | 7 | **Major** | 7 | 3 | Field officer. Oak leaf / higher insignia. | | 8 | **Colonel** | 8 | 2 | Senior officer. Eagle / heavier insignia. | | 9 | **General** | 9 | 1 | High command. Stars (e.g. 3–4 stars). | | 10 | **Marshal** | 10 | 1 | Highest rank. Top insignia — baton / 5 stars / crown. | | 11 | **Bomb** | — | 6 | Immovable; destroys any attacker except a Miner. A round bomb with fuse. | A military-insignia style (chevrons for enlisted, bars/leaves/eagles/stars climbing the officer ranks) reads instantly and gives a natural visual hierarchy, but any consistent set works — these are suggestions, not requirements. --- ## 3. How the art is rendered (important) The engine draws each face-up piece in **three stacked layers**: ``` ┌─────────────────────┐ │ ① colored MEDALLION │ ← code draws this: rounded square in the │ ┌───────────────┐ │ owner's color (red = you, blue = AI), │ ②│ YOUR ART here │ │ with a lighter top bevel. │ │ (this sheet) │ │ ← ② your frame, centered, ~78% of the tile. │ └───────────────┘ │ │ ③ rank # top-left │ ← code draws the white number/letter on top. └─────────────────────┘ ``` So your art only needs to supply the **character/emblem** — not the body, not the number, not the player color. **On-screen sizes** (so you know how much detail survives): - The colored body renders at ~**76 px** square. - Your frame is scaled to ~**78% → ~59 px** square, centered on the body. - The rank number renders at ~**17 px**, white with a black outline, in the **upper-left corner** of the body. **Practical consequences:** - **Reserve the upper-left corner.** Keep roughly the **top-left ~30%** of each frame low-detail / lower-contrast so the white corner number stays legible over it. (Frames 0 Flag and 11 Bomb also get a corner letter — `F` and `B`.) - **Design for ~60 px.** Final display is small, so favor a bold silhouette and clear shapes over fine linework. Build at 140 px native; don't expect hairline detail to read. - **Center the subject** within the cell with a little padding (aim for ~10–15 px of breathing room to the cell edges so nothing clips when scaled). --- ## 4. Color & contrast — must read on BOTH colors This is a **single neutral set**: the *same* 12 frames are drawn on red pieces and on blue pieces (the body color is what distinguishes ownership). Therefore: - **Do not** bake red or blue into the character — it'll disappear on the matching body. Favor **light/neutral fills** (creams, golds, steel, parchment, off-white) with **dark outlines**. - Owner body colors for contrast reference: **red `#c2402f`**, **blue `#3f6fd0`**. Your art must stay legible sitting on top of each. - A consistent **dark outline / drop edge** around the emblem helps it pop on both backgrounds — this is the single most useful trick. --- ## 5. What NOT to include - ❌ **No piece body / frame / medallion** — code draws the colored square. - ❌ **No rank numbers or `B`/`F` letters** — code draws those on top (adding your own would double them up). - ❌ **No red/blue ownership coloring** — same art serves both sides. - ❌ **No face-down "card back"** — the engine draws the hidden-piece back itself; this sheet is only ever shown for revealed/owned pieces. - ❌ **No background fill** — transparency only. --- ## 6. Export checklist - [ ] Canvas exactly **840 × 280 px**, 12 cells on a **6×2** grid of **140×140**. - [ ] All 12 frames filled, in the order in §1–2 (Flag at 0 … Bomb at 11). - [ ] **Transparent** background; no stray pixels outside subjects. - [ ] Each subject centered in its cell with padding; **top-left corner kept clear**. - [ ] Neutral/light palette + dark outline; checked on both `#c2402f` and `#3f6fd0`. - [ ] Export `stratego-pieces.png` to `public/assets/images/`. - [ ] Save the layered `stratego-pieces.psd` alongside it. Until this file exists, the game is fully playable — the engine falls back to code-drawn glyphs (a flag, a bomb, or the big rank number + unit name). Drop the PNG in and it's picked up automatically on next load (it's already wired into the preloader and `textures.exists` check). --- ## 7. Second deliverable — the menu icon (frame 46) Separate file, separate sheet: the game-select menu shows an icon per game from `public/assets/images/game-icons.png` (and its `.psd`), sliced at **44 × 44 px**. Stratego is registered as **`iconFrame: 46`**, so it needs a 44×44 icon placed in that frame slot (row-major; with a 44px grid that's the 47th cell). Suggested subject: a Stratego piece silhouette or crossed flag/bomb motif that reads at small size. This is optional for gameplay but needed for the game to show a proper tile in the menu.