pixel-art-game-builder

# Pixel Art Game Builder

Expert guide for architecting and building pixel art idle/incremental games with procedural sprite generation.

## Quick Navigation

| Need | Go to |
|------|-------|
| Start a new project | [Quick Start](#quick-start) |
| Copy working code | [templates/](templates/) |
| Understand patterns | [patterns/](patterns/) |
| See full example | [examples/](examples/) |
| Deep reference | [references/](references/) |
| CSS/Tailwind setup | [assets/](assets/) |

## Core Design Philosophy

**Three pillars:** Minimal. Luminous. Contemplative.

- **Constraint = Creativity**: Limited palette (12 colors), low resolution (16×16 sprites)
- **Space speaks**: Dark backgrounds, few elements = immensity feeling
- **Light guides**: Important elements glow (higher rarities shine more)
- **Movement breathes**: Slow, organic animations (minimum 500ms cycles)
- **Zero pressure**: NO timers, NO deadlines, NO FOMO, NO negative messages

## Quick Start

```bash
npm create vite@latest my-idle-game -- --template react-ts
cd my-idle-game
npm install zustand immer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Then copy files from [assets/](assets/) for CSS and Tailwind config.

## Critical Implementation Rules

### Pixel Art Sprites (16×16)

```javascript
// MANDATORY for pixel-perfect rendering
ctx.imageSmoothingEnabled = false;
```

```css
/* CSS for any sprite element */
.sprite { image-rendering: pixelated; }
```

- **4 colors max per sprite**: base, highlight, shadow, outline
- **12×12 usable zone** (2px margin for glow effects)
- **Scale 4×** when displaying (16×16 → 64×64)
- **NO antialiasing, NO gradients**

### Color Palette (12 colors only)

```typescript
const PALETTE = {
  deepBlack: '#0a0a0f',      // Main background
  spaceGray: '#1a1a2e',      // Panels
  borderGray: '#2d2d44',     // Borders
  neonCyan: '#00fff5',       // Primary actions, RARE
  softMagenta: '#ff6bcb',    // Notifications, EPIC
  cosmicGold: '#ffd93d',     /