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

0 评论 469 浏览 0 收藏 13 分钟

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

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

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

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

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

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

跑上山门,接一套连招

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

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

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

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

为什么说它厉害

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

1. 3D 效果非常精细

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

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

覆水石台和跪着的 Boss

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

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

2. 画面非常好看

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

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

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

主角近景

3. 动作能力非常强

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

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

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

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

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

弹反之后接处决

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

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

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

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

单个 HTML,33MB

不是一句话做出来的

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

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

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

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

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

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

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

  1. 给它参考视频。
  2. 明确要求「先调研再动手」,让它先去找行业大牛是怎么做这些效果的。
  3. 抑制它自己造轮子的倾向。

它有非常强烈的倾向想脱离工具、自己搞基建,一说完就要上手硬写,但效果其实没那么好。

后来我给它接入了即梦和 Tripo,效果一下子上了一个大档次。

大概是怎么做出来的

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

第一步:调研与规划

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

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

调研文档

第二步:设定与资产生成

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

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

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

左:即梦四视图设定图;右:游戏里的 3D 模型

第三步:动作计算

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

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

第四步:调手感与特效

一开始手感巨差。

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

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

弹反和处决(慢放)

第五步:声音与打包

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

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

Boss 起身

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

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

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

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

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

  1. 先问清楚参考、视角、氛围,以及你手头有哪些工具,然后去调用这些工具。它不会闷头给你写一个特别垃圾的方块模型,上来就把你给的工具接上。
  2. 自己推进画面、自己截图核对,不用你反复调试。
  3. 动作游戏的战斗手法,以及打击感是从哪来的,都写进去了。
  4. 一份 AI 做游戏时最容易出问题的清单。
  5. 打包方式:怎么把很大的模型和素材优化到很小的体积,让大家都能玩。

guizang-game-skill 仓库

为什么需要这个 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

作者:歸藏的AI工具箱 公众号:歸藏的AI工具箱

本文由 @歸藏的AI工具箱 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!