pixel-art-game-builder

像素艺术游戏构建指南

使用程序化精灵生成构建像素艺术放置／增量游戏的专家指南。

快速导航

需求	前往
启动新项目	快速入门
复制可用代码	templates/
了解模式	patterns/
查看完整示例	examples/
深入参考	references/
配置 CSS/Tailwind	assets/

核心设计理念

三大支柱： 极简、微光、沉思。

• 限制 = 创意：受限的调色板（12 种颜色）、低分辨率（16×16 精灵）
• 空间诉说：深色背景、稀少元素 = 营造无垠感
• 光芒引路：重要元素会发光（稀有度越高，光芒越亮）
• 动态呼吸：缓慢、自然的动画（周期至少为 500 ms）
• 零压力：没有计时器、没有截止期限、没有错失恐惧、没有负面消息

快速入门

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

然后从 assets/ 复制 CSS 和 Tailwind 配置文件。

关键实现规则

像素艺术精灵（16×16）

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

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

• 每个精灵最多 4 种颜色：基础色、高光、阴影、轮廓
• 可用区域为 12×12（预留 2 px 边距用于发光效果）
• 显示时放大 4 倍（16×16 → 64×64）
• 不要抗锯齿，不要渐变

调色板（仅 12 种颜色）

const PALETTE = {
  deepBlack: '#0a0a0f',      // Main background
  spaceGray: '#1a1a2e',      // Panels
  borderGray: '#2d2d44',     // Borders
  neonCyan: '#00fff5',       // Primary actions, RARE
  softMagenta: '#ff6bcb',    // Notifications, EPIC
  cosmicGold: '#ffd93d',     // Rewards, LEGENDARY
  validGreen: '#39ff14',     // Success, UNCOMMON
  alertRed: '#ff4757',       // Alerts (rare use)
  mysteryPurple: '#6c5ce7',  // Hidden/secret
  mainWhite: '#e8e8e8',      // Body text, COMMON
  secondaryGray: '#a0a0a0',  // Disabled
  interactiveCyan: '#7fefef' // Links
};

const RARITY_COLORS = {
  common: PALETTE.secondaryGray,
  uncommon: PALETTE.validGreen,
  rare: PALETTE.neonCyan,
  epic: PALETTE.softMagenta,
  legendary: PALETTE.cosmicGold,
};

游戏循环模式（每 100 ms 一次 tick）

useEffect(() => {
  const interval = setInterval(() => {
    const now = Date.now();
    const delta = (now - lastTick) / 1000;

    // Update resources
    addCredits(incomePerSecond * delta);
    regenerateEnergy(delta);

    setLastTick(now);
  }, 100);
  return () => clearInterval(interval);
}, [incomePerSecond, lastTick]);

状态管理（Zustand + Immer）

import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

const useGameStore = create<GameState>()(
  persist(
    immer((set, get) => ({
      credits: 0,
      energy: 100,
      addCredits: (amount) => set((s) => { s.credits += amount }),
    })),
    { name: 'game-save' }
  )
);

模板（复制并使用）

templates/ 中提供了可直接使用的代码：

模板	说明
game-loop.tsx	使用 delta time 实现每 100 ms 一次游戏 tick 的 Hook
save-system.ts	带迁移功能的 Zustand 持久化模式
progression.ts	缩放公式（指数成本、边际收益递减）
sprite-renderer.tsx	像素级精准渲染的 Canvas 组件

模式（理解并调整）

patterns/ 中提供了概念指南：

模式	说明
resource-system.md	货币、上限、再生的结构设计
upgrade-tree.md	线性升级、技能树、声望解锁
prestige-loop.md	重置机制、元进度、永久加成
procedural-sprites.md	根据种子生成多样化精灵

示例

examples/ 中提供了可运行的代码：

示例	说明
minimal-idle-game.tsx	完整的放置游戏，约 150 行代码，包含资源、升级和存档

深入参考

references/ 中提供了详细文档：

参考资料	适用场景
architecture.md	完整项目结构、类型、状态存储
sprite-system.md	Canvas API、颜色推导、缓存
game-mechanics.md	经济系统、扫描、进度公式
ui-patterns.md	组件、布局、动画
content-structure.md	物品、区域、升级的数据结构

设计支柱（不可妥协）

1. 清晰直观：每个按钮都有文字标签，可见操作最多 3 项
2. 逐步深入：新内容会随时间逐步解锁
3. 情感收藏：每件物品都有不超过 140 个字符的叙述性描述
4. 零压力：没有计时器、没有截止期限、没有错失恐惧
5. 移动端优先：触控目标 ≥44 px，断点为 320/768/1024 px

文案风格

• 语气：平静、忧郁、带有微妙的幽默
• 规则：不超过 140 个字符，不用“！”，不全大写，不用祈使句

模板：

• 幽默：[物件]。[荒诞的观察]。[包袱]。
• 温情：[物件]。[人情细节]。[普遍真理]。
• 古怪：[物件]。[奇异特性]。[接受现实]。

性能目标

指标	目标
包体积	gzip 压缩后 <200KB
空闲时 FPS	≥30
内存	<100MB

应做事项与避免事项

应做 ✓

• 像素级精准渲染（imageSmoothingEnabled = false）
• 精灵图最多使用 4 种颜色
• 仅使用 12 色调色板
• 触控目标尺寸 ≥44px
• 缓存生成的精灵图
• 支持减少动态效果

避免 ✗

• 精灵图使用抗锯齿
• 在像素艺术中使用渐变
• 仅含图标的按钮
• 在物品描述中显示数据
• 计时器或倒计时
• 负面的失败提示
• 嵌套模态框