pixelfx 像素特效库

pixelfx 是什么

pixelfx 是一个像素风特效代码库，收录 244 个像素特效与动画，每个特效都是 src/fx/<类别>/<名称>.js 下的一个小文件。类别覆盖火焰、爆炸、水系、冰系、闪电、科幻、近战、投射物、生成与死亡、奥术、神圣、暗影、状态、自然、天气、UI、拾取物、转场、小生物与招式等。

项目还附带一个 Claude Code 技能，可以像挑剔的像素画师一样「起草—渲染—观察—打磨」，持续产出新特效。

如何使用

在浏览器游戏中使用代码

特效无任何依赖，可直接用于 Canvas、Phaser、PixiJS、Kaplay、three.js 等：

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

const frame = createFrame(320, 180);
const fx = createFx(frostNova, { x: 160, y: 140 });

可通过 npm i github:patch-gg/pixelfx 安装，或直接复制 src/core 与所需特效。

在任意引擎中使用精灵表

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

会输出透明 PNG 网格与 Aseprite 风格 JSON（帧矩形、时长、fps、循环、列数与轴心），Phaser 图集加载器以及 Godot、Unity 的 Aseprite 导入器均可读取。

调色板重着色

任意特效都接受 palette 参数（由暗到亮的十六进制色阶），无需改代码即可让火焰变蓝、治疗变粉。

动作编排（Acting）

单独的特效像贴纸，真正让打击成立的是角色身体：起手、命中定格、目标后仰、收招。带角色的 61 个特效与 12 个招式都以数据形式声明身体动作与时机：

export const act = {
  target: { x: 58 },
  poses: [
    [-0.55, GUARD],
    [-0.3, WIND_UP],
    [0, CUT, "snap"],
    [0.06, FOLLOW_THROUGH, "snap"],
    [0.86, GUARD],
  ],
  hits: [{ t: 0.06, stop: 0.14, shake: 0.18, amp: 2, push: 2.8, straw: 18 }],
};

把 createFx 换成 createAct 即可连同角色与目标一起播放。时机是纯数据，可读取 slash.act 或精灵表 JSON 中的 meta.pixelfx.act，让自有角色动画与之对齐。

适合谁

• 需要快速补齐打击感与视觉表现的独立游戏开发者
• 使用 Canvas/Phaser/PixiJS 的浏览器像素游戏项目
• 希望把特效导出到 Godot、Unity、GameMaker、Defold、LÖVE、Bevy 的团队
• 想借助 Claude Code 技能批量定制像素特效的创作者

许可

MIT 协议，可自由用于商业项目。