大家好 我是为什么叫QQ

Hello everyone, I'm WhyQQ.

你看到的这244个像素特效 没有一张序列帧素材

None of the 244 pixel VFX you see here use a single spritesheet texture.

火焰 冰霜 剑光 烟雾

Fire, frost, sword slashes, smoke—

全是JavaScript现场算出来的

every one of them is computed live in JavaScript.

这个项目叫pixelfx 我真正感兴趣的 倒不是数量

The project is called pixelfx. What caught my eye isn't the sheer quantity,

它把一件很主观的工作

but how it transforms subjective visual artistry

变成了程序员能修改 能复现 能检查的代码

into code that programmers can modify, reproduce, and review.

更妙的是 它还让Agent渲染自己的作品

Even better, it lets AI agents render their own creations,

打开图片找问题 再回去改

inspect the visual output to spot defects, and iterate on the code.

你甚至可以打开一个文件

You can open a single file

顺着几行函数找到某颗火星的出生和消失

and trace a couple of functions to see exactly how a single spark is born and dies.

今天我会把它接进一个能玩的小游戏

Today, I'll integrate it into a playable mini-game

也聊聊这套方法怎样用到日常开发

and discuss how this methodology applies to everyday software engineering.

程序员看特效库 通常会先问三件事

When developers evaluate a visual effects library, they typically ask three questions:

接进去要写多少胶水代码

how much glue code is needed to wire it up,

效果能不能改 出问题能不能定位

how customizable the visuals are, and how easily issues can be debugged.

下载一堆PNG很省事

Downloading pre-baked PNG spritesheets is convenient upfront,

可尺寸 锚点 节奏一旦不合适 你就得回头找美术

but the moment dimensions, anchor points, or frame pacing don't fit, you're back to waiting on artists.

纯代码特效换了思路

Code-driven effects take a fundamentally different approach:

颜色是参数 方向是参数 随机种子也是参数

color is a parameter, direction is a parameter, and random seed is a parameter.

你想把红色火焰换成蓝色 不必重画

Want to turn a red flame into blue? No redrawing necessary.

你想让剑光转个角度 也不必逐帧修

Want to angle a sword slash? No need to touch individual sprite frames.

对工程师来说 这种可控性 比特效数量更有价值

For engineers, this programmatic control is far more valuable than asset count.

素材包给你结果 这里连生成过程也一起给你

Asset packs give you the final result; pixelfx gives you the entire generative pipeline.

维护时 改一处常量就能试一种方向

During maintenance, tweaking a single constant lets you test an entirely new visual direction.

pixelfx里的特效分两类

Effects in pixelfx are divided into two distinct categories:

Pure Effect直接给出draw(p t o)

Pure Effects expose a direct draw(p, t, o) function.

只要告诉我第几秒 我就能算出这一帧

Just pass in the current timestamp, and it calculates the exact frame state on the fly.

光环 瀑布 传送门很适合这种做法

Auras, waterfalls, and portals are prime candidates for this stateless approach,

循环接缝也好处理

and loop seams are trivial to handle mathematically.

Simulated Effect则导出create(o)

Simulated Effects, on the other hand, export a stateful create(o) factory.

它会保存粒子 碎片和光照状态

They persist active particles, debris, and dynamic lighting state across ticks,

每步update再draw

updating physical state step-by-step before rendering.

爆炸和烟雾有生命周期 有速度 有落地反弹

Explosions and smoke have lifespans, velocities, and floor-bounce physics—

状态就得留下来

so state must be retained.

一个按时间求值 一个随时间演化

One evaluates purely on time; the other evolves over time.

模拟类在内部按120Hz或更细的步长推进

Simulated effects step forward internally at 120Hz or higher sub-tick intervals,

渲染帧率变化时 粒子运动仍然一致

ensuring consistent particle trajectories regardless of display refresh rate fluctuations.

分清这两种模型 后面接入游戏循环就不会乱

Keeping these two paradigms distinct prevents chaos when integrating into your main game loop.

它的帧缓冲也分两份

Its framebuffer is also cleanly split into two passes:

color装像素颜色 light装叠加辉光

a color buffer for base pixel pigments, and a light buffer for additive bloom.

合成时先铺颜色 再把光叠上去

During compositing, it renders the base color pass first, then overlays the glow layer on top.

火焰中心能白得发亮 烟雾还能保留透明层次

This division is why flame cores can shine blindingly white while outer smoke retains soft translucency.

靠的就是这条分工 另一个细节是固定seed

Another crucial engineering detail is deterministic random seeds.

第40帧每次都能复现

Frame 40 reproduces with bitwise precision every single run.

导出序列帧才不会今天一套 明天一套

Exporting spritesheets won't produce diverging artifacts from day to day.

你在业务里做粒子 程序化动画或截图测试

If you build particle systems, procedural animations, or screenshot snapshot tests,

也可以借这个约束

you can borrow this exact constraint.

随机效果要想好调试 先让随机数听seed的话

To make randomized visuals debuggable, always bind your PRNG to an explicit seed.

需要复现bug时 你也不用录屏碰运气

When reproducing a bug, you won't need to capture video and rely on luck—

把时间点和种子发给别人就够了

simply sharing the timestamp and seed is enough.

只有一道剑光 画面往往还是软的

A sword slash alone often feels weightless and limp.

角色站着不动 特效再亮 也像把贴纸盖上去

If the character remains rigid, even the flashiest particle effect looks like a pasted sticker.

打击感来自一串时间关系

True combat impact stems from an orchestrated sequence of micro-timings:

攻击前先蓄力 释放时姿势突然打开

wind-up anticipation before the swing, an explosive posture burst upon release,

命中瞬间停一下 目标后仰 画面轻震 再收招

a crisp hit-stop freeze on impact, target recoil, subtle screen shake, and smooth recovery.

玩家感受到的重量 藏在这些间隔里

The visceral weight players feel lives entirely inside these timing intervals.

pixelfx 0.3.0把这套关系写进createAct

pixelfx 0.3.0 bakes this relationship into its createAct API.

它提供61个带角色动作的特效 还有12个完整连招

It ships 61 effects bundled with character animations, plus 12 full combo sequences.

数值可以直接读 自己角色也能照时间表演

Timings are exposed as raw data so your own characters can act along the exact same timeline.

轻武器可以缩短停帧 重武器增加预备和恢复

Light weapons can trim hit-stops, while heavy weapons amplify wind-up and recovery windows.

同一套数据能服务不同手感 看这段官方动作演示

A single data schema drives diverse combat feels—check out this official animation showcase.

剑光出现以前 身体已经向反方向预备

Before the blade arcs through the air, the body has already coiled in the opposing direction.

命中时 停帧只有很短一截

Upon impact, the hit-stop lasts only a few frames,

却足够让大脑确认接触

yet it is enough for the human brain to register physical contact.

随后目标被推开 攻击者继续完成挥剑

The target is then pushed back as the attacker follows through with the slash.

这里最值得关注的是

What's most noteworthy here

动作时间和特效时间放在同一份数据里

is that animation timing and visual effect timing coexist in the exact same data structure.

你不用靠肉眼在代码里到处补setTimeout

You no longer need to sprinkle fragile setTimeout hacks throughout your codebase.

hits记录命中点 停帧 震屏和推力

The 'hits' array records hit-points, hit-stop frames, screen shake intensity, and knockback impulses,

poses记录关键姿势

while 'poses' defines keyframe skeletal postures.

游戏逻辑要判定伤害 也有了清楚的锚点

Game logic now has crystal-clear temporal anchors for damage registration.

你自己做战斗系统时

When designing your own combat mechanics,

也能把这份时间数据当成双方都能读取的接口

you can treat this timing data as a shared interface consumable by both gameplay and rendering.

这个灰色小人也没有用序列帧

This gray dummy character doesn't use spritesheets either.

项目用固定长度的3D骨骼描述身体

The project represents the body using fixed-length 3D skeletal segments:

骨盆连到脊柱和肩膀 手脚目标交给IK求关节位置

pelvis linked to spine and shoulders, with limb endpoints solved via inverse kinematics (IK).

再按深度决定遮挡

Depth values resolve surface occlusion,

最终压成几种灰阶和一条轮廓线

ultimately rasterized into a handful of grayscale tones and a crisp outline.

姿势按12fps跳动 粒子可以保持更高更新率

Key poses step at a stylistic 12fps, while particle effects maintain smooth 60fps updates.

看起来有手绘节奏 又能真正转身和弯腰

It yields the rhythmic feel of hand-drawn animation while genuinely bending and rotating in 3D.

对独立开发者来说 这套方案很适合做动作原型

For indie developers, this setup is fantastic for rapid combat prototyping:

先验证剪影和节奏 再决定要不要投入正式美术

validate your silhouettes and pacing first before committing heavy budget to bespoke art assets.

冰冻 中毒这类效果还能读取身体信息

Status effects like frozen crystals or poison clouds can read the character's skeletal coordinates directly,

贴着角色走 不必另做一套跟随动画

clinging naturally to limbs without bespoke follow-up animations.

项目还附了一个Claude Code Skill

The repo also includes an official Claude Code Skill.

真正有价值的部分

The real breakthrough here

是它给Agent安排了一条创作流水线

is structuring a disciplined visual creative pipeline for the AI agent:

先写一句明确的画面目标 再做几版草稿

start with a clear aesthetic prompt, generate multiple visual drafts,

渲染成Contact Sheet GIF或MP4

render them out into contact sheet GIFs or MP4 previews,

Agent要打开结果 看构图 颜色和运动

and require the agent to inspect the visual output for composition, color balance, and motion curves

再修最显眼的问题

before revising the most glaring defects.

代码通过编译 只能证明它能执行

Passing compilation only proves the code runs without crashing;

画面有没有焦点 烟雾是不是死板 仍要观察输出

whether the visual has an impactful focal point or if smoke feels stiff requires seeing the pixels.

模型外面多这一圈反馈 生成代码才变成制作过程

Adding this closed visual loop transforms code generation into an actual creative craft.

每次修改都有新图作证

Because every code tweak produces a new visual artifact for evidence,

讨论就不再停留在感觉好或不好

critiques transcend vague subjective impressions.

官方建议至少三轮

The author recommends at least three iterative passes:

第一轮别急着抠细节 先看大形和节奏

Pass 1: Ignore micro-details; focus on macro silhouette, volume, and rhythm.

第二轮处理最碍眼的问题

Pass 2: Fix the most jarring defects—

比如冰环太厚 粒子全挤在中心

like an oversized frost ring or particles clumping awkwardly in the center.

第三轮再核对消散 循环和角色动作

Pass 3: Fine-tune particle dissipation, loop continuity, and character action alignment.

这个方法来自像素特效开发者Hugo Duprez

This methodology originates from pixel artist and VFX creator Hugo Duprez,

他把它概括成代码可塑 相信眼睛 喂好参考

distilled into: code is malleable, trust your eyes, and feed high-quality references.

pixelfx把方法做成工具和约定

pixelfx operationalizes this mindset into tooling and conventions.

你可以把它想成视觉版测试驱动开发

Think of it as visual Test-Driven Development (TDD):

先拿输出当证据 再决定下一刀改哪里

use rendered evidence to decide where to place the next code edit.

别在脑子里凭空验收

Never approve changes based on pure imagination.

一轮只修一类问题 差别才看得清

Tackle one class of issue per pass so differential improvements remain transparent;

全改一遍 反而很难知道哪一步起了作用

change everything at once, and you won't know which tweak actually fixed the problem.

自动检查也有自己的位置

Automated linting also has an indispensable role.

tools/check.mjs会看画布溢出

The tools/check.mjs script audits canvas bounding-box overflows,

循环接缝 未固定的随机数 慢帧和动作数据

loop seam discrepancies, unseeded random calls, dropped frame spikes, and motion data schema violations.

它能抓住很多低级问题 却不会替你做审美判断

It catches deterministic regression bugs without pretending to make aesthetic judgments.

一张图没有溢出 不代表主体清楚

Zero pixel overflow doesn't guarantee a clear visual focal point,

一段动画能无缝循环 也不代表运动有趣

and a seamless loop doesn't make the animation compelling.

所以检查结果和渲染结果要一起看

That's why linter reports and rendered artifacts must be evaluated together:

前者管合同 后者管体验

the former enforces technical contracts; the latter validates player experience.

这个分工放到UI动画 图表和网页交互里同样适用

This dual-gate division applies equally to UI animations, interactive charts, and web layouts:

可量化的交给工具 感受类的留给人

delegate quantifiable assertions to automated tools, and reserve human judgment for aesthetics.

团队也能把检查放进持续集成

Engineering teams can plug these visual checks into CI/CD pipelines,

让失败构建带回一张能直接查看的图

ensuring failed builds attach a viewable image artifact directly to the PR.

我没有停在画廊里

I didn't stop at browsing the gallery—

这个小游戏直接调用pixelfx 0.3.0

I hooked pixelfx 0.3.0 directly into a playable demo.

画面用Canvas 2D 内部分辨率只有480×270

The game renders via Canvas 2D at an internal resolution of 480×270,

再做像素化放大

pixelated and scaled up crisply to the viewport.

剑击 冰霜 冲刺闪现 命中火花 烟雾和拾取

Sword slashes, frost spells, dash flashes, hit sparks, smoke, and item pickups—

全都从对应模块创建

are all spawned on the fly from their respective effect modules.

游戏逻辑固定60Hz 特效照常update和draw

Gameplay ticks at a fixed 60Hz while VFX update and draw seamlessly in the loop.

每帧先清帧缓冲

Each frame clears the dual framebuffers first,

背景特效 角色 前景特效按顺序画

renders background VFX, characters, and foreground particle passes sequentially,

再用composite合成

and finishes with a final composite pass.

我这里用createFx 战斗状态仍由自己的代码管

I use createFx here while keeping combat state machine logic strictly under game control.

三波敌人共用一个战场

Three enemy waves share the arena:

史莱姆追击 蝙蝠快速贴近 幽灵拉开距离射击

slimes charge forward, bats dash in aggressively, and ghosts kite at range with projectile spells.

Boss还会分裂

The final boss even splits upon taking critical damage.

你可以用WASD移动 鼠标瞄准 Space挥剑 K放冰霜

Move with WASD, aim with your mouse, swing with Space, cast frost with K,

冲刺用L或Shift Esc随时暂停

dash with L or Shift, and pause anytime with Escape.

实战里最容易暴露的 是特效和规则各玩各的

In production games, the biggest pitfall is visual effects and gameplay rules drifting apart.

剑光已经出现 伤害却晚半拍 手感马上发飘

If the slash appears but damage registers half a beat late, the combat immediately feels floaty and unresponsive.

所以Demo把输入

That's why the demo binds player inputs,

冷却 伤害和特效触发放在同一套状态更新里

cooldowns, hurtbox damage, and VFX triggers into the exact same atomic tick update.

剑击和冲刺共用体力

Sword swings and dashes draw from a shared stamina pool,

冰霜消耗法力 还会减速和击退

frost consumes mana while applying status slow and knockback,

敌人死亡再生成烟雾与拾取

and enemy deaths spawn smoke bursts alongside item drops.

画面在解释规则 规则也在限制画面

Visuals explain game rules, while rules impose structural boundaries on visuals.

我自己调试时

During my own debugging,

也遇到颜色通道写反 角色几乎透明的问题

I hit a bug where swapped color channels made the character nearly invisible;

看截图比盯日志更快定位

a single screenshot spotted the issue ten times faster than staring at text logs.

这个方向比无限堆粒子更重要

Clear communication beats piling on infinite particle counts every time:

玩家看得懂发生了什么

when players can read what's happening on screen,

才敢在下一波做更冒险的操作 不接Canvas也有路

they feel confident taking bold risks in the next wave. Don't want raw Canvas 2D? There are other paths.

官方渲染工具能把单个

The official CLI tooling can bake any

特效导出透明Sprite Sheet

individual effect into transparent spritesheets.

它还会给出Aseprite风格JSON

It also generates Aseprite-compatible JSON metadata,

里面有帧矩形和时长 也记录fps 循环和锚点

detailing frame rectangles, durations, target fps, loop tags, and anchor pivots.

Godot Unity GameMaker等引擎可以走素材导入流程

Game engines like Godot, Unity, or GameMaker can follow standard asset import pipelines,

浏览器里则适合直接用JS模块

while browser web apps benefit from loading the live JS modules directly

保留换色 镜像和旋转能力

to retain real-time palette swapping, mirroring, and procedural rotation.

选哪条路 要看你要运行时可编程

Which route you pick depends on whether you prioritize runtime programmability

还是要管线稳定

or battle-tested asset pipeline stability.

我的建议很朴素

My rule of thumb is straightforward:

原型先跑代码 跨引擎交付再烘焙

prototype live in code, and bake out spritesheets when delivering across disparate engines.

烘焙后文件固定 版本管理更直观

Baked files are static, making version control straightforward

运行时开销也更容易估算

and runtime memory footprints predictable.

新项目热度高 和能直接进生产 中间还有距离

High GitHub buzz and production readiness are two very different things.

pixelfx在2026年10月30日开源

pixelfx was open-sourced on October 30, 2026,

我核查的仓库快照已经到0.3.0

and the commit snapshot I benchmarked is at version 0.3.0.

它很适合像素风格原型 Game Jam和小型项目

It is brilliant for pixel-art prototypes, game jams, and agile indie productions,

但你要自己压测目标设备

but you must stress-test low-end target hardware yourself

也要核对素材尺寸 对象回收和引擎兼容性

and verify canvas bounds, particle object pooling, and engine integration limits.

代码和特效采用MIT许可 商业使用可以

Both the engine code and VFX definitions are under the MIT license, permitting commercial usage.

NOTICE仍要读 里面有改编来源说明

Still, read the NOTICE file—it attributes upstream inspiration and adapted algorithms.

画廊的Patch Pixel字体不在MIT范围内

Keep in mind that the gallery's 'Patch Pixel' font is excluded from the MIT license;

别把一个字体文件随手带进发行包

don't accidentally bundle proprietary font assets into your commercial releases.

项目还很年轻 接口可能继续变

The library is still in early development and APIs will evolve—

依赖时记得锁版本

be sure to pin exact package versions in package.json.

这套工作方式能迁移到很多工程任务

This workflow translates cleanly to many non-game software tasks:

做数据可视化时 先渲染几组真实数据

when building data visualizations, render real datasets first

再看标签有没有打架

to verify label collision dynamics;

做UI动效时 录下交互过程 检查遮挡和等待感

when designing UI transitions, record interactions to catch visual occlusions and perceptual lag;

做网页时 别只读DOM和测试报告

when crafting web apps, don't rely solely on headless DOM assertions—

直接截图看不同窗口尺寸

take full viewport snapshots across screen sizes.

关键动作始终相同 生成 观察 修改 验证

The core engineering loop remains identical: Generate, Observe, Modify, Verify.

Agent需要一个能接触结果的执行环境

AI agents need an execution environment where they can inspect their own rendered results;

人需要提前写清验收标准

humans need to establish clear visual acceptance criteria upfront.

没有这两样 再多生成一次 也只是更快地抽奖

Without both, churning through prompt generations is just spinning an expensive lottery wheel.

如果输出无法查看 就先补一个最小渲染器

If an agent's output cannot be observed directly, build a minimal preview renderer first—

很多项目的Agent体验 差的就是这块地基

that missing visual feedback loop is where most agentic coding workflows stumble.

我看完这个项目 留下的判断很简单

My takeaway from dissecting this project is simple:

AI可以写出火焰

AI can code a flame effect,

也能修改火焰 但作品该往哪里走

and it can tweak particle parameters on command—but where the piece should go

仍需要人给方向

still demands human aesthetic direction.

参考图 质量标准和收尾那一下取舍

Reference art, quality thresholds, and the final trade-off decisions

决定了库能不能变成你的风格

are what transform a raw code library into your signature visual style.

你以后接Agent做视觉任务

Next time you pair with an AI agent on visual tasks,

可以先给它一个渲染入口

give it a rendering harness,

再给一张可查看的结果 再补一组自动检查

supply a viewable artifact, and hook up a suite of automated linters.

让它一轮一轮拿证据说话

Make it defend its work with rendered evidence iteration by iteration.

别要求它一次命中答案 给它留下修改的通道

Never expect a single prompt to hit perfection—leave open a verified feedback channel.

代码能运行 画面还要过关

Running code is table stakes; the visual experience must pass muster.

你觉得这种创作闭环适合哪些开发工作

Which parts of your own engineering workflow could benefit from this closed creative loop?

评论区聊聊 感谢观看 别忘了一键三连

Let me know in the comments! Thanks for watching, and don't forget to like, subscribe, and share.

我是为什么叫QQ 下期见

I'm WhyQQ—see you in the next episode.