做游戏时，火焰、爆炸、冰霜、闪电这些特效很容易让人犯难：想要看起来有动感，自己画起来却费时间；找现成图片，又不一定能改颜色、调大小，放进游戏里也未必合适。
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 里的调用方式大致是这样：
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 许可证，代码和特效可用于包括商业项目在内的作品。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
When playing games, the effects of flames, explosions, frosts and lightning can easily be difficult: it takes time to draw themselves in order to look moving; to find a ready-made picture, which may not change colour, be smaller, or fit into the game.
Pixelfx is an open source pixel special effects library. It makes special effects into a small section of JavaScript code, and now contains 244 effects, allowing for animated, classified and coloured images. And if you think it's right, you can use the code directly in the game, or you can export it to the elf map.
Project address: Patch-gg/pixelfx
Online Effects Library: Open pixefx ballery
244 effects. Open the web page.
These effects are divided into categories by purpose: flames, explosions, water, ice, lightning, magic, weather, props, interface animations like campfires, fireballs, ice-free new stars, gold coin picks, violent numbers, and most common effects are found in games.
Its online gallery is not a static picture, but a direct effect. You can browse by category and search by keyword; you can click a special effect and adjust the speed, background, colour and direction of play. Some effects can also be replaced with random seeds to see different manifestations of the same special effect.
It's not just a special effect, it's a role move.
Pixelfx has a very practical design: some of the special effects of the attack not only describe sparks or knives, but also record when the role is holding up, when it comes, how long it stops after the hit, and how the target retreats.
Because the same group was luminous and attached to a standing character, along with the actions of swinging knives, hitting hits and pickings, the feeling was very different. The time series of actions is also made data in the project; when using a self-hatting role, you can preview the role with the effects. You can also refer to the action time when you use your own game role.
The effect is not a picture, but a code.
Each effect in the project is usually a document under src/fx/class/name.js. For example, src/fx/fire/campfire.js describes wood, charcoal fire, tact, smoke, Mars and residual ashes. Each time a frame is drawn, the location and shape of these parts are calculated on the basis of time.
This means that the effects need not be fixed in a particular picture: they can be played while running, or they can be changed to palettes, mirrors or rotated. The JavaScript game can call the code directly; other engines, such as Godot and Unity, can export animations into elf maps and supporting JSON.
How does the core code fit?
You can think of it as three stages: what the special effects code does, what the core tools do, when the game is updated and displayed.
1. Each special effect describes its own information and drawings
The special effects file provides some basic information, such as a name, the size of the canvas, the duration of the play, whether or not to loop, and the default colour. There are two kinds of drawings:
- Scheduling by time: give it a point of time, it paints the moment, and it is suitable for the effects of circular animation and transmission doors, water flow, etc.
- Particle simulation: Mr. Mars, smoke or debris, which is updated over time and suitable for explosive, collision and dispersive effects.
Both methods are relatively simple for users: creating effects, updating them, drawing on canvass.
2. Painter transforms code into pixels
The core drawing tool is in src/core/painter.js. It provides methods of painting pixels, drawing lines, drawing circles, drawing dizziness, etc. The special effects file uses these methods to get a little color into the picture.
It also divides the picture into two layers: one with a normal pixel colour, one with additional light effects and one with final synthesis. The flames are not just orange shapes, but also warm light around them; the bright spots of the explosion can also be more visible than normal particles.
3. CreateFx management playback
CreateFx in src/core/fx.js is responsible for turning a special effect module into a playable example. Every frame of the game calls update (dt) advance time, and then draws images by drawing a drawing from a drawing. Options such as the location of the effects, the direction of the flipping, the colour palette, etc. are also included when creating.
The mode of call in README is roughly:
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);
}
In short, the game gives time and position, and pixelfx draws the corresponding pixels; the game then shows the image on screen. The project also supports the export of elf maps to facilitate the use of games engines that do not directly run JavaScript.
A campfire, not just a fire behind it.
In the case of Campfire.js, it is not simply a flame contours, but a few small parts of the picture: crosswood, carbon below, flames at different heights and widths, smoke floating up, occasionally ejected Mars, remaining ashes rising slowly, and warm light on the ground.
The speed of change varies from one part to another: the flames will swing, the smoke will scatter and the rest of the ashes will rise; but the campfire as a whole will have to circulate, so the changes will have to come back to the beginning. The code uses a fixed random seed to set the details so that the effects can be stabilized and the animation can be exported under the same seed.
You don't have to understand every math calculation first. Look at the name, size and options in the meta, and see how the drawing of flames, smokes and light is used.
For who?
If you're playing pixels, pixelfx can be used as an off-the-shelf asset library, or as a reference to how split and how it was drawn. Even if it is not a developer, an online gallery is a good place to walk around: to see how a fire shakes, to see how the role stops when an attack hits, and to see how a code turns into an animation.
The project was accompanied by a Claude Code skill to help modify or produce new effects based on existing special effects. Whether this function is used or not, the pixelfx's core idea is intuitive: treat special effects as a painting that changes over time, not as a picture that cannot be changed.
The project uses MIT licences, codes and special effects that can be used for works including commercial projects.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.