Pixelart

Generate a pixel art HTML file based on the user's request: $ARGUMENTS

Input Modes

Mode 1 — Single asset (default): Parse input to extract size (e.g. 16x16, 32x32, 192x128) and prompt. If size is omitted, default to 16x16.

/pixelart 32x32, a wizard with a glowing staff
/pixelart 80x85, stone cottage with red tile roof
/pixelart 50x40, a fox sitting in grass

Mode 2 — Tileset: When prompt contains "tileset", "sprite sheet", or "asset pack", generate a complete sheet of related assets on a single canvas.

/pixelart tileset, medieval village
/pixelart tileset, dungeon crawler
/pixelart tileset, forest nature pack
/pixelart tileset, farm animals

---

Output

A single, complete, self-contained .html file. No external images or dependencies.

---

Auto-Decision Rules

Size → Detail Level

| Size | Detail | Max Colors | Shading | |-----------------|---------|-----------|----------------------------------------| | 8×8 | minimal | 3–5 | Flat colors, no shading | | 12×12 | standard| 5–8 | 1 shadow tone per material | | 16×16 | standard| 8–12 | 1 shadow tone per material | | 16×24, 24×24 | detailed| 10–16 | Highlight + base + shadow per material | | 32×32+ | detailed| 12–20 | Highlight + base + shadow, texture hints| | 48×48+ | ultra | 15–25 | Multi-layer shading, dithering | | 96×64+ (canvas) | ultra | Unlimited | Procedural FBM noise, Bayer dithering | | 48×96+ (asset) | ultra | Unlimited | Procedural texture engine, region-based |

Prompt → Rendering Method

| Prompt implies... | Method | |-------------------------------|----------------------------------------| | Simple icon / item / emoji | CSS box-shadow (zero JS, static) | | Character / sprite | CSS Grid + JS (per-pixel control) | | "animated", movement, effects | Grid + animation JS | | Landscape, scene, environment | Canvas (procedural generation) | | Building, tileset, game asset | Canvas (procedural texture engine) | | Animal, creature, organic | Canvas (procedural organic textures)|

Prompt → Auto Animations & Atmosphere

| Content in prompt | Auto-add | |-------------------------|-------------------------------------------------| | Character with weapon | breathe + gleam (weapon shine) | | Character with hair/cloth| breathe + wind (flutter) | | Has eyes | blink (periodic) | | Night / dark scene | Stars, moon, mist | | Fire / lava | Ember particles, glow | | Water / lake / ocean | Water reflection animation | | Rain / storm | Rain particles | | Cherry blossom / spring | Falling petals | | Snow / winter | Snowflake particles | | Magic / glow / neon | Glow pulse on emissive pixels | | City / urban | Building silhouettes, lit windows | | Any character | fade-in (staggered pixel reveal) |

If nothing suggests effects, output static art.

---

Output Formats

Small art (≤48×48): String-array data + HTML renderer

{{name}} · Pixel Art

  * { margin:0; padding:0; box-sizing:border-box; }
  body { min-height:100vh; display:flex; align-items:center; justify-content:center;
         background:#1a1a2e; font-family:'Courier New',monospace; }
  .pixel-grid { display:grid; gap:0; image-rendering:pixelated; }
  /* animation keyframes as needed */

const ART = {
  name: '{{name}}',
  width: {{W}},
  height: {{H}},
  palette: {
    '.': 'transparent',
    // semantic single-char keys → hex colors
  },
  pixels: [
    // each string = one row, each char = one pixel
  ]
};
// Render with CSS Grid or box-shadow
// Add animations based on auto-decision rules

Large art (≥64px): Canvas-based procedural generation

Use `` with pixel buffer, FBM noise engine, ordered dithering, and layered rendering:

// Core engine
function hash2D(x, y) { /* integer hash → 0-1 */ }
function valueNoise(x, y) { /* smoothstep interpolated */ }
function fbm(x, y, octaves) { /* fractal Brownian motion */ }
function ridgeNoise(x, y, octaves) { /* sharp ridge lines */ }

// Bayer 4×4 ordered dithering
const BAYER = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]];
function ditherColor(x, y, c1, c2, ratio) { /* pick c1 or c2 based on threshold */ }

// PixelBuffer class with: set, get, blend, tri, rect, line
// Layer functions: drawSky, drawSun, drawStars, drawMountains, drawTrees, drawWater, drawBuildings, drawMist...
// Render to canvas with imageSmoothingEnabled = false

---

Design Rules

Palette

• . = transparent (always)
• Semantic mapping: S skin, H hair, E eyes, B body, M mouth, A armor, G gold, R red, W white, D dark
• Uppercase = dark/base, lowercase = light/highlight
• Light source: top-left (consistent)

Character Composition

| Canvas | Head | Body ratio | Border | |---------|--------|-----------|--------| | 8×8 | 4×4 | 1:1 | 0–1px | | 12×12 | 5×5 | 1:1.2 | 1px | | 16×16 | 6×6 | 1:1.5 | 1–2px | | 24×24 | 8×8 | 1:2 | 2px | | 32×32 | 10×10 | 1:2.2 | 2–3px | | 48×48 | 14×14 | 1:2.5 | 3–4px |

• Head proportionally oversized (pixel art convention)
• At least 1px transparent border
• Break perfect symmetry (hair, weapon, pose)
• At 24×24: 2-3 recognizable details > anatomical accuracy (visor line, weapon silhouette, distinct hair)

Drawing Order

1. Silhouette first → get shape right
2. Base colors → one flat color per material
3. Shadows → darker on bottom-right
4. Highlights → lighter on top-left
5. Details → eyes, accessories, weapon
6. Readability check → zoom out, is shape recognizable?

Animation Implementation

| Effect | Implementation | |---------|-------------------------------------------------------------| | breathe | Container translateY(0→-2px), 4s infinite | | gleam | Per-pixel brightness(1→3→1), sweep top→bottom, 5s | | wind | sin(time*2 + x*0.5) brightness on hair/cloth | | fade-in | Per-pixel opacity 0→1, delay x*0.02 + y*0.04s | | blink | Eye pixels opacity toggle, 4s cycle | | glow | box-shadow pulse on emissive pixels |

---

Pixel Font Reference (MUST USE for text/numbers)

When drawing text, numbers, or symbols, do NOT guess pixel placement. Use these exact patterns.

3×5 Digits (0-9)

0: ###  1: .#.  2: ###  3: ###  4: #.#  5: ###  6: ###  7: ###  8: ###  9: ###
   #.#     ##.     ..#     ..#     #.#     #..     #..     ..#     #.#     #.#
   #.#     .#.     ###     .##     ###     ###     ###     .#.     ###     ###
   #.#     .#.     #..     ..#     ..#     ..#     #.#     .#.     #.#     ..#
   ###     ###     ###     ###     ..#     ###     ###     .#.     ###     ###

3×5 Letters (A-Z)

A: .#.  B: ##.  C: ###  D: ##.  E: ###  F: ###  G: ###  H: #.#  I: ###  J: .##
   #.#     #.#     #..     #.#     #..     #..     #..     #.#     .#.     ..#
   ###     ##.     #..     #.#     ###     ##.     #.#     ###     .#.     ..#
   #.#     #.#     #..     #.#     #..     #..     #.#     #.#     .#.     #.#
   #.#     ##.     ###     ##.     ###     #..     ###     #.#     ###     ##.

K: #.#  L: #..  M: #.#  N: #.#  O: ###  P: ###  Q: ###  R: ##.  S: ###  T: ###
   #.#     #..     ###     ##.     #.#     #.#     #.#     #.#     #..     .#.
   ##.     #..     ###     #.#     #.#     ###     #.#     ##.     ###     .#.
   #.#     #..     #.#     #.#     #.#     #..     #.#     #.#     ..#     .#.
   #.#     ###     #.#     #.#     ###     #..     ##.     #.#     ###     .#.

U: #.#  V: #.#  W: #.#  X: #.#  Y: #.#  Z: ###
   #.#     #.#     #.#     .#.     #.#     ..#
   #.#     #.#     ###     .#.     .#.     .#.
   #.#     .#.     ###     .#.     .#.     #..
   ###     .#.     #.#     #.#     .#.     ###

5×7 Digits (larger, more readable)

0: .###.  1: ..#..  2: .###.  3: .###.  4: #..#.  5: #####  6: .###.  7: #####  8: .###.  9: .###.
   #...#     .##..     #...#     #...#     #..#.     #....     #....     ....#     #...#     #...#
   #...#     ..#..     ....#     ....#     #..#.     #....     #....     ...#.     #...#     #...#
   #...#     ..#..     .###.     ..##.     #####     ####.     ####.     ..#..     .###.     .####
   #...#     ..#..     #....     ....#     ...#.     ....#     #...#     ..#..     #...#     ....#
   #...#     ..#..     #....     #...#     ...#.     #...#     #...#     .#...     #...#     #...#
   .###.     .###.     #####     .###.     ...#.     .###.     .###.     .#...     .###.     .###.

Usage rules for text in pixel art:

1. Always copy from the reference above — never approximate
2. Use 3×5 for small art (≤16px canvas), 5×7 for larger (≥24px)
3. Leave 1px gap between characters
4. Align to pixel grid — no half-pixel offsets

---

Core Utility API (for Canvas-based rendering)

Standard helper functions used across all procedural generation. When writing Canvas-based pixel art, include these utilities:

Deterministic Hash

function H(x, y) {
  let n = ((x|0)*374761393 + (y|0)*668265263 + 1013904223)|0;
  n = (((n>>13)^n)*1274126177)|0;
  return (((n>>16)^n)>>>0) / 4294967296;
}

Same (x,y) always produces same value 0–1. Foundation for all procedural textures. Enables reproducible, tileable results without seed management.

Color Manipulation

function hx(s) { return [parseInt(s.slice(1,3),16), parseInt(s.slice(3,5),16), parseInt(s.slice(5,7),16)]; }
function dk(c, a) { return c.map(v => Math.max(0, (v*(1-a))|0)); }           // darken
function lt(c, a) { return c.map(v => Math.min(255, (v+(255-v)*a)|0)); }      // lighten
function nz(c, x, y, r) {                                                      // noise inject
  const n = (H(x*7, y*13) - 0.5) * r;
  return c.map(v => Math.max(0, Math.min(255, (v+n)|0)));
}
function pk(pal, x, y) { return [...pal[Math.floor(H(x,y)*pal.length) % pal.length]]; }  // palette pick
function mix(a, b, t) { return a.map((v,i) => Math.round(v + (b[i]-v) * t)); }            // color mix

Noise Range Guidelines

Different materials need different noise amounts for best results:

| Material | nz() range | Why | |-------------------|-------------|-----| | Stone, walls | 8–10 | High variance, natural appearance | | Wood, planks | 6–8 | Moderate grain texture | | Cloth, fabric | 6–8 | Moderate fold variation | | Metal, polished | 4–5 | Subtle, preserves shine | | Neon, electronics | 15–20 | High flicker, suggests energy | | Foliage, leaves | 10–12 | Organic irregularity | | Sand, dirt | 4–6 | Gentle speckle | | Water | 4–5 | Subtle wave variation |

PixelBuffer Class

class PB {
  constructor(w, h) {
    this.w = w; this.h = h;
    this.rgb = new Uint8ClampedArray(w * h * 3);
    this.mask = new Uint8Array(w * h);
  }
  set(x, y, r, g, b) {
    x |= 0; y |= 0;
    if (x = this.w || y = this.h) return;
    const i = (y * this.w + x) * 3;
    this.rgb[i] = r; this.rgb[i+1] = g; this.rgb[i+2] = b;
    this.mask[y * this.w + x] = 1;
  }
  setC(x, y, c) { this.set(x, y, c[0], c[1], c[2]); }
  get(x, y) {
    x |= 0; y |= 0;
    if (x = this.w || y = this.h) return null;
    if (!this.mask[y * this.w + x]) return null;
    const i = (y * this.w + x) * 3;
    return [this.rgb[i], this.rgb[i+1], this.rgb[i+2]];
  }
  has(x, y) {
    x |= 0; y |= 0;
    return x >= 0 && x = 0 && y  Math.max(0, Math.min(255, (v * light)|0)));
      // Edge darkening: darken pixels adjacent to empty space
      const edges = [!pb.has(x-1,y), !pb.has(x+1,y), !pb.has(x,y-1), !pb.has(x,y+1)];
      const ec = edges.filter(Boolean).length;
      if (ec > 0) c = dk(c, ol * ec * 0.4);
      out.setC(x, y, c);
    }
  return out;
}

Typical values: pp(pb, 0.5, 0.3) — moderate shadow + outline. Use pp(pb, 0.8, 0.4) for dramatic lighting, pp(pb, 0.3, 0.2) for subtle/flat items.

For assets needing more control, use the extended multi-pass pipeline:

pp(pb, { ao: 0.12, light: 0.1, specular: [{cx,cy,r,intensity}], outline: 0.28 })

• passAO — ambient occlusion at region boundaries
• passLight — directional light from top-left
• passSpecular — highlights for metal, crystal, glass
• passOutline — edge darkening

Composition System

RGBA PixelBuffer — All pixels have alpha channel. Supports semi-transparent effects (glow halos, glass, cloth veils).

blitAlpha(src, dst, dx, dy, opts) — Alpha-aware blit with contact shadow:

blitAlpha(sack, scene, 10, 20, {
  contactShadow: true,      // auto-generate shadow below source
  shadowOffset: [1, 2],      // shadow displacement
  shadowAlpha: 0.18,          // shadow opacity
  alpha: 1.0                  // global source opacity
});

blit(src, dst, dx, dy) — Simple copy for tileset assembly:

function blit(src, dst, dx, dy) {
  for (let y = 0; y  1) continue;  // outside ellipse

Use for: tree canopies, character heads, shields, gems, barrel tops, cloud shapes. Avoids explicit alpha — shapes defined by mask test.

Building Construction Order

When generating buildings/structures, always layer in this order:

1. Walls — texStone / texWood / texStucco for the main body
2. Roof — texRoof / texTiles overlaid on top, often with triangle geometry
3. Openings — fillRect for door/window holes, then fill with appropriate material
4. Frames — texWood for door/window frames, outline() for borders
5. Details — chimney, signs, decorative elements, potted plants
6. Post-processing — pp() for directional light + edge outline

Per-Material Shading Guidance

| Material | Tones | Shading pattern | |----------|-------|----------------| | Stone | 5 | deep mortar → stone shadow → base → light → highlight chip | | Wood | 4 | grain dark → grain base → grain light → edge highlight | | Cloth | 5 | fold valley → fold shadow → base → fold light → fold peak | | Metal | 6 | dark ambient → base → reflected mid → reflected light → specular edge → specular peak | | Crystal | 5 | core glow → base facet → facet edge → bright facet → specular point | | Bone | 4 | crack shadow → aged base → surface light → dry highlight |

Dual-Palette Shading Strategy

Instead of per-pixel lighting calculations, use two palettes (light + dark) for each material:

// Define light and dark variants
const folLight = ['#4a8c30','#5aa040','#68b048','#70c050'];
const folDark  = ['#2a5018','#3a6a20','#4a7a28','#3a5a20'];

// In rendering: pick palette based on position
const isTop = dy ` with `PixelBuffer` class. Each pixel is individually addressable. Rendered at configurable scale (3–6x typical) with `image-rendering: pixelated`.

---

## Sprite Template System (for items ≤20px)

For small items (potions, books, bowls, weapons, etc.), do NOT use procedural texture fills. Use **character-grid templates** with material zone annotations. The engine auto-shades each zone based on material type.

### Template Format

```javascript
const POTION = {
  grid: [
    '..cc..',
    '..kk..',
    '.GGGG.',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    '.GGGG.',
  ],
  materials: { c:'

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [SbName](https://github.com/SbName)
- **Source:** [SbName/yoyopixel](https://github.com/SbName/yoyopixel)
- **License:** MIT
- **Homepage:** https://sbname.github.io/yoyopixel/

Install and usage instructions live in the source repository linked above.