📌 平台背景与定位：用代码重构像素美术生产力
在复古像素游戏（Pixel Art Game）的开发过程中，视觉特效（VFX）与打击感机制往往是区分一款平庸游戏与神作的关键分水岭。然而，传统手绘像素特效一直存在四大顽疾：
- 美术资产生产极其昂贵：一个流畅的 12 帧火焰或爆炸动画，资深像素画师需要耗费数小时逐像素勾画与上色；
- 调参成本极高：如果策划临时要求将“火焰魔法”改成“冰霜魔法”，或者调整攻击范围与爆发时长，手绘画师几乎需要推倒重画；
- 打击感逻辑断层：特效如果只是简单的贴图播放，往往缺乏蓄力（Windup）、命中停顿（Hitstop / 顿帧）、冲击闪白（Hit Flash）与震屏受击反馈等微观动作机制，打在敌人身上轻飘无力；
- 体积膨胀与引擎绑定：传统动画导出海量 PNG 图片序列，容易导致游戏包体剧烈膨胀，且跨引擎迁移繁琐。
pixelfx 的出现彻底改变了这一现状。它继承自知名像素开发者 Hugo Duprez 的核心理念——“把代码当成橡皮泥（Code is clay）”：
“代码是连续的物理数学公式，而像素是离散的网格画布。用几十行原生代码去模拟温度、重力、阻尼、生命周期与颜色渐变，再通过离散网格栅格化，就能得到具有顶级生命力与物理惯性的像素特效！”
🔑 核心打击感机制剖析：为什么 pixelfx 特别“有爽感”？
许多开发者用纯代码写特效时容易显得僵硬机械，而 pixelfx 能够达到媲美专业主机动作游戏的手感，是因为它在底层严格贯彻了游戏动作设计的“三幕黄金定律”：
1. 蓄力前摇 (Anticipation / Windup)
在释放强力魔法或挥出重锤前，画面绝不突兀爆发，而是通过 Charge up（粒子吸附向心塌陷） 或动作形变蓄势，向玩家视觉明确预告“大招即将降临”。
2. 命中顿帧与定格反色 (Impact Frame & Hit Flash)
格斗游戏核心技术！在兵刃击中目标的瞬间，插入 0.1~0.3 秒的 Hit flash（全局纯白高光） 或 Impact frame（极端高对比黑白负片帧），产生强烈的视觉震颤顿挫。
3. 动量释放与余波消散 (Follow-through & Dissolve)
命中之后，伴随碎石飞溅（Ground slam）、火星跳跃（Hit spark）与受击者状态（Burning / Stunned），能量符合牛顿阻尼衰减自然飘散，完成完整打击闭环。
💻 开发者集成与工程化应用：如何用到自己的项目中？
无论你是制作 HTML5 网页小游戏，还是使用 Unity、Godot、Unreal 等成熟工业引擎，pixelfx 都提供了开箱即用的工作流：
方式一：网页端与 WebGL / Canvas 游戏直接裸跑（零依赖）
在项目中直接引入 pixelfx 模块，只需几行 JavaScript 即可在 Canvas 上原地驱动特效：
import { playEffect } from 'pixelfx';
// 在敌人坐标 (x, y) 处实时渲染一个暴击打击感火花
playEffect('critical_hit', {
canvas: ctx,
x: enemy.x,
y: enemy.y,
scale: 2,
palette: 'molten_gold' // 可自由换肤与改色！
});
方式二：一键导出全通用精灵表（Sprite Sheet 导出）
这是针对 Unity / Godot / Cocos 开发者最实用的功能：
- 内置的离线烘焙工具链（
tools/export.js）可以在无头环境中自动模拟特效生命周期； - 将任意动画渲染为带透明通道（RGBA PNG）的标准栅格精灵大图（Sprite Sheet），并附带标准的
.json帧尺寸与原点数据； - 无论是 Godot 的
AnimatedSprite2D还是 Unity 的Sprite Animation，均可直接拖入使用！
方式三：借助 Claude Code 专属技能，用自然语言定制新特效
pixelfx 最令人惊艳的创新在于它随仓库附带的 AI 自动化创作技能（skills/pixelfx）：
- 它给 Claude Code 智能体注入了一套“挑剔像素画师”的迭代工作流：起草代码 ➔ 离线无头渲染 ➔ 视觉自检 ➔ 微调物理参数与调色；
- 开发者只需要在终端对 AI 说一句话：“帮我写一个赛博朋克风格的虚空电弧传送门，带紫色火星与 3 秒倒计时”；
- AI 即可依照
sim.js的规范，全自动编写出新的特效代码并打包进你的特效库中！
⚠️ 极其重要：像素特效开发避坑与调优铁律
粒子模拟时坐标是浮点数（如 x = 12.43），但在向 Canvas 写入像素前，必须强制取整（Math.floor / round）！若直接让浏览器进行次像素抗锯齿插值，会导致边缘模糊发虚，瞬间丧失纯正的像素硬核美感（变成廉价模糊感）。
高频打斗（如机关枪扫射或暴风雪天气）会瞬间生成数千个粒子对象。严禁在 tick() 循环中不断 new Particle()，必须预先分配定长 Float32Array 数组做对象池轮换，杜绝 JavaScript 频繁垃圾回收（GC Pause）引发的掉帧卡顿。
优秀的像素特效颜色绝不超过 4~6 阶（如高光白 ➔ 亮黄 ➔ 橙红 ➔ 深烟灰）。使用固定调色板索引（Palette Indexing）进行着色，能保证你的特效与各类复古艺术风格（如 NES、GameBoy、PICO-8）完美契合！
🔄 项目出处与资源直达
- GitHub 官方仓库：https://github.com/patch-gg/pixelfx（持续维护，欢迎提 Issue 与 PR）；
- 在线全量特效交互展厅：https://patch-gg.github.io/pixelfx/（即开即玩，支持单帧观察与换色）；
- 核心原作者方法论灵感：Hugo Duprez 《How to make good pixel art effects with Claude》；
- 博主官方技术空间：欢迎关注博主主页 https://github.com/lalytian，获取更多独立游戏开发、自动化运维与前沿开发工具。