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.