# 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: ```text silhouette > pose > primary shapes > light and shadow > material accents > texture > tiny detail ``` Bad priority order: ```text 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: ```text 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: ```text 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: ```text 32x32 tile +--------+--------+--------+--------+ | edge | mid | wear | edge | | rules | plane | marks | rules | +--------+--------+--------+--------+ ``` UI guide: ```text 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. ```text 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: ```text ..XX.... .XXXX... ..XX.... ...X.... ``` Good skin highlight: ```text ..XXX.. .XXXXX. .XXXX.. ..XX... ``` ### Bad Clusters Bad clusters feel accidental, noisy, or mechanically repeated. ```text bad random noise X..X..X ..X.X.. X...X.X .X..X.. ``` Bad checker texture: ```text X.X.X.X .X.X.X. X.X.X.X .X.X.X. ``` Bad equal-width staircase: ```text X...... .X..... ..X.... ...X... ....X.. ``` ### Isolated Pixels An isolated pixel is a single pixel that is not connected to a deliberate cluster. ```text 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. ```text bad banding XXXX.... .XXXX... ..XXXX.. ...XXXX. ``` Better: ```text better cluster transition XXXX.... ..XXX... ...XX... .....X.. ``` ### Jagged Edges Jagged edges are uneven contours that vibrate during animation. ```text bad jagged edge X....... XX...... .X...... XXX..... ..X..... ``` Better: ```text controlled contour XX...... XXX..... .XXX.... ..XX.... ``` ### Pillow Shading Pillow shading is centered shading that ignores the shared light source. ```text bad pillow shading DDDDDDD DMMMMMD DMHHHMD DMHHHMD DMMMMMD DDDDDDD ``` Correct upper-right lighting: ```text upper-right key light MMHHHHH MMMHHHH DMMMHHH DDMMMMH DDDMMMM DDDDMMM ``` Legend: ```text H = highlight M = midtone D = dark ``` ### Manual AA Manual anti-aliasing is allowed only when it clarifies curves and diagonals without blurring the sprite. ```text hard diagonal X..... .X.... ..X... ...X.. ``` manual AA diagonal ```text X..... mX.... .mX... ..mX.. ``` Legend: ```text 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: ```text eye brow compression ..DD.. .DHH. ..D.. ``` Forbidden: ```text 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: ```text #000000 outline around everything BBBBBBB BHHHHHB BHHHHHB BHHHHHB BBBBBBB ``` Preferred: ```text 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: ```text 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. ```text warm highlight -> local mid -> cool shadow H: yellow-orange M: local material hue D: violet-blue or cool local dark ``` Bad ramp: ```text red1 -> red2 -> red3 -> red4 ``` Better ramp: ```text 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. ```text 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: ```text 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: ```text ....HHH ..HHHMM .HHMMMM .MMDDDD ..DDDDD ....DDD ``` Wrong multi-source logic: ```text 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 ```text metal plate DDDDHH DDMMHH DMMMH. DDMM.. ``` Keep metal readable with planes, not noise. ### Leather ```text leather bend DDMMM. DMMHH. DMHH.. DDM... ``` Use compressed highlights on bends and straps. ### Cloth ```text cloth fold MMMMM. MMDDD. MDD... MMDD.. ``` Cloth clusters should follow gravity and pose. ### Rubber ```text rubber boot DDDD.. DMMM.. DMMH.. DDDD.. ``` Rubber is readable through mass and edge sheen, not sparkle. ### Stone ```text stone chip MMMMDD MMDD.. MMD.H. DD.... ``` Stone texture must be grouped into chips and cracks. ### Energy ```text energy bolt ..H... .HHH.. HHMHH. ..MHHH ...H.. ``` Energy needs a strong direction of travel. ### Skin ```text skin volume ..HH.. .HMMM. .MMDD. ..DD.. ``` Avoid muddy skin ramps and heavy black contours. ### Hair ```text 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: ```text clear hero triangle HH HHHH HHHHHH MM M M ``` Enemies: ```text forward pressure EE EEEE>> EEEE E E ``` Bosses: ```text dominant mass BBBBBBB BBBBBBBBB BB BB BB BBB B B ``` Props: ```text simple object read crate +----+ |X /| | / X| +----+ ``` Silhouette test: ```text 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: ```text 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: ```text anticipation smear impact O O-- O /|\ /| /|==* / \ / \ / \ ``` Bad animation: ```text 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: ```text 100% [head][torso][arms][legs][material detail] 75% [head][torso][arms][legs] 50% [silhouette][pose][team color] 25% [mass][direction] ``` Detail survival rule: ```text 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: ```text 64x64 frame +----------------+ | | | sprite | | | | X | <- pivot near floor/contact center +----------------+ ``` Spritesheet layout: ```text +------+------+------+------+ | 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: ```text □ 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: ```text 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.