A sword hit feels wrong when the picture lands and the game does not pause. A sprite pack (a folder of ready-made pictures) can give you the crescent. It cannot tell the game to freeze. pixelfx vs a sprite pack is that split. pixelfx is a set of small JavaScript files that draw the effect and also write down the freeze, the shake, and the push. I cloned it and rendered a sword slash with no package install. The picture is 24 frames. The freeze is 0.14 seconds, and it sits in the JSON (a text file of named fields) next to the picture, under the name freeze, not under the name stop that the source file uses.
What is Pixelfx
pixelfx is code that draws pixel-art effects, not a zip of finished pictures. In the copy I cloned there were 264 effect files, sorted into folders such as fire, ice, melee, and lightning. One file is one effect. The sword slash file draws a crescent that cools from white to deep blue, then throws sparks. It also describes a little fighter: the wind-up, the cut, and where the other body stands.
A frame (one still picture in the animation) is drawn by that file, then saved. The colors are a palette (a short list of allowed colors), written as hex codes in the same file. The sword slash lists seven colors, from a dark blue to white, plus four spark colors. Change the list, render again, and the effect changes color without you redrawing it by hand. I only read the list.
The sword file does not stamp a finished bitmap. It paints a crescent with a bright rim, then adds a glow around that rim. The render command flattens both into the one PNG I saved. You do not get a separate glow file. If you need the glow stronger, you change the file and render again. I left the glow as it shipped.
The tools ask for Node 18 or newer. They do not ask for a game engine. A checker looks for pixels drawn outside the frame, a one-shot that never ends, and random numbers that are not seeded. I ran that checker on the sword slash only. It passed, with no warning.
What is a Sprite Pack
A sprite pack is pictures you play back. A sprite sheet (many frames packed into one grid) is the usual file. You tell the engine the cell size, and it flips through the cells. The picture does not know that a hit should pause the game. It only knows the next cell.
This star is the whole idea of a sheet. One file, many moments, equal slices.
A pack is the right tool when an artist already drew the frames and you only need to play them. It is the wrong tool when the punch lives in numbers the artist never drew: how long to freeze, how far to shove the target, how hard to shake the view.
Pixelfx vs a Sprite Pack
Keep the code if the game is a web canvas (the box a page draws into). Export a sheet if the game is Godot, Unity, or anything that already plays pictures. Either way, read the JSON. The PNG alone is the weaker half.
| pixelfx code | a sprite pack | |
|---|---|---|
| What you store | a JavaScript file | PNG cells |
| Recolor | edit the palette list and render | redraw, or recolor in the engine |
| Hit freeze | a number in the JSON | not in the picture |
| Browser game | import the file, no extra library | play the sheet yourself |
| Other engines | export, then import | already the native format |
| A new effect | edit the code, or use the bundled agent skill | draw it |
It is instructions for a coding agent, plus the same render command. The library itself ran with Node only.
If the thing you are drawing is a diagram of boxes and arrows, that is a different job, closer to If the frames are a narrated video, look at HyperFrames vs Remotion. A poster is neither: an open source Canva alternative covers that. A math clip is closer to ManimGX vs Manim than to a sword hit.
How to Use Pixelfx
Clone the project and render one effect. You do not need npm install. I had no installed packages in the folder, and the command still wrote the files.
git clone https://github.com/patch-gg/pixelfx
cd pixelfx
node tools/render.mjs melee/sword-slash --sheetThat wrote three files: a sheet, a contact sheet of the acted move, and a JSON file. The sword sheet is 680 by 520 pixels and 59,020 bytes. It holds 24 frames. Each frame is 136 by 104 pixels, tagged at 33 milliseconds, so the pictures add up to 792 milliseconds. The pivot (the point you treat as the handle) is at x 44, y 92.
The same command on the frost nova effect wrote 103 frames of 288 by 192, packed into a 2,592 by 2,304 sheet. That PNG is 812,850 bytes. Rendering it a second time took 2.2 seconds.
The project is patch-gg/pixelfx.
Does Pixelfx Keep the Hit Stop
The picture does not. The JSON does, if you read the right field. Hit stop (a short freeze so the hit feels heavy) is not extra frames. Every sword frame is 33 milliseconds. Nothing in the PNG lingers.
In the JavaScript the hit says stop, 0.14 seconds. In the JSON I got back, that same moment is named freeze, still 0.14 seconds, with shake 0.18 and push 2.8, at 0.06 seconds. If you search the JSON for stop, you will think the freeze was dropped. It was renamed.
Frost nova shows that one effect can carry more than one hit. Its JSON lists three: a freeze of 0.1 seconds at 0.42 seconds, a push of 0.9 with an ice look at 0.66 seconds, and a small push at 2.9 seconds. A player that only flips cells will show the ice and miss every one of those numbers.
When Not to Use Pixelfx
Do not use it when you need your own character drawn your way. The acted moves use a built-in body. I saw that body on the contact sheet: a small fighter, a sword, a second figure taking the cut. If your hero does not look like that, export the effect and draw the hero yourself.
Do not use it for a page that is only styles, with no drawing surface. Nothing here is a style rule. It draws pixels.
Do not use it as a pixel editor for existing art. It will not open your character sheet and fix a hand. That job still wants a drawing program.
Skip the bundled agent skill if you do not already run a coding agent. The render command does not need one.
Common questions about pixelfx
Can I use pixelfx in godot
Yes, as a sheet plus the JSON, not as the JavaScript. I only made the files an importer would take. Godot’s usual path is to slice a sheet into frames and play them. That part matches. The freeze, shake, and push will not apply themselves. You read the hits block and pause, shake, and move the target in your own script. The same is true for Unity or any engine that thinks a picture is just a picture.
A web game can skip the export and call the effect file on each tick. That path keeps the glow and the timing in one place. I rendered offline.
Do I need npm for pixelfx
No, not for the render I ran. The folder lists a build tool as a development dependency, and that tool was not installed. The render command still wrote the sword sheet and the frost nova sheet.
Is pixelfx free for a commercial game
The effects and the drawing code are under a license that allows a commercial game. The font in the gallery folder is not under that same license. If you ship that font, read its notice first. Leave it out and you are shipping the effects only.
Does pixelfx replace a drawing program
No. It replaces a pack of effect pictures, not the tool you use to draw a character, a tile, or a portrait. Use it when the missing piece is a hit, a flame, or a pickup. Keep your editor for the art that has to be yours.
Why is the frost nova sheet so large
Because it is 103 big frames in one grid. Each cell is 288 by 192. The sheet is 2,592 pixels wide and 2,304 tall, and the PNG was 812,850 bytes. The sword slash, at 24 smaller cells, was 59,020 bytes. If a download budget is tight, render the small effects, or play the code in the browser and do not ship the big sheet at all.
I would keep pixelfx for the hits I do not want to redraw, and I would not throw away a sprite pack an artist already finished. The pack plays. The JSON hits. Use the code while you are still on the web. Export when the engine only eats pictures. If the punch feels soft, look in the JSON for freeze before you blame the art.
What did we check on this box?
Cloned patch-gg/pixelfx at 0.3.0. src/fx/ice/frost-nova.js is 11,206 bytes. README catalog count is 244.