DC娱乐网

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

一个下午、6个小时、4.5亿Token,换回一个浏览器里打开就能玩的3D国风动作游戏:三段连招、弹反处决、Boss二阶段,还带配音。整个游戏只有30MB,模型、贴图、音效全塞进一个HTML文件。

Fable5.2发布后,大家都被它的能力震惊了,尤其是那个单网页的射击游戏。

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

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

于是我用了一下午,大概6个小时,耗了4.5亿Token(其中一部分是Opus5.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生成,其实接一个SunoMCP它也能自己完成。

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

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

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

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

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

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

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

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

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

为什么需要这个Skill?

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

我很多Token都浪费在返工和试错上,用了这个Skill,就能少走很多我走过的弯路,尤其是Opus5.5和Fable5.2这么贵。

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

网页游戏要回来了

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

为什么这么说?

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

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

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

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

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

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

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

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

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

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

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

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

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

好,这就是今天的内容。

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

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

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