手把手教你用 Fable 5.2 做个精致的 HTML 的 3D 动作游戏

Fable 5.2 发布后，大家都被它的能力震惊了，尤其是那个单网页的射击游戏。

我相信很多人看到那个网页不到 2MB、没用一张图片，模型、贴图、音效全是代码从零写出来的，却有那种效果的时候，都觉得很离谱。

我就想，能不能用它的思路，做一个更精细的 3D 国风动作游戏？

于是我用了一下午，大概 6 个小时，耗了 4.5 亿 Token（其中一部分是 Opus 5.5 跑的测试），它给了我这个结果。

真的，我傻了，你可以在这里试试：op7418.github.io/guizang-game-skill/

这些全都是它自己搞的，我没有给它任何创意上的想法，只说要做一个国风仙侠游戏。

这是一个仙侠题材的动作游戏：俯视角 3D 动作，有小怪、有 Boss、有剧情和配音，场景非常漂亮。

单个 HTML，手机和电脑都能适配，打开就能玩。

这真的是我又一个震惊瘫坐的时刻。

为什么说它厉害

为什么我觉得它做的这个游戏非常厉害？主要有四点。

1. 3D 效果非常精细

有大片随风起伏的草，分层的雾、雪和远山。

Boss 的场地是一层覆着水的石台，水面反光非常真实。

而且它在 three.js 上自己搭了一整套渲染流程，调色、光照、雾、草地都是自己写的；

也没用 WebGPU，只用兼容性最好的 WebGL，所以手机、电脑，甚至小红书小工具这种受限的环境里都能跑。

2. 画面非常好看

游戏里有 5 个带 3D 模型的角色、2 把武器、11 个场景道具（比如香炉、石灯笼、石碑），还有 5 种掉落物。

它先让即梦出图，再用 Tripo 转成 3D 模型。

整个生成过程全自动，提示词也是它自己写的，我完全没有干涉，连标题的题字都是它自己接入工具搞定的。

3. 动作能力非常强

这几乎是一个完整的 demo，离完整游戏只差怪物和场景的数量了。

主角和怪物都绑定了骨骼、做了动作。

主角有三段连招、闪避、格挡、弹反、处决，甚至还有弹反处决，老爽了，真的可以去试试。

另外还支持喝药、御剑和大招「万剑归宗」。

Boss 有二阶段，有起身的过场，也有台词。

4. 极度夸张的单文件打包

只需要一个网页文件就能玩，只有 30MB 左右。

所有的音乐、音效、配音、模型、贴图，全都打包在这一个文件里。

原始素材接近 100MB，硬生生被它优化到了 30MB 左右，而且没有特别大的质量损失，非常恐怖。

不是一句话做出来的

不过需要说明：那个射击游戏是一句话 one-shot 出来的，但它全靠代码；

像这种要接模型、贴图、配音的游戏，你不能指望一句话就做出来，现在肯定做不到。

我虽然只用了 6 个小时，但其实做了很多工作。

我总共试玩了 7 轮，每轮给它列 5 到 10 个我觉得有问题的地方。

我不太懂做游戏，很多问题只能说得很模糊，比如「感觉动作很僵硬」「打击感非常差」「特效太拉胯」。

我不知道具体该怎么改参数，它会自己把我的话翻译成专业术语，去查这个领域的最佳实践，写成文档再去改。

中间我做了几件关键的事：

给它参考视频。

明确要求「先调研再动手」，让它先去找行业大牛是怎么做这些效果的。

抑制它自己造轮子的倾向。
它有非常强烈的倾向想脱离工具、自己搞基建，一说完就要上手硬写，但效果其实没那么好。
后来我给它接入了即梦和 Tripo，效果一下子上了一个大档次。

大概是怎么做出来的

这个游戏的制作流程大概是这样的：

第一步：调研与规划

它先读了我这几天收藏的大量做游戏的案例，参考了大家的思路，还有开头提到的那个单网页射击游戏的源码。

然后我让它写了调研文档和分阶段计划。

第二步：设定与资产生成

世界观和设定全是它自己写的，我没有干涉，比如剑宗封山、守山的将军、三百甲士和镇岳大阵。

一开始它直接用文字生成 3D 模型，质量很差。

后来我改成让它先用即梦画角色设定图，再用 Tripo 把图转成 3D 模型，质量明显好了很多。

第三步：动作计算

动作对动作游戏非常重要，大家老说的打击感就在这里。

Tripo 给的预设动作其实不多，它做了非常多改动，用程序算出每个动作里胳膊和脚应该怎么动。

第四步：调手感与特效

一开始手感巨差。

画面虽然漂亮，但一打起来就有点唐、有点抽象。

我就让它去查俯视角动作游戏是怎么做的，比如出招前的蓄力、打中怪物那一瞬间的顿帧、怪物轮流进攻而不是一拥而上、闪避能打断动作等等，让它把动作游戏的打击感到底从哪来查清楚。

第五步：声音与打包

配音用的是即梦的配音模型，是它自己在 CLI 里找到的，一共生成了 8 条台词。

我本来想用视频模型生成、只留下音频，但积分贵了 20 倍，它换了这个方案帮我搞定了。

配乐用的是 Suno，提示词是它写的，我拿去 Suno 生成，其实接一个 Suno MCP 它也能自己完成。

最后它把所有素材压缩进了一个 30MB 左右的网页文件里。

我把这套流程做成了一个 Skill

很多朋友看完都说：「我操，这个怎么学？」做完之后我也觉得这个流程挺有用的，就让它整理成了一个 Skill，叫歸藏 Game Skill（guizang-game-skill），这个游戏就是它的演示。

这个 Skill 能帮你做这几件事：

1

先问清楚参考、视角、氛围，以及你手头有哪些工具，然后去调用这些工具。它不会闷头给你写一个特别垃圾的方块模型，上来就把你给的工具接上。

2

自己推进画面、自己截图核对，不用你反复调试。

3

动作游戏的战斗手法，以及打击感是从哪来的，都写进去了。

4

一份 AI 做游戏时最容易出问题的清单。

5

打包方式：怎么把很大的模型和素材优化到很小的体积，让大家都能玩。

为什么需要这个 Skill？

你自己调也能调出来，但最重要的是它省 Token。

我很多 Token 都浪费在返工和试错上，用了这个 Skill，就能少走很多我走过的弯路，尤其是 Opus 5.5 和 Fable 5.2 这么贵。

直接把链接给你的 AI，用提示词让它安装就行。

网页游戏要回来了

说到这里，这次其实暴露出了一个非常牛的范式：网页游戏好像要回到我们的生活里来了。

为什么这么说？

网页是最方便的游戏分发方式，手机、电脑等各种设备都能打开。

而且它的优化非常厉害，能无痛把那么大的游戏缩小到三分之一。

前阵子居然有人把《GTA5》移植成了网页，资源压到约 700MB，打开浏览器就能玩。

虽然很快就因为版权投诉被拿下了，但传播极广、流量极大。

大家非常想要这种打开就能玩、不用注册账号的体验，对画质其实没那么苛刻。

我觉得我们需要一个以 HTML 网页为基础的游戏分发平台，就像当年的 4399。

很多人会说，门槛降低以后，开发者比玩家还多，玩游戏的人都不够用了。

但我觉得这是好事，跟短剧和网文是一个逻辑：门槛低了，大家卷起来，整体质量一定会上去，而且一定会冒出很多非常牛的新作品。

很多人会成为炮灰，但这不重要。

游戏和电影最终都会走向网文化。

就像我之前举过的例子：《玄鉴仙族》的作者季越人，半本书就成了白金作家，非常恐怖。

你很难想象那么厉害的书，是他用手机打字写出来的。

技术门槛降低之后，那些知道什么是好东西、脑子里有货的人，就能把它做出来。

好，这就是今天的内容。

如果你觉得有帮助，或者你也想做个游戏，欢迎试试我的 Skill，也欢迎来玩我的游戏。

试玩：https://op7418.github.io/guizang-game-skill/

Skill：https://github.com/op7418/guizang-game-skill