patch-gg/pixelfx

选用指南

AI 根据 README 整理 · 2026/10/30 19:51:32

使用方式

可通过npm安装或复制源码在浏览器游戏中使用，也可通过命令行工具导出精灵表或生成新特效。

查看 README 依据

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 } ``` Install from GitHub with `npm i github:patch-gg/pixelfx`, or copy `src/core` and the effects you want. **In any engine** (Godot, Unity, GameMaker, Defold, LÖVE, Bevy), use sprite sheets: ```bash node tools/render.mjs ice/frost-nova --sheet

node tools/new.mjs arcane/my-spell # a working starting point (add --loop for a loop) node tools/render.mjs arcane/my-spell # records/arcane/my-spell/contact.png: look at it node tools/check.mjs arcane/my-spell # spills, seams, unseeded randomness, slow frames ``` Then go round: look at the contact sheet, fix the worst thing, render again. `--gif` and `--mp4` show the motion, `--all` shows every frame. [docs/AUTHORING.md](docs/AUTHORING.md) has the contract, the drawing API and the quality bar. `node tools/serve.mjs` runs the gallery locally with your effects in it.

部署要求

需要Node.js环境以运行命令行工具，浏览器使用无需依赖。

查看 README 依据

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 } ``` Install from GitHub with `npm i github:patch-gg/pixelfx`, or copy `src/core` and the effects you want. **In any engine** (Godot, Unity, GameMaker, Defold, LÖVE, Bevy), use sprite sheets: ```bash node tools/render.mjs ice/frost-nova --sheet

node tools/new.mjs arcane/my-spell # a working starting point (add --loop for a loop) node tools/render.mjs arcane/my-spell # records/arcane/my-spell/contact.png: look at it node tools/check.mjs arcane/my-spell # spills, seams, unseeded randomness, slow frames ``` Then go round: look at the contact sheet, fix the worst thing, render again. `--gif` and `--mp4` show the motion, `--all` shows every frame. [docs/AUTHORING.md](docs/AUTHORING.md) has the contract, the drawing API and the quality bar. `node tools/serve.mjs` runs the gallery locally with your effects in it.

已知限制

部分特效改编自Hugo Duprez的MIT许可代码，但Patch Pixel字体不在MIT许可范围内。

查看 README 依据

- **Seeded everything.** Every random number comes from the effect's seed, so frame 40 is the same every time. - **Local space.** Effects draw around their own origin; the painter places, mirrors and rotates them. Directional effects face right. A 24×38 stock character stands in for status effects, auras and hits. - **Same frame shape as Sprite Fusion's VFX** (`{ w, h, ox, oy, color, light }`), so both libraries can draw into one frame. ## license. MIT, code and effects. Use them in anything, commercial included. Parts are adapted from Hugo Duprez's MIT effects,

and the Patch Pixel font in `gallery/fonts` is Patch's own and not covered: see [NOTICE.md](NOTICE.md). Made by [Patch](https://patch.gg).