pixelart

Generate pixel art as self-contained HTML files. Pure code, zero dependencies. Supports 8x8 icons to full landscape scenes, game tilesets, and procedural assets.

インストールへ移動

リポジトリ: SbName/yoyopixel
ソースの最終更新活動: 2026年4月4日 05:24
検出された SKILL.md の言語: 英語
スター: 5
フォーク: 0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/SbName/yoyopixel --skill pixelart

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

SKILL.md

ソースの指示 · 読み取り専用プレビュー

name	pixelart
description	Generate pixel art as self-contained HTML files. Pure code, zero dependencies. Supports 8x8 icons to full landscape scenes, game tilesets, and procedural assets.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{name}} · Pixel Art</title>
<style>
  * { 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 */
</style>
</head>
<body>
<script>
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
</script>
</body>
</html>

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

Use <canvas> 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

Silhouette first → get shape right
Base colors → one flat color per material
Shadows → darker on bottom-right
Highlights → lighter on top-left
Details → eyes, accessories, weapon
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(time2 + x0.5)` brightness on hair/cloth
fade-in	Per-pixel `opacity 0→1`, delay `x0.02 + y0.04`s
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:

Always copy from the reference above — never approximate
Use 3×5 for small art (≤16px canvas), 5×7 for larger (≥24px)
Leave 1px gap between characters
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 < 0 || x >= this.w || y < 0 || 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 < 0 || x >= this.w || y < 0 || 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 < this.w && y >= 0 && y < this.h && this.mask[y * this.w + x] === 1;
  }
}

Basic Drawing Helpers

function fillRect(pb, x1, y1, x2, y2, c) {
  for (let y = y1; y < y2; y++) for (let x = x1; x < x2; x++) pb.setC(x, y, c);
}
function outline(pb, x1, y1, x2, y2, c) {
  for (let x = x1; x < x2; x++) { pb.setC(x, y1, c); pb.setC(x, y2-1, c); }
  for (let y = y1; y < y2; y++) { pb.setC(x1, y, c); pb.setC(x2-1, y, c); }
}

Reference Palette Library

Production-validated material palettes (tested across 3000+ assets). Use these as starting points — each palette is an array of RGB values from dark to light:

Natural Materials

const PAL = {
  // Stone & Rock
  stone:     ['#4e5060','#5a6670','#6a7680','#8a96a0','#a0acb4'],  // neutral gray stone
  darkStone: ['#30303a','#3a3a44','#44444e','#505058'],             // dungeon, dark walls
  warmStone: ['#6a5a48','#7a6a58','#8a7a68','#9a8a78','#b0a088'],  // sandstone, desert

  // Wood
  wood:      ['#3a2818','#4a3520','#5a4530','#6a5540','#7a6550'],  // standard dark wood
  lightWood: ['#6a4830','#7a5840','#8a6850','#9a7860','#aa8870'],  // birch, light furniture
  darkWood:  ['#2a1808','#3a2010','#4a3018','#5a3820'],            // ebony, dark beams

  // Foliage
  foliageL:  ['#4a8c30','#5aa040','#68b048','#70c050'],            // sunlit leaves (top)
  foliageD:  ['#2a5018','#3a6a20','#4a7a28','#3a5a20'],            // shaded leaves (bottom)
  tropicalL: ['#40a030','#50b040','#60c050','#70d060'],            // tropical bright
  tropicalD: ['#206010','#308020','#409030','#307020'],            // tropical shade

  // Terrain
  grass:     ['#2a5018','#3a6a20','#4a8030','#5a9040','#68a048'],
  darkGrass: ['#1a3a10','#2a4a18','#3a5a20','#4a6a28'],
  dirt:      ['#5a4a30','#6a5a40','#7a6a50','#8a7a60','#9a8a70'],
  sand:      ['#c0a870','#d0b880','#d8c890','#e0d0a0','#e8d8b0'],
  moss:      ['#3a6020','#4a7030','#5a8040','#6a9050'],

  // Water
  water:     ['#2a4a70','#3a5a80','#4a6a90','#5a7aa0','#6a8ab0'],
  deepWater: ['#1a2a50','#2a3a60','#3a4a70','#4a5a80'],
};

Constructed Materials

  // Roof styles
  roofRed:   ['#8a2a20','#a83030','#c04040','#d05050'],
  roofBlue:  ['#2a4a6a','#3a5a7a','#4a6a8a','#5a7a9a'],
  roofBrown: ['#5a4028','#6a5038','#7a6048','#8a7058'],
  thatch:    ['#7a6a30','#8a7a38','#9a8a48','#aa9a58','#baa868'],

  // Metal & Mineral
  iron:      ['#3a3a40','#4a4a50','#5a5a64','#6a6a74'],
  gold:      ['#b08020','#c09030','#d0a040','#e0b850'],
  bone:      ['#c0b8a0','#d0c8b0','#d8d0c0','#e0d8cc'],

  // Fabric & Organic
  cloth:     ['#a03030','#c04040','#d05050','#e06060'],           // red fabric
  clothBlue: ['#3050a0','#4060b0','#5070c0','#6080d0'],
  skin:      ['#c09870','#d0a880','#d8b890','#e0c8a0'],
  hay:       ['#7a5a28','#9a7a38','#b89848','#d0b058','#e8c868'],

  // Special
  lava:      ['#c02010','#e04020','#f06030','#ff8040'],
  coral:     ['#d06060','#e08070','#d0a080','#e0b090'],
  flower:    ['#cc3030','#e05050','#f06060','#ff7070'],
  flowerY:   ['#d0a020','#e0b830','#f0d040'],
  flowerB:   ['#4060c0','#5070d0','#6080e0'],

Warm Palette Convention

Always use saturated, warm-shifted colors for wood/leather/gold — avoid desaturated muddy tones:

Wood light:  #c88848 (not #8b6040)
Wood medium: #a86830 (not #6b4530)
Wood dark:   #4a2810 (not #3a2018)
Gold:        #d8a838 (not #a08030)

Procedural Texture Engine (for game assets & tilesets)

When the prompt implies a building, game asset, tileset, or creature at sizes ≥48px, use the procedural texture engine instead of per-pixel string arrays. The LLM declares regions + materials, the engine auto-fills textures.

Architecture

LLM outputs compact declarations:
  → Shape regions (ellipse, rect, triangle composites)
  → Material assignment per region
  → Engine auto-fills procedural textures + shading + outline

Available Procedural Textures (23 types)

Texture	Algorithm	Use for
`texStone`	Voronoi cells + mortar joints	Stone walls, cobblestone, rock
`texTiles`	Offset grid + overlap shading	Roof tiles, floor tiles
`texRoof`	Offset grid + alternating row offset	Roof tiles with staggered rows
`texStucco`	Noisy flat fill	Plaster, stucco, painted walls
`texWood`	Sin-wave grain pattern, directional (v/h)	Wood beams, planks, furniture
`texPlanks`	Horizontal boards + gap lines + knot spots	Plank floors, chest body, doors
`texBark`	Multi-frequency ridges + cracks	Tree trunks, branches
`texFoliage`	Elliptical blob + density mask + dual-palette	Bushes, tree canopy, hedges
`texWater`	Sinusoidal wave pattern	Rivers, ponds, ocean, puddles
`texSand`	Random speckle + gentle noise	Beaches, desert, sandy paths
`texMoss`	Sparse overlay with coverage control	Moss on rocks, ruins, damp walls
`texFur`	Directional strand pattern	Animal fur, hair, grass
`texScales`	Overlapping crescent grid	Fish, reptile, dragon scales
`texFeathers`	V-shaft + barb layering	Bird plumage, owl, wings
`texSpiral`	Logarithmic spiral + dome shading	Snail shell, ammonite
`texSmooth`	Gradient fill with noise	Smooth skin, fins, body
`texCloth`	Sinusoidal fold bands + micro-folds	Tents, sacks, banners, draped cloth
`texWoven`

Core Texture Implementations

Voronoi Stone — the most-used texture:

function texStone(pb, x1, y1, x2, y2, pal, cellSize, mortarWidth, mortarColor) {
  mortarColor = mortarColor || [30,32,38];
  // Generate random cell centers on a grid
  // For each pixel: find nearest/second-nearest cell center (Manhattan distance)
  // Edge distance (d2-d1) < mortarWidth → mortar color
  // Otherwise → palette color from cell + noise injection
}

Wood Grain — directional:

function texWood(pb, x1, y1, x2, y2, pal, direction) {
  // direction: "v" (vertical grain) or "h" (horizontal)
  // Sin-wave grain: sin(t * 12 + hash-offset) for organic feel
  // Map wave value to palette index
}

Dual-Palette Foliage — light top, dark bottom:

function texFoliage(pb, cx, cy, rx, ry, palLight, palDark, density) {
  // Ellipse mask: dx²/rx² + dy²/ry² ≤ 1
  // Density filter: H(x*3, y*7) < density
  // Top (dy < -0.2) → pick from palLight
  // Bottom → pick from palDark
  // Noise injection for organic feel
}

Roof Tiles — staggered offset:

function texRoof(pb, x1, y1, x2, y2, pal, tileW, tileH) {
  // Offset: odd rows shift by tileW/2
  // Edge pixels (tx==0 or ty==0) → darkened mortar
  // Interior → palette pick with noise
}

Water — wave pattern:

function texWater(pb, x1, y1, x2, y2, pal) {
  // wave = sin((x + y*0.5) * 0.4) * 0.5 + 0.5
  // Map wave to palette index + subtle noise
}

Post-Processing: `pp(pb, shadow, outline)`

Production-validated simple two-parameter post-processing. Returns a new PB (non-destructive):

function pp(pb, sh, ol) {
  const out = new PB(pb.w, pb.h);
  for (let y = 0; y < pb.h; y++)
    for (let x = 0; x < pb.w; x++) {
      if (!pb.has(x, y)) continue;
      let c = pb.get(x, y);
      // Directional light: darken toward bottom-right
      const light = 1 - (x/pb.w * 0.15 + y/pb.h * 0.2) * sh * 3;
      c = c.map(v => 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 < src.h; y++)
    for (let x = 0; x < src.w; x++) {
      if (!src.has(x, y)) continue;
      dst.setC(dx + x, dy + y, src.get(x, y));
    }
}

Assembly pattern — Build complex assets from layered sub-parts:

Assembly = base_structure + blitAlpha(items, contactShadow) + decoration
Example: fruit_stall = wood_frame + cloth_awning(texCloth) + blitAlpha(fruit_crate) × 4

Shape Primitives

Primitive	Usage
`inE(x,y, cx,cy, rx,ry)`	Ellipse — body parts, rocks, barrels, foliage
`inTri(x,y, x1,y1, x2,y2, x3,y3)`	Triangle — roofs, crystal shards
`inPoly(x,y, vertices[])`	Arbitrary polygon — complex silhouettes
`inRR(x,y, x1,y1, x2,y2, r)`	Rounded rectangle — crates, signs, shields
`distY(y, x, freq, amp)`	Sinusoidal Y warp — cloth edges, organic forms

Ellipse masking — the most-used shape technique (15+ uses per pack):

const dx = (x - cx) / rx, dy = (y - cy) / ry;
if (dx * dx + dy * dy > 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:

Walls — texStone / texWood / texStucco for the main body
Roof — texRoof / texTiles overlaid on top, often with triangle geometry
Openings — fillRect for door/window holes, then fill with appropriate material
Frames — texWood for door/window frames, outline() for borders
Details — chimney, signs, decorative elements, potted plants
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 < -0.2;  // top = lit, bottom = shadowed
const c = isTop ? pk(folLight, x, y) : pk(folDark, x, y);

This is simpler and faster than per-pixel shading. Works especially well for foliage, character clothing, and large surfaces.

Neon Glow Layering (for cyberpunk/magic themes)

Three-layer technique for glowing elements:

// Layer 1: Base element (full brightness)
pb.setC(x, y, nz(pk(neonGreen, x, y), x, y, 5));
// Layer 2: Glow halo (darker, spread wider, more noise)
pb.setC(x, y-1, nz(dk(neonGreen[2], 0.6), x, y-1, 8));
// Layer 3: Hot-spot highlight (over-bright center)
pb.setC(x, y, lt(baseColor, 0.3));

For wet surface reflections:

const ref = mix(baseColor, neonColor, 0.15);  // subtle tint, not full color
pb.setC(x, y, nz(ref, x, y, 5));

Asset Size Minimums

Asset type	Minimum size	Recommended
Hero building	64px	80–120px
Furniture / structures	32px	40–56px
Containers (crates, barrels)	20px	24–32px
Small items (potions, food)	12px	16–20px
Detail items (pebbles, coins)	8px	8–12px
Characters	18px	24–36px

Rendering

Uses <canvas> 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

const POTION = {
  grid: [
    '..cc..',
    '..kk..',
    '.GGGG.',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    '.GGGG.',
  ],
  materials: { c:'cork', k:'cork', G:{type:'glass',alpha:200}, L:'liquid' }
};

LLM hand-crafts the shape (which pixels belong to which zone). Engine handles all shading automatically per material type.

Material Shader Types

Each material zone gets its own shading strategy:

Shader	Effect	Use for
`wood`	Directional warm light, grain hint	Handles, frames, furniture
`metal`	Sharp specular band + cool ambient	Blades, armor, iron bands
`gold`	Warm specular + rich ambient	Crowns, coins, fittings
`glass`	Cylindrical highlight + transparency	Bottles, windows, lenses
`liquid`	Horizontal gradient + surface line	Potions, water, soup
`cloth`	Soft folds + directional	Fabric, sacks, pillows
`leather`	Warm directional, moderate contrast	Covers, straps, seats
`ceramic`	Spherical highlight	Bowls, vases, pots
`gem`	Facet shimmer + top-left specular	Gems, crystals
`paper`	Subtle vertical gradient	Scrolls, books interior
`cork`	Warm top-light	Stoppers, small wood
`fire`	Strong top-bright, very warm	Flames, embers
`plant`	Cool-warm directional	Leaves, stems
`flat`	No shading	UI elements, symbols

Hue-Shift Shading

Replace simple darken/lighten with hue-aware shade function:

shade(color, amount, warmth)
// amount: -1 (shadow) to +1 (highlight)
// warmth: 0 (neutral) to 1 (warm highlights, cool shadows)
// Highlights shift toward yellow/white, shadows shift toward blue/purple

Adaptive Outline

Outline color = saturated dark version of the adjacent pixel color (not uniform darkening):

Wood edge → deep brown (not gray)
Metal edge → dark blue-gray (not dark gray)
Plant edge → deep green (not muddy green)

Tileset Mode

When prompt implies tileset / sprite sheet / asset pack, generate a complete sheet of related game-ready assets on a single canvas.

Architecture

1. Shared engine (PB, hash, color utils, geometry, all texture generators, post-processing)
2. Shared palette (all assets use the same color sets for consistency)
3. Asset factories — each returns a standalone PB:
     function mkCottage() { const p = new PB(80,100); /* layers */ return pp(p); }
     function mkBush(rx,ry) { const p = new PB(...); texFoliage(...); return pp(p); }
     function mkRock(w,h) { ... }
4. Composition — blit all assets onto a master canvas:
     const sheet = new PB(370, 280);
     blit(mkCottage(), sheet, 2, 4);
     blit(mkBush(13,11), sheet, 160, 4);
5. Render master canvas at 3x scale

Tileset Composition Rules

Layout: Place the largest/hero asset (building, character) in the top-left. Group related smaller assets by category across the sheet.
Scale: Use 3x rendering scale (gives clear pixels without being too large). Sheet canvas is typically 340–400 × 250–300 pixels.
Background: Neutral gray #c0c0b8 fills the sheet — standard tileset convention.
Shared palette: Define ALL color palettes upfront as a shared P object. Every factory reads from P. This guarantees style consistency.
Post-processing: Apply pp() (autoShade + edgeOutline) to each individual asset PB, NOT to the whole sheet. This prevents cross-asset shading artifacts.
Blit helper: Use blit(src, dst, dx, dy) to copy asset PBs onto the sheet at specific positions.

Asset Factory Pattern

Each asset type is a function that returns a self-contained PB:

// Configurable factory — same function, different params → different variants
function mkBush(w, h, rx, ry) {
  const p = new PB(w, h);
  texFoliage(p, w/2, h/2, rx, ry, P.fol, P.folDk, .82);
  return pp(p, 0.5, 0.3);  // auto-shade + outline
}

// Variant factory — type parameter controls shape
function mkFence(type) {  // 'panel' | 'gate' | 'post'
  const p = new PB(22, 34);
  // posts, beams, iron bands based on type
  return pp(p, 0.5, 0.3);
}

// Call with different params to create variants:
blit(mkBush(30,26,13,11), sheet, 160, 4);   // large
blit(mkBush(24,20,10,8), sheet, 196, 8);     // medium
blit(mkBush(14,12,5,4), sheet, 316, 10);     // small

Theme → Asset List

When generating a tileset, auto-decide which assets to include based on theme:

Theme	Hero asset	Structures	Nature	Terrain	Details
Medieval village	Stone cottage	Fences, crates, well, birdhouse	Bushes, trees, flowers	Cobblestone paths, rocks, cliffs	Grass, stumps, pebbles
Castle	Keep / throne room	Marble floors, arches, banners, pillars	Courtyard garden	Stone floor tiles, walls	Torches, candelabra, shields
Market / Bazaar	Market tent (texCloth awning)	Stalls with goods, weapon rack, potion cart	Potted plants, flowers	Cobblestone, carpet (texWoven)	Fruits, bottles, coins, banners
Fishing village	Wooden warehouse	Shelf racks, barrels, nets, drying rack	Seaweed, coral	Dock planks, water tiles	Fish, crates, sacks, rope, anchor
Dungeon	Castle gate	Torches, doors, chests, barrels	Moss, vines, mushrooms	Stone floor tiles, walls, pits	Bones (texBone), chains, potions
Dark fantasy	Corrupted tower	Spider structures, bone altars, cursed trees	Crystal growths (texCrystal), dark roots (texCoral)	Cracked stone, void tiles	Webs, candles, skull, runes
Tropical / Tribal	Totem pillar, tiki hut	Yurt/tent (texWoven), palm shelter	Palm trees, coral (texCoral), shells	Sand, beach tiles, shallow water	Tiki masks, seashells, rope (texRope)
Forest	Large oak tree	Campfire, tent (texCloth), log cabin	Bushes, ferns, saplings	Dirt paths, streams, boulders	Mushrooms, berries, acorns
Farm	Barn	Fences, troughs, windmill	Crops, haystacks, flowers	Dirt/grass tiles, pond	Chickens, tools, baskets
Desert	Pyramid / obelisk	Sand-brick walls, clay pots, market tent	Cacti, palm trees, dry shrubs	Sand tiles, cracked earth

Assembly recipes for composite assets:

market_stall = wood_frame + texCloth(awning, stripes) + blitAlpha(fruit_crate×4) + contact_shadows
weapon_rack = wood_frame + blitAlpha(sword, texMetal) + blitAlpha(axe) + blitAlpha(shield)
shelf_unit = wood_shelves + blitAlpha(sack, texCloth) + blitAlpha(barrel) + blitAlpha(crate)
fishing_net = rope_frame(texRope) + blitAlpha(hanging_fish×4)
cottage = texStone(walls) + texRoof(roof, trapezoid) + texWood(door_frame) + fillRect(windows) + pp()

Aim for 25–40 assets per tileset, covering all categories.

Atmosphere Implementation

Element	CSS/JS
stars	Random 1-2px dots, opacity twinkle
moon	`border-radius:50%` + radial-gradient + box-shadow glow
rain	1px divs, fast vertical translateY
petals	`border-radius:50% 0 50% 0`, rotate + fall
mist	Translucent gradient div, slow horizontal drift
embers	Small dots rising with box-shadow glow
snow	Small circles, slow fall + horizontal sway
clouds	Multi-layer semi-transparent rounded rects + slow translate
fireflies	Small dots with glow, random walk paths

name	pixelart
description	Generate pixel art as self-contained HTML files. Pure code, zero dependencies. Supports 8x8 icons to full landscape scenes, game tilesets, and procedural assets.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{name}} · Pixel Art</title>
<style>
  * { 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 */
</style>
</head>
<body>
<script>
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
</script>
</body>
</html>

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

Use <canvas> 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

Silhouette first → get shape right
Base colors → one flat color per material
Shadows → darker on bottom-right
Highlights → lighter on top-left
Details → eyes, accessories, weapon
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(time2 + x0.5)` brightness on hair/cloth
fade-in	Per-pixel `opacity 0→1`, delay `x0.02 + y0.04`s
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:

Always copy from the reference above — never approximate
Use 3×5 for small art (≤16px canvas), 5×7 for larger (≥24px)
Leave 1px gap between characters
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 < 0 || x >= this.w || y < 0 || 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 < 0 || x >= this.w || y < 0 || 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 < this.w && y >= 0 && y < this.h && this.mask[y * this.w + x] === 1;
  }
}

Basic Drawing Helpers

function fillRect(pb, x1, y1, x2, y2, c) {
  for (let y = y1; y < y2; y++) for (let x = x1; x < x2; x++) pb.setC(x, y, c);
}
function outline(pb, x1, y1, x2, y2, c) {
  for (let x = x1; x < x2; x++) { pb.setC(x, y1, c); pb.setC(x, y2-1, c); }
  for (let y = y1; y < y2; y++) { pb.setC(x1, y, c); pb.setC(x2-1, y, c); }
}

Reference Palette Library

Production-validated material palettes (tested across 3000+ assets). Use these as starting points — each palette is an array of RGB values from dark to light:

Natural Materials

const PAL = {
  // Stone & Rock
  stone:     ['#4e5060','#5a6670','#6a7680','#8a96a0','#a0acb4'],  // neutral gray stone
  darkStone: ['#30303a','#3a3a44','#44444e','#505058'],             // dungeon, dark walls
  warmStone: ['#6a5a48','#7a6a58','#8a7a68','#9a8a78','#b0a088'],  // sandstone, desert

  // Wood
  wood:      ['#3a2818','#4a3520','#5a4530','#6a5540','#7a6550'],  // standard dark wood
  lightWood: ['#6a4830','#7a5840','#8a6850','#9a7860','#aa8870'],  // birch, light furniture
  darkWood:  ['#2a1808','#3a2010','#4a3018','#5a3820'],            // ebony, dark beams

  // Foliage
  foliageL:  ['#4a8c30','#5aa040','#68b048','#70c050'],            // sunlit leaves (top)
  foliageD:  ['#2a5018','#3a6a20','#4a7a28','#3a5a20'],            // shaded leaves (bottom)
  tropicalL: ['#40a030','#50b040','#60c050','#70d060'],            // tropical bright
  tropicalD: ['#206010','#308020','#409030','#307020'],            // tropical shade

  // Terrain
  grass:     ['#2a5018','#3a6a20','#4a8030','#5a9040','#68a048'],
  darkGrass: ['#1a3a10','#2a4a18','#3a5a20','#4a6a28'],
  dirt:      ['#5a4a30','#6a5a40','#7a6a50','#8a7a60','#9a8a70'],
  sand:      ['#c0a870','#d0b880','#d8c890','#e0d0a0','#e8d8b0'],
  moss:      ['#3a6020','#4a7030','#5a8040','#6a9050'],

  // Water
  water:     ['#2a4a70','#3a5a80','#4a6a90','#5a7aa0','#6a8ab0'],
  deepWater: ['#1a2a50','#2a3a60','#3a4a70','#4a5a80'],
};

Constructed Materials

  // Roof styles
  roofRed:   ['#8a2a20','#a83030','#c04040','#d05050'],
  roofBlue:  ['#2a4a6a','#3a5a7a','#4a6a8a','#5a7a9a'],
  roofBrown: ['#5a4028','#6a5038','#7a6048','#8a7058'],
  thatch:    ['#7a6a30','#8a7a38','#9a8a48','#aa9a58','#baa868'],

  // Metal & Mineral
  iron:      ['#3a3a40','#4a4a50','#5a5a64','#6a6a74'],
  gold:      ['#b08020','#c09030','#d0a040','#e0b850'],
  bone:      ['#c0b8a0','#d0c8b0','#d8d0c0','#e0d8cc'],

  // Fabric & Organic
  cloth:     ['#a03030','#c04040','#d05050','#e06060'],           // red fabric
  clothBlue: ['#3050a0','#4060b0','#5070c0','#6080d0'],
  skin:      ['#c09870','#d0a880','#d8b890','#e0c8a0'],
  hay:       ['#7a5a28','#9a7a38','#b89848','#d0b058','#e8c868'],

  // Special
  lava:      ['#c02010','#e04020','#f06030','#ff8040'],
  coral:     ['#d06060','#e08070','#d0a080','#e0b090'],
  flower:    ['#cc3030','#e05050','#f06060','#ff7070'],
  flowerY:   ['#d0a020','#e0b830','#f0d040'],
  flowerB:   ['#4060c0','#5070d0','#6080e0'],

Warm Palette Convention

Always use saturated, warm-shifted colors for wood/leather/gold — avoid desaturated muddy tones:

Wood light:  #c88848 (not #8b6040)
Wood medium: #a86830 (not #6b4530)
Wood dark:   #4a2810 (not #3a2018)
Gold:        #d8a838 (not #a08030)

Procedural Texture Engine (for game assets & tilesets)

Architecture

LLM outputs compact declarations:
  → Shape regions (ellipse, rect, triangle composites)
  → Material assignment per region
  → Engine auto-fills procedural textures + shading + outline

Available Procedural Textures (23 types)

Texture	Algorithm	Use for
`texStone`	Voronoi cells + mortar joints	Stone walls, cobblestone, rock
`texTiles`	Offset grid + overlap shading	Roof tiles, floor tiles
`texRoof`	Offset grid + alternating row offset	Roof tiles with staggered rows
`texStucco`	Noisy flat fill	Plaster, stucco, painted walls
`texWood`	Sin-wave grain pattern, directional (v/h)	Wood beams, planks, furniture
`texPlanks`	Horizontal boards + gap lines + knot spots	Plank floors, chest body, doors
`texBark`	Multi-frequency ridges + cracks	Tree trunks, branches
`texFoliage`	Elliptical blob + density mask + dual-palette	Bushes, tree canopy, hedges
`texWater`	Sinusoidal wave pattern	Rivers, ponds, ocean, puddles
`texSand`	Random speckle + gentle noise	Beaches, desert, sandy paths
`texMoss`	Sparse overlay with coverage control	Moss on rocks, ruins, damp walls
`texFur`	Directional strand pattern	Animal fur, hair, grass
`texScales`	Overlapping crescent grid	Fish, reptile, dragon scales
`texFeathers`	V-shaft + barb layering	Bird plumage, owl, wings
`texSpiral`	Logarithmic spiral + dome shading	Snail shell, ammonite
`texSmooth`	Gradient fill with noise	Smooth skin, fins, body
`texCloth`	Sinusoidal fold bands + micro-folds	Tents, sacks, banners, draped cloth
`texWoven`

Core Texture Implementations

Voronoi Stone — the most-used texture:

function texStone(pb, x1, y1, x2, y2, pal, cellSize, mortarWidth, mortarColor) {
  mortarColor = mortarColor || [30,32,38];
  // Generate random cell centers on a grid
  // For each pixel: find nearest/second-nearest cell center (Manhattan distance)
  // Edge distance (d2-d1) < mortarWidth → mortar color
  // Otherwise → palette color from cell + noise injection
}

Wood Grain — directional:

function texWood(pb, x1, y1, x2, y2, pal, direction) {
  // direction: "v" (vertical grain) or "h" (horizontal)
  // Sin-wave grain: sin(t * 12 + hash-offset) for organic feel
  // Map wave value to palette index
}

Dual-Palette Foliage — light top, dark bottom:

function texFoliage(pb, cx, cy, rx, ry, palLight, palDark, density) {
  // Ellipse mask: dx²/rx² + dy²/ry² ≤ 1
  // Density filter: H(x*3, y*7) < density
  // Top (dy < -0.2) → pick from palLight
  // Bottom → pick from palDark
  // Noise injection for organic feel
}

Roof Tiles — staggered offset:

function texRoof(pb, x1, y1, x2, y2, pal, tileW, tileH) {
  // Offset: odd rows shift by tileW/2
  // Edge pixels (tx==0 or ty==0) → darkened mortar
  // Interior → palette pick with noise
}

Water — wave pattern:

function texWater(pb, x1, y1, x2, y2, pal) {
  // wave = sin((x + y*0.5) * 0.4) * 0.5 + 0.5
  // Map wave to palette index + subtle noise
}

Post-Processing: `pp(pb, shadow, outline)`

Production-validated simple two-parameter post-processing. Returns a new PB (non-destructive):

function pp(pb, sh, ol) {
  const out = new PB(pb.w, pb.h);
  for (let y = 0; y < pb.h; y++)
    for (let x = 0; x < pb.w; x++) {
      if (!pb.has(x, y)) continue;
      let c = pb.get(x, y);
      // Directional light: darken toward bottom-right
      const light = 1 - (x/pb.w * 0.15 + y/pb.h * 0.2) * sh * 3;
      c = c.map(v => 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 < src.h; y++)
    for (let x = 0; x < src.w; x++) {
      if (!src.has(x, y)) continue;
      dst.setC(dx + x, dy + y, src.get(x, y));
    }
}

Assembly pattern — Build complex assets from layered sub-parts:

Assembly = base_structure + blitAlpha(items, contactShadow) + decoration
Example: fruit_stall = wood_frame + cloth_awning(texCloth) + blitAlpha(fruit_crate) × 4

Shape Primitives

Primitive	Usage
`inE(x,y, cx,cy, rx,ry)`	Ellipse — body parts, rocks, barrels, foliage
`inTri(x,y, x1,y1, x2,y2, x3,y3)`	Triangle — roofs, crystal shards
`inPoly(x,y, vertices[])`	Arbitrary polygon — complex silhouettes
`inRR(x,y, x1,y1, x2,y2, r)`	Rounded rectangle — crates, signs, shields
`distY(y, x, freq, amp)`	Sinusoidal Y warp — cloth edges, organic forms

Ellipse masking — the most-used shape technique (15+ uses per pack):

const dx = (x - cx) / rx, dy = (y - cy) / ry;
if (dx * dx + dy * dy > 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:

Walls — texStone / texWood / texStucco for the main body
Roof — texRoof / texTiles overlaid on top, often with triangle geometry
Openings — fillRect for door/window holes, then fill with appropriate material
Frames — texWood for door/window frames, outline() for borders
Details — chimney, signs, decorative elements, potted plants
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 < -0.2;  // top = lit, bottom = shadowed
const c = isTop ? pk(folLight, x, y) : pk(folDark, x, y);

This is simpler and faster than per-pixel shading. Works especially well for foliage, character clothing, and large surfaces.

Neon Glow Layering (for cyberpunk/magic themes)

Three-layer technique for glowing elements:

// Layer 1: Base element (full brightness)
pb.setC(x, y, nz(pk(neonGreen, x, y), x, y, 5));
// Layer 2: Glow halo (darker, spread wider, more noise)
pb.setC(x, y-1, nz(dk(neonGreen[2], 0.6), x, y-1, 8));
// Layer 3: Hot-spot highlight (over-bright center)
pb.setC(x, y, lt(baseColor, 0.3));

For wet surface reflections:

const ref = mix(baseColor, neonColor, 0.15);  // subtle tint, not full color
pb.setC(x, y, nz(ref, x, y, 5));

Asset Size Minimums

Asset type	Minimum size	Recommended
Hero building	64px	80–120px
Furniture / structures	32px	40–56px
Containers (crates, barrels)	20px	24–32px
Small items (potions, food)	12px	16–20px
Detail items (pebbles, coins)	8px	8–12px
Characters	18px	24–36px

Rendering

Uses <canvas> 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)

Template Format

const POTION = {
  grid: [
    '..cc..',
    '..kk..',
    '.GGGG.',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    'GLLLLG',
    '.GGGG.',
  ],
  materials: { c:'cork', k:'cork', G:{type:'glass',alpha:200}, L:'liquid' }
};

LLM hand-crafts the shape (which pixels belong to which zone). Engine handles all shading automatically per material type.

Material Shader Types

Each material zone gets its own shading strategy:

Shader	Effect	Use for
`wood`	Directional warm light, grain hint	Handles, frames, furniture
`metal`	Sharp specular band + cool ambient	Blades, armor, iron bands
`gold`	Warm specular + rich ambient	Crowns, coins, fittings
`glass`	Cylindrical highlight + transparency	Bottles, windows, lenses
`liquid`	Horizontal gradient + surface line	Potions, water, soup
`cloth`	Soft folds + directional	Fabric, sacks, pillows
`leather`	Warm directional, moderate contrast	Covers, straps, seats
`ceramic`	Spherical highlight	Bowls, vases, pots
`gem`	Facet shimmer + top-left specular	Gems, crystals
`paper`	Subtle vertical gradient	Scrolls, books interior
`cork`	Warm top-light	Stoppers, small wood
`fire`	Strong top-bright, very warm	Flames, embers
`plant`	Cool-warm directional	Leaves, stems
`flat`	No shading	UI elements, symbols

Hue-Shift Shading

Replace simple darken/lighten with hue-aware shade function:

shade(color, amount, warmth)
// amount: -1 (shadow) to +1 (highlight)
// warmth: 0 (neutral) to 1 (warm highlights, cool shadows)
// Highlights shift toward yellow/white, shadows shift toward blue/purple

Adaptive Outline

Outline color = saturated dark version of the adjacent pixel color (not uniform darkening):

Wood edge → deep brown (not gray)
Metal edge → dark blue-gray (not dark gray)
Plant edge → deep green (not muddy green)

Tileset Mode

When prompt implies tileset / sprite sheet / asset pack, generate a complete sheet of related game-ready assets on a single canvas.

Architecture

1. Shared engine (PB, hash, color utils, geometry, all texture generators, post-processing)
2. Shared palette (all assets use the same color sets for consistency)
3. Asset factories — each returns a standalone PB:
     function mkCottage() { const p = new PB(80,100); /* layers */ return pp(p); }
     function mkBush(rx,ry) { const p = new PB(...); texFoliage(...); return pp(p); }
     function mkRock(w,h) { ... }
4. Composition — blit all assets onto a master canvas:
     const sheet = new PB(370, 280);
     blit(mkCottage(), sheet, 2, 4);
     blit(mkBush(13,11), sheet, 160, 4);
5. Render master canvas at 3x scale

Tileset Composition Rules

Layout: Place the largest/hero asset (building, character) in the top-left. Group related smaller assets by category across the sheet.
Scale: Use 3x rendering scale (gives clear pixels without being too large). Sheet canvas is typically 340–400 × 250–300 pixels.
Background: Neutral gray #c0c0b8 fills the sheet — standard tileset convention.
Shared palette: Define ALL color palettes upfront as a shared P object. Every factory reads from P. This guarantees style consistency.
Post-processing: Apply pp() (autoShade + edgeOutline) to each individual asset PB, NOT to the whole sheet. This prevents cross-asset shading artifacts.
Blit helper: Use blit(src, dst, dx, dy) to copy asset PBs onto the sheet at specific positions.

Asset Factory Pattern

Each asset type is a function that returns a self-contained PB:

// Configurable factory — same function, different params → different variants
function mkBush(w, h, rx, ry) {
  const p = new PB(w, h);
  texFoliage(p, w/2, h/2, rx, ry, P.fol, P.folDk, .82);
  return pp(p, 0.5, 0.3);  // auto-shade + outline
}

// Variant factory — type parameter controls shape
function mkFence(type) {  // 'panel' | 'gate' | 'post'
  const p = new PB(22, 34);
  // posts, beams, iron bands based on type
  return pp(p, 0.5, 0.3);
}

// Call with different params to create variants:
blit(mkBush(30,26,13,11), sheet, 160, 4);   // large
blit(mkBush(24,20,10,8), sheet, 196, 8);     // medium
blit(mkBush(14,12,5,4), sheet, 316, 10);     // small

Theme → Asset List

When generating a tileset, auto-decide which assets to include based on theme:

Theme	Hero asset	Structures	Nature	Terrain	Details
Medieval village	Stone cottage	Fences, crates, well, birdhouse	Bushes, trees, flowers	Cobblestone paths, rocks, cliffs	Grass, stumps, pebbles
Castle	Keep / throne room	Marble floors, arches, banners, pillars	Courtyard garden	Stone floor tiles, walls	Torches, candelabra, shields
Market / Bazaar	Market tent (texCloth awning)	Stalls with goods, weapon rack, potion cart	Potted plants, flowers	Cobblestone, carpet (texWoven)	Fruits, bottles, coins, banners
Fishing village	Wooden warehouse	Shelf racks, barrels, nets, drying rack	Seaweed, coral	Dock planks, water tiles	Fish, crates, sacks, rope, anchor
Dungeon	Castle gate	Torches, doors, chests, barrels	Moss, vines, mushrooms	Stone floor tiles, walls, pits	Bones (texBone), chains, potions
Dark fantasy	Corrupted tower	Spider structures, bone altars, cursed trees	Crystal growths (texCrystal), dark roots (texCoral)	Cracked stone, void tiles	Webs, candles, skull, runes
Tropical / Tribal	Totem pillar, tiki hut	Yurt/tent (texWoven), palm shelter	Palm trees, coral (texCoral), shells	Sand, beach tiles, shallow water	Tiki masks, seashells, rope (texRope)
Forest	Large oak tree	Campfire, tent (texCloth), log cabin	Bushes, ferns, saplings	Dirt paths, streams, boulders	Mushrooms, berries, acorns
Farm	Barn	Fences, troughs, windmill	Crops, haystacks, flowers	Dirt/grass tiles, pond	Chickens, tools, baskets
Desert	Pyramid / obelisk	Sand-brick walls, clay pots, market tent	Cacti, palm trees, dry shrubs	Sand tiles, cracked earth

Assembly recipes for composite assets:

market_stall = wood_frame + texCloth(awning, stripes) + blitAlpha(fruit_crate×4) + contact_shadows
weapon_rack = wood_frame + blitAlpha(sword, texMetal) + blitAlpha(axe) + blitAlpha(shield)
shelf_unit = wood_shelves + blitAlpha(sack, texCloth) + blitAlpha(barrel) + blitAlpha(crate)
fishing_net = rope_frame(texRope) + blitAlpha(hanging_fish×4)
cottage = texStone(walls) + texRoof(roof, trapezoid) + texWood(door_frame) + fillRect(windows) + pp()

Aim for 25–40 assets per tileset, covering all categories.

Atmosphere Implementation

Element	CSS/JS
stars	Random 1-2px dots, opacity twinkle
moon	`border-radius:50%` + radial-gradient + box-shadow glow
rain	1px divs, fast vertical translateY
petals	`border-radius:50% 0 50% 0`, rotate + fall
mist	Translucent gradient div, slow horizontal drift
embers	Small dots rising with box-shadow glow
snow	Small circles, slow fall + horizontal sway
clouds	Multi-layer semi-transparent rounded rects + slow translate
fireflies	Small dots with glow, random walk paths

pixelart

ソース情報

インストール方法

ソースファイルを確認

Input Modes

Output

Auto-Decision Rules

Size → Detail Level

Prompt → Rendering Method

Prompt → Auto Animations & Atmosphere

Output Formats

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

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

Design Rules

Palette

Character Composition

Drawing Order

Animation Implementation

Pixel Font Reference (MUST USE for text/numbers)

3×5 Digits (0-9)

3×5 Letters (A-Z)

5×7 Digits (larger, more readable)

Usage rules for text in pixel art:

Core Utility API (for Canvas-based rendering)

Deterministic Hash

Color Manipulation

Noise Range Guidelines

PixelBuffer Class

Basic Drawing Helpers

Reference Palette Library

Natural Materials

Constructed Materials

Warm Palette Convention

Procedural Texture Engine (for game assets & tilesets)

Architecture

Available Procedural Textures (23 types)

Core Texture Implementations

Post-Processing: pp(pb, shadow, outline)

Composition System

Shape Primitives

Building Construction Order

Per-Material Shading Guidance

Dual-Palette Shading Strategy

Neon Glow Layering (for cyberpunk/magic themes)

Asset Size Minimums

Rendering

Sprite Template System (for items ≤20px)

Template Format

Material Shader Types

Hue-Shift Shading

Adaptive Outline

Tileset Mode

Architecture

Tileset Composition Rules

Asset Factory Pattern

Theme → Asset List

Atmosphere Implementation

Input Modes

Output

Auto-Decision Rules

Size → Detail Level

Prompt → Rendering Method

Prompt → Auto Animations & Atmosphere

Output Formats

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

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

Design Rules

Palette

Character Composition

Drawing Order

Animation Implementation

Pixel Font Reference (MUST USE for text/numbers)

3×5 Digits (0-9)

3×5 Letters (A-Z)

5×7 Digits (larger, more readable)

Usage rules for text in pixel art:

Core Utility API (for Canvas-based rendering)

Deterministic Hash

Color Manipulation

Noise Range Guidelines

Post-Processing: `pp(pb, shadow, outline)`

Post-Processing: `pp(pb, shadow, outline)`