pixelfx

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

• 现代浏览器（用于打开在线画廊并运行 Canvas 特效）
• 本地已安装 git（用于获取仓库代码）
• 了解基础 JavaScript 与 Canvas 的绘制方式
• 可选：Claude Code 环境，用于调用仓库内的 agent skill 生成新特效

安装与启动步骤

1. 1在线预览特效

   直接打开官方画廊页，即可播放 244 个特效，并试用重新配色、镜像等交互，无需安装任何依赖。

2. 2获取仓库代码

   把项目源码克隆到本地，后续读取具体特效实现和核心仿真代码。

   git clone https://github.com/patch-gg/pixelfx.git

   复制

3. 3查阅特效目录

   打开 docs/CATALOG.md，按 moves、火焰、爆炸、魔法、天气、UI 等分类找到需要的特效条目。

4. 4阅读核心仿真

   先看 src/core/sim.js，理解特效共用的更新与绘制流程，再看单个特效文件更易上手。

5. 5嵌入单个特效

   挑选一个小段特效代码复制到自己的 Canvas 项目中，按其绘制逻辑逐帧调用即可运行。

6. 6导出精灵表

   在画廊中把选中的特效导出为 sprite sheet，供其他引擎或美术流程使用。

7. 7用技能生成新特效

   借助仓库提供的 Claude Code 技能，按现有代码风格先起草、再渲染、比对后修正，产出新特效。

如何确认成功

浏览器打开 https://patch-gg.github.io/pixelfx/ ，能看到分类特效列表并正常播放动画即成功。

常见问题

注意事项

• README 未提供 npm 包、构建脚本或端口信息，本教程不假设存在此类命令。
• 部分特效改编自 Hugo Duprez 的开源实现，二次使用请保留相应署名与来源说明。
• 特效依赖 Canvas 绘制，嵌入前请确认目标环境的渲染尺寸与帧率设置一致。