做游戏时，火焰、爆炸、冰霜、闪电这些特效很容易让人犯难：想要看起来有动感，自己画起来却费时间；找现成图片，又不一定能改颜色、调大小，放进游戏里也未必合适。
pixelfx 是一个开源的像素特效库。它把特效做成一小段段 JavaScript 代码，目前收录了 244 种效果，打开网页就能看动画、搜分类、换配色。觉得合适，还能直接把代码用到游戏里，或者导出成精灵图。
项目地址：patch-gg/pixelfx
在线效果库：打开 pixelfx Gallery
244 种效果，打开网页就能看
这些特效按用途分了不少类别：火焰、爆炸、水、冰、闪电、魔法、天气、道具、界面动画......比如营火、火球、冰霜新星、金币拾取、暴击数字，做游戏时常见的效果基本都能找到。
它的在线画廊不是一张张静态图片，而是让特效直接动起来。可以按分类浏览，也能用关键词搜索；点开一个特效，还能调整播放速度、背景、颜色和朝向。有些效果还可以换随机种子，看看同一个特效的不同表现。
不只是"放个特效"，还考虑了角色动作
pixelfx 有个挺实用的设计：一些攻击特效不只描述火花或刀光，还记录了角色什么时候蓄力、什么时候出手、命中后停顿多久，以及目标怎样后退。
因为同一团光效，贴在一个站着不动的角色身上，和配合挥刀、命中、收招的动作一起出现，感觉差别很大。项目里把这套动作时序也做成了数据；使用自带角色时，可以把角色和特效一起预览。使用自己的游戏角色，也能参考其中的动作时间。
特效不是图片，而是代码
项目里每种效果通常是 src/fx/分类/名称.js 下的一个文件。拿营火来说，src/fx/fire/campfire.js 里描述了木头、炭火、火舌、烟、火星和余烬。代码每次绘制一帧时，都会根据时间算出这些部分的位置和样子。
这意味着特效不必被固定在某张图片里：可以运行时播放，也可以换调色板、镜像或旋转。JavaScript 游戏能直接调用代码；Godot、Unity 等其他引擎则可以把动画导出成精灵图和配套 JSON。
核心代码怎么配合？
可以把它想成三个环节：特效代码负责画什么，核心工具负责怎么画，游戏负责什么时候更新和显示。
1. 每个特效说明自己的信息和画法
特效文件会提供一些基本信息，例如名字、画布大小、播放时长、是否循环、默认颜色。画法则分两种：
- 按时间绘制：给它一个时间点，它就画出那一刻的样子，适合循环动画和传送门、水流这类效果。
- 粒子模拟：先生成火星、烟雾或碎片，再随着时间更新它们的位置，适合爆炸、碰撞和飞散的效果。
这两种方式对使用者来说都比较简单：创建效果、更新它、画到画布上。
2. Painter 把代码变成像素
核心绘制工具在 src/core/painter.js。它提供了画像素、画线、画圆、画光晕等方法，特效文件调用这些方法，就能把颜色一点点写进画面。
它还把画面分成两层：一层放普通像素颜色，一层放额外的发光效果，最后再合成。这样火焰不只是橙色的形状，周围也能带上暖光；爆炸的亮点也能比普通颗粒更抢眼。
3. createFx 管理播放过程
src/core/fx.js 里的 createFx 负责把一个特效模块变成可播放的实例。游戏每一帧调用 update(dt) 推进时间，再调用 draw(frame) 绘制画面。特效的位置、翻转方向、调色板等选项也在创建时传进去。
README 里的调用方式大致是这样：
javascript
import { createFrame, clearFrame, createFx, composite } from "pixelfx";
import * as frostNova from "pixelfx/fx/ice/frost-nova";
const frame = createFrame(320, 180);
const img = new ImageData(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });
function tick(dt) {
fx.update(dt);
clearFrame(frame);
fx.draw(frame);
composite(frame, img.data, backgroundColor);
ctx.putImageData(img, 0, 0);
}简单说，游戏给出时间和位置，pixelfx 负责把对应的像素画出来；游戏再把画面显示到屏幕上。项目还支持导出精灵图，方便不直接运行 JavaScript 的游戏引擎使用。
一个营火，背后不只是一团火
以 campfire.js 为例，它不是简单地画个火焰轮廓，而是把画面拆成许多小部分：交叉的木头、底下的炭、不同高度和宽度的火舌、往上飘的烟、偶尔蹦出的火星、缓缓升起的余烬，以及地面上的暖光。
每个部分的变化速度也不同：火焰会摇摆，烟会飘散，余烬会升高；但营火整体需要循环播放，所以这些变化还得能自然接回开头。代码里用固定的随机种子来安排细节，因此同一个种子下，效果可以稳定重现，也方便导出动画。
读代码时不用先弄懂每个数学计算。先看 meta 里的名字、尺寸和选项，再看 draw(p, t, o) 怎么调用火焰、烟和光照相关的绘制方法，就能大概理解一个效果是怎样拼出来的。
适合谁看？
如果你在做像素风游戏，pixelfx 可以当作现成的特效素材库，也可以拿来参考特效是怎么拆分和绘制的。即使不是开发者，在线画廊也适合随手逛逛：看一团火如何摇曳，看攻击命中时角色如何停顿，再看看一段代码怎样变成一场小动画。
项目还附带了一个 Claude Code skill，帮助在现有特效基础上修改或制作新效果。无论用不用这个功能，pixelfx 的核心思路都很直观：把特效当成一段会随时间变化的绘画，而不是一张不能改的图片。
项目采用 MIT 许可证，代码和特效可用于包括商业项目在内的作品。