Pixel Art Standard v1.0
Status: Accepted for Sprint 1.0
Scope: all sprites, enemies, bosses, UI, tiles, props, pickups, backgrounds with pixel elements, and VFX.
This document is the internal studio standard for Streetline Heroes pixel art. It defines how production art must be designed, reviewed, exported, and rejected. It is intentionally strict: the game should read like handcrafted arcade pixel art, not noisy retro decoration.
1. Pixel Philosophy
Every pixel must earn its place.
| Principle | Meaning | Production test |
| --- | --- | --- |
| Every pixel has a function | A pixel must define silhouette, volume, material, lighting, motion, UI meaning, or gameplay feedback. | If removing the pixel improves clarity, remove it. |
| No random pixels | Noise is never a substitute for texture. | Texture must appear as deliberate clusters. |
| Readability above detail | A sprite must be understood during motion and at gameplay scale. | Test at 100%, 75%, 50%, and 25%. |
| Shape above texture | Large shapes carry identity; texture only supports them. | If texture damages silhouette, simplify it. |
The production hierarchy is:
silhouette
> pose
> primary shapes
> light and shadow
> material accents
> texture
> tiny detail
Bad priority order:
texture
> tiny detail
> random sparkle
> unreadable silhouette
Studio rule: if a detail cannot survive gameplay scale, it should not control the design.
2. Resolution Rules
| Asset type | Canvas | Notes |
| --- | ---: | --- |
| Characters | 64x64 px | Standard playable and enemy-size body language. |
| Bosses | 96x96 px or 128x128 px | Use 96x96 for human-scale bosses, 128x128 for heavy or set-piece bosses. |
| Tiles | 32x32 px | Tiles must snap cleanly and preserve lane readability. |
| UI | Pixel perfect | No fractional scaling, no blurred edges, no soft raster scaling. |
Character canvas guide:
64x64 character frame
+------------------------------------------------+
| safe motion area |
| |
| head / hair / upper silhouette |
| |
| torso / readable costume shapes |
| |
| arms / attack silhouettes / held props |
| |
| legs / stance / contact |
| |
|---------------- pivot and floor zone ----------|
+------------------------------------------------+
Boss canvas guide:
96x96 or 128x128 boss frame
+------------------------------------------------+
| allow oversize silhouette, weapon arcs, VFX |
| |
| keep head, torso, hands readable separately |
| |
| never fill the full canvas with equal detail |
| |
| strongest readable mass must sit near center |
| |
| floor contact and pivot must stay stable |
+------------------------------------------------+
Tile guide:
32x32 tile
+--------+--------+--------+--------+
| edge | mid | wear | edge |
| rules | plane | marks | rules |
+--------+--------+--------+--------+
UI guide:
pixel-perfect UI
OK: [###-----] hard edges, integer scale
BAD: [##~~----] blur, fractional scale, mushy ramps
3. Pixel Cluster Theory
Pixel clusters are the real brushstrokes of this project. A cluster is a connected group of pixels that reads as a single shape.
Good Clusters
Good clusters describe form, lighting, and material with calm readable shapes.
good cloth shadow cluster
.......
..XX...
.XXXX..
.XXX...
..X....
.......
Why it works:
- It has a clear mass.
- It tapers with the form.
- It does not create noise.
- It can be read when scaled down.
Good metal highlight:
..XX....
.XXXX...
..XX....
...X....
Good skin highlight:
..XXX..
.XXXXX.
.XXXX..
..XX...
Bad Clusters
Bad clusters feel accidental, noisy, or mechanically repeated.
bad random noise
X..X..X
..X.X..
X...X.X
.X..X..
Bad checker texture:
X.X.X.X
.X.X.X.
X.X.X.X
.X.X.X.
Bad equal-width staircase:
X......
.X.....
..X....
...X...
....X..
Isolated Pixels
An isolated pixel is a single pixel that is not connected to a deliberate cluster.
bad isolated pixels
........
..X.....
........
.....X..
........
Allowed only when all of these are true:
| Use | Allowed? | Conditions |
| --- | --- | --- |
| Spark VFX | Yes | Must be animated, purposeful, and short-lived. |
| Eye glint | Rare | Must improve facial read at 100% and not flicker at scale. |
| Metal chip | Rare | Must belong to a readable material cluster. |
| Random texture | No | Replace with shaped clusters. |
Banding
Banding happens when parallel pixel lines hug each other and create a stiff artificial edge.
bad banding
XXXX....
.XXXX...
..XXXX..
...XXXX.
Better:
better cluster transition
XXXX....
..XXX...
...XX...
.....X..
Jagged Edges
Jagged edges are uneven contours that vibrate during animation.
bad jagged edge
X.......
XX......
.X......
XXX.....
..X.....
Better:
controlled contour
XX......
XXX.....
.XXX....
..XX....
Pillow Shading
Pillow shading is centered shading that ignores the shared light source.
bad pillow shading
DDDDDDD
DMMMMMD
DMHHHMD
DMHHHMD
DMMMMMD
DDDDDDD
Correct upper-right lighting:
upper-right key light
MMHHHHH
MMMHHHH
DMMMHHH
DDMMMMH
DDDMMMM
DDDDMMM
Legend:
H = highlight
M = midtone
D = dark
Manual AA
Manual anti-aliasing is allowed only when it clarifies curves and diagonals without blurring the sprite.
hard diagonal
X.....
.X....
..X...
...X..
manual AA diagonal
X.....
mX....
.mX...
..mX..
Legend:
X = primary edge color
m = intermediate material color
Rules:
- Use material colors, not generic gray.
- Use one-pixel AA only where it helps the silhouette.
- Never AA every edge automatically.
- Never create semi-transparent pixels inside sprite art.
Subpixel Detail
Subpixel detail means a tiny mark that suggests a feature smaller than one readable cluster.
Allowed:
eye brow compression
..DD..
.DHH.
..D..
Forbidden:
tiny unreadable costume symbols
X.X.X
.X.X.
X.X.X
If the viewer must zoom in to understand it, it is not gameplay detail.
4. Outline Rules
Outlines are selective, material-dependent, and never pure black.
Forbidden:
#000000 outline around everything
BBBBBBB
BHHHHHB
BHHHHHB
BHHHHHB
BBBBBBB
Preferred:
selective material outline
..dddd.
.dHHHHd
dHHHHH.
.dMMM..
..dd...
| Material | Outline color behavior | Notes |
| --- | --- | --- |
| Metal | Deep cool blue, purple, or desaturated material dark | Crisp edges, controlled specular breaks. |
| Skin | Warm brown, red-brown, or cool shadow skin ramp | Softer contour, avoid heavy cartoon border. |
| Leather | Dark wine, brown, navy, or material-specific near-dark | Can be sharper than cloth. |
| Fabric | Darkened local hue, rarely near-black | Allow folds to break outline selectively. |
| Energy | Saturated dark local hue plus bright inner rim | Avoid full dark boxing around glow. |
| Stone | Cool dark gray, blue-gray, or local shadow hue | Broken edges allowed if cluster controlled. |
Selective outline map:
light from upper right
no heavy outline
H H H
H H H H H
dark D M M H H light
side D D M M H side
D D D M .
strong outline
Rules:
- Use stronger outlines on shadow-side silhouettes.
- Break outlines on the lit side when the form needs air.
- Use contact outlines under feet, fists, weapons, and overlapping limbs.
- Never outline every internal costume seam.
5. Color Rules
| Rule | Standard |
| --- | --- |
| Max colors per character sprite | 24 indexed colors, including outline and glow colors. |
| Max colors for small VFX | Prefer 8 to 16 unless the effect needs layered energy. |
| Tiles | Reuse environment palette ramps aggressively. |
| UI | Reuse UI palette groups and reserve brightest colors for feedback. |
Hue Shifting
Streetline Heroes uses hue shifting to avoid flat ramps.
warm highlight -> local mid -> cool shadow
H: yellow-orange
M: local material hue
D: violet-blue or cool local dark
Bad ramp:
red1 -> red2 -> red3 -> red4
Better ramp:
orange highlight -> red mid -> purple shadow
Contrast
| Use | Contrast |
| --- | --- |
| Foreground characters | High |
| Enemies | High but less saturated than heroes |
| Bosses | Highest silhouette contrast |
| Backgrounds | Medium to low |
| UI health/status | High and stable |
| Decorative props | Medium |
Saturation
Rules:
- Heroes get clearer saturation accents than enemies.
- Enemies use dirtier, more compressed palettes.
- Background saturation must not compete with active combat sprites.
- VFX may be saturated, but the effect must still have a readable shape.
Palette Reuse
Palette reuse keeps production consistent.
shared ramps
skin_warm
cloth_blue
metal_cool
energy_cyan
shadow_purple
sunset_highlight
Highlight colors:
- Warm key highlights from the upper-right.
- Small, purposeful clusters.
- Avoid white unless UI or extreme energy impact needs it.
Shadow colors:
- Cool purple-blue family for most forms.
- Local hue darkening for cloth and skin.
- Never pure black for normal sprite shading.
6. Lighting Rules
Streetline Heroes Lighting Model 01:
key light
\ warm upper-right
\
[HIGHLIGHT]
[MID FORM]
[COOL SHADOW] subtle rim
floor contact shadow
| Light component | Direction | Color tendency | Use |
| --- | --- | --- | --- |
| Key light | Upper-right | Warm sunset | Main form definition. |
| Rim light | Left or outer shadow edge | Cool blue | Separates sprite from background. |
| Ambient | Low and controlled | Local midtone | Prevents dead shapes. |
| Shadow | Lower-left and occluded areas | Cool purple-blue | Adds volume and contact. |
| Reflection | Material-dependent | Nearby hue influence | Metal, wet ground, energy cores. |
Correct sphere logic:
....HHH
..HHHMM
.HHMMMM
.MMDDDD
..DDDDD
....DDD
Wrong multi-source logic:
HHH.DDD
HH.M.HH
D.MMM.D
HH.M.HH
DDD.HHH
Reflective materials:
- Metal can have sharp highlight jumps.
- Leather has smaller, softer highlight breaks.
- Energy can emit internal light, but must not break the shared lighting model unless tagged as a light source.
7. Material Rendering
| Material | Reflection | Contrast | Hue shift | Cluster shape | AA |
| --- | --- | --- | --- | --- | --- |
| Metal | Sharp, planar, high specular | High | Cool shadow, warm highlight | Angular plates, thin bright cuts | Minimal, edge-focused |
| Leather | Oily, small highlights | Medium-high | Warm mid, cool dark | Curved bands, crease clusters | Sparse on curves |
| Cloth | Diffuse | Medium | Local hue to cool shadow | Broad folds, soft blocks | Moderate, never blurry |
| Rubber | Dull, controlled sheen | Medium | Desaturated darks | Thick rounded clusters | Light AA on outer curves |
| Stone | Matte with chips | Medium-low | Cool gray to local warm dust | Broken blocks, chipped edges | Very sparse |
| Energy | Inner glow | High focal contrast | Saturated core to colored falloff | Tapered streaks, arcs, sparks | Use color ramps, no blur |
| Skin | Soft form highlight | Medium | Warm light, red mid, cool shadow | Rounded cheek/knuckle groups | Careful AA on face/hands |
| Hair | Directional sheen | Medium-high | Warm or cool local ramp | Flowing locks, chunky tufts | AA only on silhouette curves |
Metal
metal plate
DDDDHH
DDMMHH
DMMMH.
DDMM..
Keep metal readable with planes, not noise.
Leather
leather bend
DDMMM.
DMMHH.
DMHH..
DDM...
Use compressed highlights on bends and straps.
Cloth
cloth fold
MMMMM.
MMDDD.
MDD...
MMDD..
Cloth clusters should follow gravity and pose.
Rubber
rubber boot
DDDD..
DMMM..
DMMH..
DDDD..
Rubber is readable through mass and edge sheen, not sparkle.
Stone
stone chip
MMMMDD
MMDD..
MMD.H.
DD....
Stone texture must be grouped into chips and cracks.
Energy
energy bolt
..H...
.HHH..
HHMHH.
..MHHH
...H..
Energy needs a strong direction of travel.
Skin
skin volume
..HH..
.HMMM.
.MMDD.
..DD..
Avoid muddy skin ramps and heavy black contours.
Hair
hair tufts
DDHH..
DHHH..
DDMMH.
.DDMM.
Hair should read as large locks first, strand detail second.
8. Shape Language
| Asset type | Shape priority | Readability goal |
| --- | --- | --- |
| Heroes | Iconic, clean, confident | Instantly identifiable at combat scale. |
| Enemies | Functional, aggressive, slightly simpler | Threat role readable before costume detail. |
| Bosses | Large, memorable, exaggerated | Silhouette should dominate the encounter. |
| Props | Simple, readable, material-specific | Breakable or interactive state must be obvious. |
| VFX | Directional, timed, high contrast | Cause and hit result must be readable. |
Heroes:
clear hero triangle
HH
HHHH
HHHHHH
MM
M M
Enemies:
forward pressure
EE
EEEE>>
EEEE
E E
Bosses:
dominant mass
BBBBBBB
BBBBBBBBB
BB BB BB
BBB
B B
Props:
simple object read
crate
+----+
|X /|
| / X|
+----+
Silhouette test:
readable
..XXXX..
.XXXXXX.
XXX..XXX
.XX..XX.
unclear
..X.X...
.XX.XX..
X..X..X.
.X...XX.
9. Animation Readability
Animation must preserve pose clarity under gameplay speed.
| Concept | Standard | Example |
| --- | --- | --- |
| Hold frames | Hold key poses long enough to read. | Idle, block, heavy attack windup. |
| Smear frames | Use only for speed and direction. | Fast punch, shield throw, lightning slash. |
| Anticipation | Show the body preparing action. | Pull fist back before strike. |
| Follow-through | Let energy and limbs settle after impact. | Cape drag, weapon recovery. |
| Impact | Use one or more strong hit frames. | Contact flash, compressed body, hit spark. |
| Landing | Feet and floor contact must be stable. | Dust, knee bend, contact shadow. |
Attack timing example:
frames: 01 02 03 04 05 06 07 08
phase: A A S I H R R R
A = anticipation
S = smear
I = impact
H = hit stop / hold
R = recovery
Readable punch arc:
anticipation smear impact
O O-- O
/|\ /| /|==*
/ \ / \ / \
Bad animation:
idle -> hit with no anticipation
O O==*
| |
/\ /\
10. Readability Tests
Every asset must be checked at 100%, 75%, 50%, and 25%.
| Scale | What must remain | What may disappear |
| --- | --- | --- |
| 100% | Full material read, face/hand clusters, costume accents | Nothing important. |
| 75% | Silhouette, pose, main colors, major material zones | Tiny texture, small chips. |
| 50% | Character class, attack direction, enemy threat role | Facial micro-detail, small symbols. |
| 25% | Broad silhouette, team/threat color, motion direction | Most texture and minor costume detail. |
Scale test diagram:
100% [head][torso][arms][legs][material detail]
75% [head][torso][arms][legs]
50% [silhouette][pose][team color]
25% [mass][direction]
Detail survival rule:
if detail survives 100% only:
it is polish
if detail survives 50%:
it can carry gameplay meaning
if detail survives 25%:
it can carry identity
11. Export Rules
| Requirement | Standard |
| --- | --- |
| Format | PNG |
| Color | RGBA |
| Scaling | Nearest Neighbor only |
| Compression | No destructive compression |
| Pivot | Explicit in metadata |
| Canvas | Fixed per asset class |
| Frame spacing | Consistent and documented |
| Metadata | JSON sidecar required for spritesheets |
Canvas and pivot:
64x64 frame
+----------------+
| |
| sprite |
| |
| X | <- pivot near floor/contact center
+----------------+
Spritesheet layout:
+------+------+------+------+
| 001 | 002 | 003 | 004 |
+------+------+------+------+
| 005 | 006 | 007 | 008 |
+------+------+------+------+
Rules:
- No transparent garbage pixels outside the intended silhouette or VFX.
- No half-pixel offsets.
- No filtered export.
- No resized frames after painting.
- Frame dimensions must match the registry and metadata.
- Pivot must be stable across an animation unless a documented exception exists.
12. QA Checklist
Every asset must pass this minimum checklist before approval:
□ silhouette
□ palette
□ outline
□ lighting
□ cluster quality
□ AA
□ export
□ animation
□ readability
□ pivot
□ naming
□ metadata
Expanded review table:
| Check | Pass condition | Blocker examples |
| --- | --- | --- |
| Silhouette | Asset reads as black shape at gameplay scale. | Pose collapses, weapon/limbs unreadable. |
| Palette | Within allowed color count and shared palette logic. | Too many colors, random ramps, pure black outline. |
| Outline | Material-dependent and selective. | Same outline around every form. |
| Lighting | Uses Lighting Model 01. | Multiple unexplained light sources, pillow shading. |
| Cluster quality | Clusters are deliberate and readable. | Noise, isolated pixels, banding. |
| AA | Manual, sparse, material-aware. | Blur, auto-AA, semi-transparent sprite pixels. |
| Export | PNG RGBA, nearest neighbor, correct canvas. | Wrong size, filtered scaling, bad transparency. |
| Animation | Key poses and timing are readable. | No anticipation, unreadable smear, unstable pivot. |
| Readability | Passes 100%, 75%, 50%, 25% tests. | Details carry meaning but vanish too early. |
| Pivot | Stable and documented. | Character slides or floats during animation. |
| Naming | Matches registry and production naming. | Unregistered asset ID or unclear filename. |
| Metadata | JSON sidecar complete. | Missing frame count, pivot, timing, or animation names. |
Approval rule:
draft -> review -> qa_passed -> approved
Any blocker:
draft/review -> qa_failed -> fix -> review
No asset is approved by vibe. Approval requires passing the checklist, matching the registry, and satisfying the QA score required for that asset.