我的 agent 工作流里,图像和动效一直是短板,让模型出图,结果不是糊成一片就是假得发飘。今天这个仓库给了个反着来的答案,特效一张图片都不存,全部写成代码。

本周 Top5:impeccable(+11,754)、hallmark(+10,517)、t3code(+9,770)、security-audit-skill(+9,155)、claude-mem(+7,255)。

已解读的 ECC(+6,201)和 superpowers(+5,956)排在六七位,第八 taste-skill(+5,729)与榜首同属设计品味主题,这期不展开。本期主角 pixelfx 不在周榜,走 is_new 组入场(四天 3,618 星,与 036 期 dsh、037 期 Mika 同款路径)。

patch-gg/pixelfx,10 月 30 日建仓,四天 3,618 星、493 fork。21 个类目收着 244 个像素游戏特效,火焰、爆炸、雷电、治愈、暗影一应俱全,每个特效是一个 JS 文件,整个仓库找不到一张图片。这篇文章拆三件事,一个新仓库凭什么敢在上线当天砍掉近两成特效,代码写的特效怎么够到像素画工的水准,以及那套教 agent 写特效的技能值不值得装。

01-hero.jpg

图:官方画廊蒙太奇,篝火、骷髅火、瀑布、黑洞、龙卷风同屏,全部代码绘制

它是什么

像素游戏的特效,传统做法是美术手绘序列帧,导出 sprite sheet 塞进引擎,想改个颜色就得重画一遍。pixelfx 把这条路反了过来,特效是纯代码,src/fx/<类目>/<名字>.js 一个文件一个特效,零依赖零图片。

接入很简单。JS 系游戏(canvas、Phaser、PixiJS、three.js)直接 npm i github:patch-gg/pixelfx,四行代码把一个冰霜新星放进游戏循环。不跑 JS 的引擎(Godot、Unity、GameMaker、LÖVE)走导出,node tools/render.mjs ice/frost-nova --sheet 生成透明 PNG 帧网格加一份 Aseprite 格式的 JSON,各家引擎的现成导入器直接认,连轴心点和帧率都写在元数据里。

重上色走参数,不用重画。每个特效吃一条从暗到亮的色带,官方预制了 27 条,火焰换上冰色带就是蓝火,一行命令的事。不想装,官方画廊(patch-gg.github.io/pixelfx)在线试玩,调色、镜像、重播种都在浏览器里完成。

为什么有意思

上线当天砍掉 55 个特效

时间线值得完整看一遍。10 月 30 日 01:20(UTC),首个 commit 进库,标题写着 299 个特效。02:29,第二个 commit,重建试点,对齐 Sprite Fusion 的质量线。06:25,第三个 commit,全量重建。现在 README 顶部的自动计数停在 244。按两个数字算,55 个特效没能活着走出门,全程不到五个小时。

质量线是真人。Hugo Duprez,Sprite Fusion 的作者,写过一篇「如何用 Claude 做出好看的像素特效」,pixelfx 把他的开源特效设为及格线,AUTHORING.md 里的原话是,同样的屏幕尺寸上,他的特效比你更有细节、更有光、更有生命力,你就还没做完。方法论三条,代码当黏土,相信眼睛,喂足参照。他嫌图片精灵太硬,改参数不如改代码;渲染出来必须亲眼看,质量线得你自己定;做特效前先去研读怪物猎人类的成熟作品。pixelfx 的 records 目录和 contact sheet 流程,直接继承自他的工作法。

大环境天天在喊一句话出图,这个仓库上线头一天干的事是给自己立门槛。

特效会演戏

单独一个特效,看着像贴纸。pixelfx 的解法是给特效配 act 数据,61 个带角色的特效和 12 个连招全部带着身体的节奏走,何时预备、何时出手、命中定住几秒、目标晃多远,全是纯数据,数组里一行一项。

02-acting.jpg

图:官方 acts 动图抽帧,左上出刀前的预备动作,右下带残影的冲刺

演戏的载体是个灰假人,24×38 像素,实际是个 3D 骨架,骨头长度固定,平涂上色加一条干净的墨线,README 自称学的 Dead Cells。姿势按 12fps 步进,留手绘的顿挫感,粒子照常全速率跑,两层节奏叠出质感。

这个系统是被批评逼出来的。AUTHORING.md 引了首发评论的原话,缺预备动作和收招。下一版(10 月 31 日的 0.3.0)就把整套 acting 补上了。act.js 改编自 Hollow Crown,一个连音效都由代码生成的浏览器像素 RPG,作者 rehan-remade 本系列出现过,10 月 6 日那期解读了他的 universal-modder,当时 3,895 星,现在 9,351。

确定性是底线

特效分两类。纯类是时间的函数,给一个 t 画一帧,循环天然无缝;模拟类以 120Hz 步进真实粒子,火花弹跳、烟雾翻滚,在任何帧率下物理表现一致。全库禁用 Math.random 和 Date,每个随机数从 seed 里来,同一个 seed 的第四十帧,今天跑和下个月跑一模一样。

颜色和光分成两个缓冲区,颜色层管像素,光层做加法发光,火焰看着烫,是因为光层叠在画面最上。机器检查也到位,node tools/check.mjs 抓五种病,画出画布、一次性特效不空场、循环接缝、未播种随机数、慢帧,连演出里手瞬移都查。

03-gallery.jpg

图:蒙太奇另一帧,第二行左侧的假人正在施放环形魔法

配套的 Claude Code 技能(/plugin marketplace add patch-gg/pixelfx)把这套纪律写成了六步流程,一句话说清艺术方向、库内找参照、写 3 到 5 个真正不同的草稿、渲染成 contact sheet 亲眼挑刺(最少三轮)、带角色就演出来、机检清零。SKILL.md 附了 16 行排障表,「发飘」的处方是快进慢出加 1 到 2 帧白色主帧,「发灰」的处方是把光晕收到 0.2 到 0.5。这大概是把「挑刺」写成工程流程最彻底的一份。

边界与局限

仓库四天大,硬边界先列清楚。

零 release 零 tag,直发 main,npm 装法走 GitHub 直装,锁版本只能锁到 commit。精灵图导出会把光效烘成带透明度的颜色,SKILL.md 自己承认亮场景下会减淡,官方建议放暗层或者重渲一版。画在身上的特效(冰冻、中毒、扫描线)默认涂在灰假人身上,用自家角色得重新生成。画幅常见 96 到 320 像素宽,转场固定 320×180,大场面特效施展不开。

出身也要心里有数。sim.js 和部分特效改编自 Hugo Duprez 的 MIT 代码,act.js 改编自 Hollow Crown,NOTICE.md 列得清清楚楚。库化、跨引擎导出、机检与技能是自己的贡献,但底层配方站在前人肩膀上,这没什么不好,引用时要如实。

外部验证几乎空白。媒体只有 GameSlash 一篇短讯(10 月 31 日),issue 区三条,其中一条还是收录告知,另一个是测试探针。四天 3,618 星说明眼缘好,长期口碑没有数据。版本节奏一个数就够,0.3.0,一版。值得玩、值得学,别托付生产关键路径。

对谁有价值

像素游戏开发者,现在就能用,画廊试玩、导出精灵图接 Godot/Unity,MIT 协议商用随便。折腾 agent 工作流的,这个技能本身是份好教材,「质量线得你自己定」这条心法写进了流程第三步,比多数技能仓只堆命令强。前端想学像素渲染的,src/core 里的 sim.js 和 act.js 两个文件两万行不到,密度高,读得动。想要现成美术资产的大项目,收益有限,它给的是代码和流程,替代不了美术外包。

我的用法很明确,要像素动效就去官方画廊调色导出,接游戏走精灵图。什么时候它的质量线开始给数量让路,我再改主意。

数据截至 2026-11-03,来源:GitHub API(patch-gg/pixelfx)、仓库 README/NOTICE/docs/AUTHORING.md、commit 历史、GameSlash 报道

GitHub 仓库 https://github.com/patch-gg/pixelfx

Logo

更多推荐