pixelfx

# pixelfx

为游戏提供 244 个像素风特效，如火焰、爆炸、魔法和天气，每个都是一小段代码，可导出适用于任何引擎的精灵图，还带一个用来做新特效的 Claude Code 技能。适合游戏开发者。

由 patch-gg 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：pixelfx 是一个包含 244 个像素风特效和动画的库，每一个都是一小段代码。它们涵盖火焰、爆炸、魔法、天气、界面点缀、拾取物和小生物。你可以实时播放它们，给它们换色和镜像，用在浏览器游戏里，或者导出精灵图。它还带一个能做新特效的 Claude Code 技能。

适合谁：它适合想要现成像素风特效的游戏开发者，也适合想换色并研究特效、而不是逐帧绘制的像素画师。

```table
行业 | 谁在用 | 怎么用 | 例子
浏览器游戏 | 使用 canvas、Phaser、PixiJS、Kaplay 或 three.js 的开发者 | 把特效当作代码导入，每个 tick 绘制一次 | 给一个以 320 乘 180 像素运行的游戏加上冰霜新星特效
游戏引擎 | 使用 Godot、Unity、GameMaker、Defold、LÖVE 或 Bevy 的开发者 | 导出精灵图，用图集或导入器加载 | 把冰霜新星渲染成带透明背景的 PNG 网格和一个 JSON 文件
像素画 | 画师和动画师 | 用一组十六进制颜色的调色板给特效换色 | 不改代码，让火炬烧成蓝色
AI 辅助美术 | Claude Code 用户 | 用技能起草、渲染、查看并打磨新特效 | 要求做一个新特效，每次渲染后再打磨
```

需要高分辨率或 3D 特效的团队可以跳过它。

用在哪里：代码可在浏览器游戏中运行，不需要任何依赖。其他情况用精灵图。

- 使用 canvas、Phaser、PixiJS、Kaplay 或 three.js 的浏览器游戏，直接使用代码
- Godot、Unity、GameMaker、Defold、LÖVE 和 Bevy，通过精灵图
- 导出的 JSON 可在 Phaser 中加载，也可在 Godot 和 Unity 中通过它们的 Aseprite 导入器加载
- Claude Code，用来运行做新特效的技能

```table
使用场景 | 谁 | 得到什么
给浏览器游戏加一个法术 | 游戏开发者 | 一个每个 tick 更新、绘制在角色后面或前面的特效
导出到其他引擎 | 开发者 | 一个透明 PNG 网格和一个 JSON 文件，含帧矩形、时长、fps、循环、列数和轴心
给特效换色 | 像素画师 | 烧成蓝色的火焰，或发出粉色光芒的治疗
编排一次攻击 | 开发者 | 一段短序列，角色先准备、再出击、在命中时停顿并收招，目标则承受这一击
```

如何设置：你需要 Node.js 来运行 npm 命令和 tools 脚本。

- Node.js 和 npm
- 一个浏览器游戏项目，或一个能读取精灵图的引擎
- Claude Code，只有想用技能时才需要

1. 用下面的 npm 命令直接从它的 GitHub 仓库添加这个包。或者把 src/core 文件夹和你需要的特效文件复制到自己的项目里。
2. 导入 createFrame、clearFrame、createFx 和 composite，再加上你想要的特效。
3. 按你游戏的像素分辨率创建一个帧，再创建一个同样大小的 ImageData。
4. 创建特效，然后在每个 tick 里更新它、绘制它并合成它。
5. 用像素化的图像渲染把结果放大。

```bash
npm i github:patch-gg/pixelfx
```

```js
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";

const frame = createFrame(320, 180);                   // your game's pixel resolution
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });   // also: flip, angle, seed, palette, light...

function tick(dt) {
  fx.update(dt);
  clearFrame(frame);
  fx.draw(frame, "back");                              // behind characters
  drawCharacters();
  fx.draw(frame, "front");
  composite(frame, img.data, backgroundColor);         // color, then light added on top
  ctx.putImageData(img, 0, 0);                         // scale up with image-rendering: pixelated
}
```

如何使用：在浏览器游戏里，按上面所示在游戏循环中调用特效。对于其他引擎，用下面第一条命令渲染精灵图。第二条命令用一组由暗到亮的十六进制颜色给特效换色，并保存为 GIF。

```bash
node tools/render.mjs ice/frost-nova --sheet
```

```bash
node tools/render.mjs fire/torch --gif --opts '{"palette": ["#102","#215","#43a","#8cf","#cff","#fff"]}'
```

```table
工具 | 作用
node tools/render.mjs | 渲染一个特效，加 --sheet 得到精灵图，加 --gif 得到 GIF
node tools/sheets.mjs | 把整个库导出到 sheets 文件夹
```

示例：你用一组经过蓝色的调色板，把火炬的火焰渲染成 GIF。火焰变成了蓝色。特效本身的代码保持原样。

新手与专家：每个特效都是一小段像素动画，比如篝火、命中闪光或金币拾取，写成一个小小的 JavaScript 文件。可以先打开图库，看几个特效播放，再把其中一个导入到测试用的 canvas 里。

每个特效都在 src/fx 里，放在以类别命名的文件夹中。它绘制到一个像素帧的后层和前层，所以角色可以站在两层之间。然后 composite 先加颜色，再在上面加光。特效接受 flip、angle、seed、palette 和 light 这样的选项。你要自己用像素化渲染把帧放大。带角色的特效是表演出来的，有定时的姿势和一个承受打击的目标。

```flow
特效是 src/fx 里的一个小 JS 文件
createFx 设置它的位置和选项
每个 tick 更新它并绘制后层和前层
composite 先加颜色，再在上面加光
你用像素化渲染把帧放大
```

注意事项：

- 共有 244 个特效，分为 21 个类别
- 61 个特效带角色并被表演出来，12 个招式把特效串成攻击
- 浏览器代码没有依赖
- 精灵图是一个透明 PNG 和一个 Aseprite 风格的 JSON 文件
- 这个方法来自 Hugo Duprez，src/core/sim.js 和一些特效改编了他的代码

```chart
Title: 几个类别里的特效数量
火焰: 12 个特效
冰: 10 个特效
闪电: 11 个特效
神圣: 10 个特效
天气: 12 个特效
界面: 12 个特效
拾取物: 11 个特效
小生物: 12 个特效
```

## GitHub 上的数据（2026年11月6日）

- 星标：5,460
- 复刻：720
- 关注：14
- 未关闭的议题和拉取请求：10
- 语言：JavaScript
- 许可证：MIT
- 话题：agent-skills, animation, canvas, claude-code-plugin, gamedev, pixel-art, sprite-sheet, vfx

## 链接

- 代码：https://github.com/patch-gg/pixelfx
- 网站：https://patch-gg.github.io/pixelfx/
- 发布版本：https://github.com/patch-gg/pixelfx/releases
- 议题：https://github.com/patch-gg/pixelfx/issues
- 星标历史：https://www.star-history.com/#patch-gg/pixelfx&Date

## 获取代码

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

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  7 KB