1. Fable 5.2 从建模到 FPS 游戏完整教程

[!abstract] 速览

• 41 分钟一句话跑出完整射击游戏，这篇教程将完整贯穿建模、声音、贴图全流程，源代码见最后。
• 原帖：用 Fable 5.2 只给一句话提示词，全程没有人工反馈，让 AI 跑了 8 小时，做了一个浏览器里的第一人称射击游戏，模型、声音、贴图都是从零做的。
• 主帖拿了约 300 万浏览和 1.1 万赞。按 API 价格算，他这一趟花了约 $550。
• 第一次试不用一上来就跑完整的 FPS 游戏，先用最小的音效台把命令行无人值守流程跑通，折算成本 $4.66。
• 想看原版做法和四个模块全流程 顺着往下读，每节末尾都有作者实测跑通的完整提示词。

41 分钟一句话跑出完整射击游戏，这篇教程将完整贯穿建模、声音、贴图全流程，效果如下👇（源代码见最后）

昨天 Anthropic 的 @felixrieseberg 在 X 发了一条帖子。他用 Fable 5.2 只给了一句话提示词，全程没有人工反馈，让 AI 跑了 8 小时，做了一个浏览器里的第一人称射击游戏 Saltline，模型、声音、贴图都是从零做的。

主帖拿了约 300 万浏览和 1.1 万赞。按 API 价格算，他这一趟花了约 $550。

[!quote] 11月10日
我想用一次性提示词测试 Fable 5.2 的质量，不加入人工反馈。 这款游戏的一切都是从零开始制作的：模型、音效、纹理。按 API 定价约花费 $550，输出约 270 万个 token，输入约 4.45 亿个 token，大量使用了缓存。花了 8 个小时！ 在这里玩：https://claude.ai/artifact/BGY1SztrAYcJQHSsnHHGmp…

[!tip] 如何阅读本文

• 第一次做，想小成本试水 直接看音效台部分，跟着跑通第一个小实验；
• 想看原版做法和四个模块全流程 顺着往下读，每节末尾都有我实测跑通的完整提示词；
• 直接看配置和拿成品 最后附上了开源项目地址

1.1. 工具分工

这套实验用到的工具很精简：

[!tip] 一句话总结顺序
用一条命令行启动 Claude Code 调用 Fable 5.2，传入单次需求与自检系统提示词，让它自己写代码、用浏览器截图调画面、用离线音频接口查声音，中途不插话直到交出单文件 HTML。

1.2. 分钟做出音效台

第一次试不用一上来就跑完整的 FPS 游戏，先用最小的音效台把命令行无人值守流程跑通，折算成本 $4.66。

1. 准备环境（2 分钟） — 确保 Claude Code 升级到 2.1.242 以上版本（我用的是 2.1.322），本机装好 Chrome 和 agent-browser；
2. 新建两个文件（2 分钟） — 在一个空文件夹里，新建 builder_system.md（放附加的系统提示词）和 prompt.md（放具体任务需求）；
3. 写入系统提示词（1 分钟） — 把下面这段话存进 builder_system.md，让 AI 自己截图和查音频 👇

你在独立完成一个创作任务。用户只给一次需求，之后不会再回答任何问题，所有决定你自己做，直到作品完成。
- 产物只写到任务指定的目录。
- 可以用 `agent-browser`（open / screenshot / eval / console）在本机 Chrome 里打开自己的页面截图自检，发现问题就改。截图前先用 eval 读一次 WebGL renderer 字符串，如果是 SwiftShader 等软件渲染，在最终汇报里写明。
- 涉及声音时，你听不到声音：用 OfflineAudioContext 渲染后检查峰值、削波和静音段，在汇报里写明「未经人耳试听」。
- 完成后用 3–6 行汇报：做了什么、文件路径、已知问题。

Agent执行如下命令：

claude -p "$(cat prompt.md)" \
  --model claude-fable-5-2 \
  --permission-mode auto \
  --append-system-prompt "$(cat builder_system.md)" \
  --settings '{"promptCacheTtl":"5m"}' \
  --max-budget-usd 12 \
  --output-format json > run.json

1.3. 板块一：纯代码合成游戏音效台

1.3.1. 为什么先做这一步

不加载外部音频文件，靠振荡器、噪声和滤波器把枪声、环境声和配乐算出来，是原版很核心的一块。我想单独看看 Fable 5.2 在听不到声音的前提下，配合离线渲染检查能做成什么样。

1.3.2. 怎么做与结果

这一步跑了 16.6 分钟、16 轮，输入 117 万 token，缓存命中率 88.6%，输出 7.8 万 token。开 5 分钟缓存折算成本 $4.66，如果不走缓存要 $12.47。

生成的单文件 HTML 大小 56KB，本地浏览器直接打开就能用。界面上有波形、声谱、频谱显示和 14 个声音按钮（步枪室内外、换弹三段、弹壳、三种脚步、子弹掠过、跳弹、雨、远雷、约 30 秒配乐），它还自己多加了一个“交火演示”按钮，超出了提示词的要求。每次触发都会换随机种子。

它按系统提示词的要求，自己用 OfflineAudioContext 离线渲染检查了削波和静音，并在汇报里写明“未经人耳试听”。

1.3.3. 可直接复制提示词 👇

用纯 WebAudio 代码合成一套 FPS 游戏音效，不许用任何音频文件、采样或外部音频库，所有声音都从振荡器、噪声和滤波器算出来。

要有：步枪单发（室外、室内两种尾音）、换弹三段（退弹匣、上弹匣、拉枪栓）、弹壳落地、脚步（水泥、金属、积水各一种）、子弹掠过耳边、跳弹、持续的雨声、远处的雷声、一段 30 秒左右的紧张配乐。每个音效至少 3 个随机变体，连按不会听起来一模一样。

品质要像 3A 游戏的音效，不要 8-bit 芯片音那种味道。

做成一个单文件 HTML 音效台：每个声音一个按钮，播放时显示波形和频谱，界面要好看。
输出到：./01-audio/index.html

1.4. 板块二：程序化生成雨夜码头材质

1.4.1. 为什么做这一步

不加载外部图片贴图，靠代码生成湿地面反光、集装箱锈迹和喷字，单独测试它写程序化纹理与着色器的表现。

1.4.2. 怎么做与结果

这一步跑了 23.9 分钟、25 轮，输入 246 万 token，缓存命中率 83.8%，输出 11.4 万 token。折算成本 $8.56，不走缓存要 $24.24。

生成的 HTML 文件 55KB，只从 CDN 引入了 three.js 一个库，不加载任何图片。它用 agent-browser 打开页面截图自检，测了 WebGL 是真 GPU（Apple M2 Pro）而非软件渲染。

场景里做出了雨夜码头的湿混凝土积水实时反射、生锈瓦楞集装箱（带喷涂箱号）、镀锌钢配电柜、轮胎、木托盘和黄铜铭牌。它在汇报里自己列出的缺点是部分小坑被误判为积水、远景箱堆是平涂色块。

1.4.3. 可直接复制提示词 👇

用 Three.js（从 CDN 引入，只允许这一个库）做一个材质展示页，所有贴图都必须在代码里程序化生成，不许加载任何图片文件。

材质：雨后湿漉漉带积水反光的混凝土地面、刷漆后生锈的集装箱瓦楞钢板（带喷涂的箱号和标识）、镀锌钢、黑色橡胶、木托盘、带做旧痕迹的金属铭牌。

光照是雨夜码头的氛围：钠灯暖光加冷色天光，环境反射也要程序化生成。画面要接近照片级写实，可以慢慢转动查看每个材质。

做成单文件 HTML，输出到：./02-materials/index.html

1.5. 板块三：纯代码建模岸桥、货船与步枪

1.5.1. 为什么做这一步

不加载任何外部模型文件，测试它纯靠代码在 Three.js 里搭出复杂工业结构和第一人称枪械细节的能力。

1.5.2. 怎么做与结果

耗时 28.7 分钟、19 轮，输入 205 万 token，缓存命中率 76.1%，输出 14.0 万 token。折算成本 $10.38，不走缓存要 $21.96。

产物是一个 69KB 的单文件 HTML。里面除了提示词要求的三个模型：

它还在提示词要求之外，自己多加了一个“码头全景”标签，把场景拼到一起，约 185 万三角面，在我本机跑在约 120fps。

1.5.3. 可直接复制 👇

用 Three.js（从 CDN 引入，只允许这一个库）纯代码建模，不许加载任何模型文件或图片：
1. 一台集装箱码头的岸桥起重机（桁架、吊具、司机室、钢缆都要有）
2. 一艘停靠的集装箱货船，甲板上堆着集装箱
3. 一把第一人称视角的突击步枪，带红点瞄具，细节要经得起近看

结构比例要像真的，细节越多越好。做成单文件 HTML 模型查看器，可以切换三个模型、鼠标旋转缩放。
输出到：./03-models/index.html

1.6. 板块四：一句话提示词，跑出完整 FPS 游戏

1.6.1. 为什么做这一步

前面三个模块验证完，我把目录换到干净的空文件夹，只用 Felix 原版那句提示词（去掉了开头的 You know, you should also，加了一句单文件 HTML、只用 CDN、不加载外部文件的环境说明），看看跑一次会做出什么。

1.6.2. 怎么做与结果

这一步我开了 1 小时缓存。它连续跑了 40.8 分钟、73 轮，输入 661 万 token，输出 19.3 万 token。

这一轮的缓存命中率是 90.9%，落在我前面倒推原版的 90%–95% 区间里。如果不走缓存，这一趟按原价要 $60.57，命中缓存后折算下来是 $15.96。

它自己做了一款叫 “SUBLEVEL 07” 的射击游戏，单文件 HTML 大小 131KB（也就是文章开头视频里录制的实机画面，视频配乐是我后加的 CC0 电子乐，游戏本身的音效没录进视频）：

1.6.3. 可直接复制 👇

Build me a FPS. Insanely detailed quality pls, something that looks visually like it can keep up with AAA. Make it small in scope (like a tiny level) but otherwise impressive photorealistic graphics

（环境说明：做成浏览器里能玩的单文件 HTML，只能从 CDN 引入库，不能加载外部模型、图片、音频文件。输出到 ./out/index.html）

1.7. 进阶：账单、缓存配置与踩坑

把我这 5 次运行的实测数据汇总如下：

1.7.1. 相关链接

1. 仓库：https://github.com/wquguru/fable52-fps-repro
2. 在线试玩：https://wquguru.github.io/fable52-fps-repro/