场景演示

一块田，几百株作物在风里摆，几十只动物在旁边来回走。 下面这个可以直接玩：

---

一、这一版做了什么#

• 从生图结果里切出 4 种作物（幼苗 / 南瓜 / 胡萝卜 / 玉米）和 4 只动物（小鸡 / 兔 / 猪 / 羊）
• 给 4 只动物做了走路动画，按显示尺寸烘焙成序列帧
• 作物的摇摆纯代码算，零素材
• 一个能跑几百个物体的场景渲染器

二、走路动画：怎么让"一坨"动起来#

2.1 先说做不到的：切片#

按原计划，走路动画应该切成"头 / 身体 / 脚"三段分别驱动。但这四只动物切不了。

看图得到的结论是一致的：

硬切一条直线会怎样：抬脚的时候会露出一条笔直的横切口，比不动还难看。 这印证了已经写进 AGENTS.md 的那条——

2.2 所以改用连续变形#

不切片，改成对整张图做三种连续变形。关键是第三种：

弯曲 + 跟随延迟是让单张图"活"起来的关键。第一版只有整体刚体运动（倾斜 + 起伏 + 平移）， 评价原话是"更像原地抖动，不太像走路"——因为整体同步运动没有层次。

做法是逐行给一个水平位移：

dx(y) = A · u^1.35 · sin(ω + lag · u)      // u = 1 在头顶，0 在脚底

越靠上的行位移越大、相位越滞后。这是单张图拿到 follow-through 的唯一办法， 而且因为它是连续变形不是拼接，不会留接缝——正好适合这种头身连成一坨的角色。

抬脚同样用连续变形做：位移量随高度从 0 长到满，所以在身体线上是 0、到脚底最大， 中间没有接缝；透明区域位移后还是透明，肉眼只看到两只脚在交替抬起。

2.3 幅度必须打印出来看#

肉眼看不出 3% 和 10% 的差别。--probe 会打印实际位移：

python3 tools/art/walkers.py --probe

大动物的幅度故意小一点（体量大、惯性大），小鸡最活泼。

2.4 四种动物的走路循环#

三、作物摇摆：零素材#

作物不需要任何动画素材，全部是 sin 算的：

const a = Math.sin(T * (0.8 + w * 0.4) + phase * 6.4) * amp * wind;
ctx.translate(crop.x, crop.y);
ctx.rotate(a);                    // ★ 绕**根部**转
ctx.drawImage(img, -w / 2, -h, w, h);

两个要点：

1. 绕根部转，不是绕中心。绕中心会像飘在半空，不是长在地里。

2. 相位是位置算出来的，不是随机的：

   phase = x * 0.010 + y * 0.005;

   这样风会横着扫过整块田，形成一波一波的浪。相位纯随机的话，每株各晃各的， 看着像在抽搐而不是刮风。

再叠一层慢速主波做风力强弱变化：wind = 1 + sin(T*0.55)*0.3 + sin(T*1.3)*0.14。

四、性能：几百个物体怎么做#

场景右上角实时显示 fps 和每帧绘制次数，可以直接加减数量看它能扛到哪。

五、这一版踩过的坑#

六、下一步#

• 下一批动物出图时按 rig_layers.py 的规范分层出图，这里就能换成真正的三段骨架， 耳朵 / 尾巴 / 翅膀的次级运动会明显得多。
• 作物可以做生长阶段：同一株从幼苗长到成熟，而不是四种作物各占一片。
• 加点击：点作物收获得飘字，点动物有反应——这是核心玩法要用的。
• 场景里再放几个设施（谷仓、水井、风车）当视觉锚点。