fire/campfire氛围：篝火与环境循环
篝火适合营地、检查点或安全区。持续循环的特效尽量避开密集战斗区域，亮度应低于关键命中反馈，场景不活跃时停止更新。需要其他天气或布景效果，可浏览官方完整目录。
创作者资源 / 像素艺术
PixelFX 特效生成器与 AI 游戏教程
PixelFX 是 Patch 开源的代码动画库，覆盖火焰、法术、拾取等场景。本页核实版本的官方目录包含 244 个特效。可编辑的 JavaScript 适合 AI 辅助开发：让助手修改代码、渲染画面，再根据效果迭代。PixelFX 提供视觉反馈，游戏规则仍由你的项目负责。
来源核实：2026 年 11 月 5 日 · 固定版本 a841596
JavaScriptCanvasPNG + JSONMIT
PIXELFX / LIVE CANVAS
试用三个真实的 PixelFX 特效
预览在你的浏览器本地运行原版特效代码，可调整配色和播放速度。点击播放开始动画，单次特效结束后会停止。这里仅展示特效，不包含角色动作演出。
按特效原始像素尺寸以 20 FPS 导出，应用当前配色与速度。请同时下载两份文件；JSON 包含帧时序、锚点和 MIT 声明，不包含角色动作。
PixelFX 特效生成器：制作可用的精灵图
选择三个内置特效之一，设置配色和播放速度，即可在浏览器中生成透明精灵图及动画配置，无需登录，也不消耗积分。这个工具按你的设置渲染已有 PixelFX 代码。想创造新特效，可让编程助手修改源码；想制作完整游戏，则继续进入 Studio。
按游戏场景选择 PixelFX 特效
先确定你要向玩家传达哪个事件。单独看很炫的特效，放进游戏后可能遮挡敌人，或让奖励不够醒目。从下面三个场景开始，再用实际背景和角色尺寸进行比较。
ice/frost-nova战斗：冰霜新星与技能反馈
将冰霜新星用于范围法术的视觉反馈。先确定技能何时生效、何时结算伤害和何时结束后摇，再调整动画。画面中的冰环本身不会提供碰撞范围、伤害或冷却时间，需要在游戏逻辑中明确对齐。
pickups/collect-burst奖励：拾取爆闪与物品收集
在游戏确认拾取成功后，才在物品位置播放 collect burst，计分只结算一次，动画结束后移除。测试多个物品同时被拾取：如果闪光盖住玩家，应限制同时出现的特效数量或降低配色亮度。
用四步把 PixelFX 放进完整游戏
先规划最小循环：例如在一个房间移动、收集五颗水晶、获胜后重新开始。在加特效前，明确键盘或触屏操作。
为视觉指定实际事件：篝火标记场景，拾取爆闪确认水晶收集，冰霜新星提示技能释放。区分氛围、成功和危险信号。
在 Studio 中规划游戏，或在自己的代码项目中使用示例。接入时提供对应源码或导出的资源；贴一个链接并不代表助手已经导入该库。
完整玩一轮，检查重复拾取与重开。对比浅色和深色背景上的透明边缘、精灵锚点以及手机端辨识度。提出视觉修改前先保留可用版本。
将 PixelFX 用于浏览器游戏
在使用 Vite 等 ESM 打包工具的 JavaScript 项目中安装。下方独立 Canvas 示例会创建画布，点击或触摸即可触发拾取特效。接入已有游戏时，把特效绘制在透明叠加层，由实际游戏事件触发。伤害、碰撞与计分仍保留在游戏逻辑中。
npm install github:patch-gg/pixelfx#a84159688af3ca37a4be05a0d422b94451b2e24eJavaScript / Canvas
import { createFrame, clearFrame, createFx, composite } from 'pixelfx';
import * as burst from 'pixelfx/fx/pickups/collect-burst';
const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 180;
canvas.style.cssText = 'width:640px;max-width:100%;image-rendering:pixelated;background:#111';
document.body.append(canvas);
const ctx = canvas.getContext('2d');
const frame = createFrame(320, 180);
const pixels = ctx.createImageData(320, 180);
let fx;
canvas.addEventListener('pointerdown', () => {
fx = createFx(burst, { x: 160, y: 120, seed: 3 });
});
let previous;
function tick(now) {
const dt = previous === undefined ? 0 : Math.min((now - previous) / 1000, 0.05);
previous = now;
clearFrame(frame);
if (fx) {
fx.update(dt);
fx.draw(frame);
if (fx.done()) fx = undefined;
}
composite(frame, pixels.data);
ctx.putImageData(pixels, 0, 0);
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);导出 PixelFX 精灵图
克隆仓库、安装工具依赖，再渲染指定特效。导出器生成透明 PNG 图集和 Aseprite 风格的 JSON，包含帧时长与锚点信息。在引擎中使用兼容导入器；只导入 PNG 不会自动应用 JSON 中的时序和锚点。渲染工具的环境要求见官方创作指南。
git clone https://github.com/patch-gg/pixelfx.git
cd pixelfx
git checkout a84159688af3ca37a4be05a0d422b94451b2e24e
npm install
node tools/render.mjs ice/frost-nova --sheet用 AI 定制 PixelFX
官方仓库附带 Claude Code 插件，在 Claude Code 中运行下方两条命令即可安装。使用其他助手时，提供所选特效源码和下方需求。本资源页不会为 Studio 安装该插件，也不保证自动从 GitHub 导入。
/plugin marketplace add patch-gg/pixelfx
/plugin install pixelfx@pixelfx为我现有的浏览器游戏添加 PixelFX collect-burst 拾取特效。保留控制、计分和碰撞规则。每次实际拾取物品时只触发一次，使用固定随机种子和蓝色配色。特效绘制在透明图层上，结束后移除，重新开始时清空。保留 MIT 声明。展示修改文件，并说明如何检查重播、同时拾取多个物品及移动端性能。如果无法获取源码，先向我要文件，不要编造 API。
在实际游戏中检查特效
根据背景调整配色，根据命中节奏调整速度，用固定种子进行可重复比较。检查多个特效同时出现、重开时清理和小屏幕辨识度，并考虑减少动态效果设置。预览好看不等于已适配你的游戏和帧预算。
PixelFX 生成器常见问题
这是 AI 像素画生成器吗？
本工作台渲染三个已有的程序化特效，不调用图像模型，也不会根据一句话创造全新动画。PixelFX 另有用于编写特效的 Claude Code skill；网站的 Studio 则是 AI 游戏生成器。这几种工作流用途不同。
导出的 PNG 和 JSON 怎么用？
将两份文件放在同一目录。PNG 是逐帧排列的图集，JSON 描述每帧区域、时长和锚点。使用支持该格式的导入器，或在动画代码中按区域读取。关闭纹理平滑以保持像素边缘清晰，并检查锚点是否让特效固定在正确位置。
为什么接入游戏后光晕或暗边不同？
PixelFX 会合成颜色与加法发光层。透明 PNG 把结果烘焙为 RGBA 像素，在场景上的表现可能与实时加法渲染不同。先在实际背景上对比，再选择混合模式。本工具只导出特效，因此不会带有角色姿势动画。
能用它生成完整游戏吗？
本页生成器导出视觉资源。制作玩法请进入 Studio，描述目标和操作并确认游戏方案。登录后规划免费，生成和修改游戏消耗 Studio Credits。本页不会把 PixelFX 自动安装到 Studio，也不声称导出资源已在所有引擎中测试。
PixelFX 许可证与署名
上游代码与特效采用 MIT 许可证，再分发时需保留版权和许可声明。部分代码注明 Hugo Duprez 和 Hollow Crown 的贡献，应保留适用声明。gallery/fonts 中的 Patch Pixel 字体不在该许可证范围内，本页未使用。PixelFX 由 Patch 维护，本页是独立接入指南。
官方来源
OpenGame / 来源核实：2026 年 11 月 5 日 · 固定版本 a841596