7.2 KiB

Raw Blame History

Stratego — Sprite Build Guide

Everything you need to build the art for Stratego. There are two separate deliverables:

stratego-pieces.png — the unit character spritesheet (the main job). ← this doc
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).

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.

7.2 KiB Raw Blame History Unescape Escape