两个小时,AI 把我 2018 年那个 Unity 版保卫萝卜搬进了浏览器

约10分钟阅读 AI
AI

最近这几篇文章一直在讲 vibe coding,但一直没有一个实际的演示,全是文字项目,难以服众。那么我突然想到,做游戏!这是 vibe coding 最擅长的,而且游戏最关键的一点是可以纯单机,不需要服务器,这就不会有我之前文章里提到的、因为服务器成本导致的尴尬事件。

先把成品放在这里:这个项目我部署在服务器上面了,可以直接点击体验,代码也一并开源了,仓库在 dawncoolm/td-radish

这个老游戏,和 Unity 的那笔旧账

那么我就得翻出我 2018 年跟着 Siki 学院的视频做的那个保卫萝卜,当时用的是 Unity 2018。

Unity 这个引擎后来引发了一次又一次的信任风波,其中闹得最大的一次是 2023 年 9 月 12 日:Unity 突然宣布要收 Runtime Fee,也就是按游戏被安装的次数向开发者收钱,每次 0.001 到 0.20 美元不等,并且要对所有用 Unity 做的游戏生效,包括那些早就用旧版本做完上线的。这跟 Unity 自己在 2019 年公开承诺过的「只按席位收固定费用,不对收入抽成」正好相反,社区当场就炸了。十天后 Unity 发了道歉信并大幅修改口径,Unity Personal 不再适用这笔费用、收入门槛提高到 20 万美元,Pro 和 Enterprise 则改成按 2.5% 收入分成与按安装量计费两者取低。真正的结局要等到整整一年之后:2024 年 9 月 12 日,新任 CEO Matt Bromberg 发文宣布对所有游戏客户彻底取消 Runtime Fee,退回按席位订阅的老模式,代价是 Unity Pro 每席位每年涨价 8% 到 2200 美元、Enterprise 涨价 25%,2025 年 1 月 1 日生效。

费用是取消了,但经过这么一轮,现在很多国内的游戏开发者都放弃了这个引擎,转而走向其它的游戏引擎。

用 AI 翻新几乎不困难,基本就是几段提示词,然后等待 AI 自行翻新即可。

这次重构是怎么做的

重构的过程其实不算顺利,最大的原因就是我之前那个 Unity 项目做得很劣质。虽然当时我做了接近一个月,最开始只有 Siki 学院上面的那些内容,但我发现这不就完全是照着做嘛,到时候展示的时候被拆穿就很尴尬,所以我额外加了一个地图编辑器功能,能够自建关卡。

重构本身也很快。我先让 AI 生成了一个重构计划,因为这次我想让它跑在浏览器上面,就让 AI 自行调研然后做技术选型,它选择了 Phaser。Phaser 是一个开源的 HTML5 游戏框架,用 JavaScript 或 TypeScript 编写,同时支持 WebGL 和 Canvas 两种渲染方式,桌面和移动端浏览器都能跑,采用 MIT 协议,目前在 GitHub 上有四万多颗星,做 2D 游戏用得比较多。整个重构大概花了接近 2 个小时,功能就可以用了。

跑起来大概是这个样子:五个普通关卡加一个无尽的 Boss 关,怪沿着固定路线从出怪点走向萝卜,玩家在路边的空塔位上造塔拦截,萝卜被吃满 10 次就输。

保卫萝卜 Web 版的主菜单

第一关的战斗画面

但我体验后发现,AI 并没有按照以前的样子做 1:1 还原,它修改了一些布局,还原创了一些内容。比如编辑器页面,它创建了一个极为复杂的编辑器,比我当时设计的那个复杂多了。然后又有图片错位、音效缺失、字体模糊等问题。总之就是,虽然功能实现得极快,但不够精致。

AI 自己原创出来的关卡编辑器

我就让它改了几个版本,让它在整个功能页面上对齐保卫萝卜,加上了血条、计数等功能。

重构里真正难处理的几个问题

素材没法无中生有

我发现了一个极其难处理的问题:AI 并没有读取项目中已有的素材,而是自己原创了一些方块,而这些方块和其它素材非常不搭。最开始我想的是通过 ChatGPT 生成类似的素材直接使用,但可能是因为我的 GPT 没有付费,导致生成的素材和原有的素材差别很大,看起来非常不协调。这个时候 Claude 没有生图模型的劣势就出现了,没有办法直接用生图模型生成类似的图,只能通过其它模型来实现。

审美没法靠一句提示词解决

审美能力是一个非常主观的东西。如果只是在提示词上面让 AI 把界面做得好看一些,比如编辑器页面,我想让 AI 做得好看一点,但做了很久发现还是那样。这一点跟生成前端网页一样,需要大量的实操,然后积累方法,才能做出好看的界面。

再一个就是,我 18 年做的那个完全根据视频做出来的流程简直是一塌糊涂,基本是一个不能玩的状态,所以我用 AI 又重构了关卡页面,用上了资源里的怪物和塔,重新做了关卡的流程。

最磨人的还是等待时间

vibe coding 最令人失望的就是等待时间,一个小型的任务往往要 20 分钟,而一个大型的任务,比如我第一次重构就要接近 2 个小时,实在是太慢了!由于当天是周六,中途我甚至还抽空逛了一个商场,下午出去喝了一个下午茶,打了一局台球。好在现在 Claude 的每个任务都可以直接用手机进行远程操作,这样在外面就可以对在做的任务做一些决策。

但远程的时候我发现了另一个问题:在手机上面接不到权限确认的提示,导致无法直接确认权限。比如 computer use 这个功能,如果要使用是需要确认权限的,但手机上不能直接确认,这就导致流程会直接卡在确认这里直到超时。所以我推荐的做法是,如果要出门,那么提前新开一个会话,把需要用到的权限一次性接受完毕后再出门。

不过也有让人省心的地方。由于这是 Web 应用,测试流程是很全面的,现在 AI 写了代码后不会出现代码报错、根本启动不起来的情况,可以放心地修改。

AI 重构代码的一个通病

同时我发现了 AI 重构代码的一个缺陷,我在上一次尝试用 AI 重构公司项目的时候也发现了这个缺陷:AI 在重构的时候并不是去读取原来的代码、一行一行地转译成新代码,而是直接拉取原有代码的大概逻辑,再根据这个逻辑重新生成新代码。这就会直接导致重构后的代码虽然大体上和原有代码很像,但很多细节上却不同。

由于这个项目原有的代码我当时写得就不好,基本都是照着视频抄了一些,所以这种大规模重构效果还不错。但这一旦要放在商业项目中,却是致命的。

这一点 Anthropic 其实专门讲过。Bun 的联合创始人 Jarred Sumner 现在是 Anthropic 的技术员工,他用 Claude Code 把 Bun 从 Zig 迁移到了 Rust,不到两周产出了一百万行代码,合并前 Bun 现有的测试套件在 CI 上 100% 通过,合并之后浮现的 19 个回归也都已经修掉了。顺带一提,这次迁移烧掉了 59 亿个未缓存的输入 token 和 6.9 亿个输出 token,按 API 定价折算大约 16.5 万美元,本系列第一篇说 token 不便宜,这就是一个具体的量级。

Anthropic 把这次迁移和内部一个 Python 转 TypeScript 项目的经验总结成了一套六个阶段的流程:先写规则手册、依赖图和差异清单,再压力测试这套规则,然后才是全量翻译、编译、运行、对齐行为。规则手册排在第一位不是随便排的,因为差异清单本身就是由「规则手册的默认规则覆盖不到什么」定义出来的;而且有了它,后面发现问题时的修法是往规则手册里加一句话、然后重新生成受影响的那一批,而不是一处一处手工去补。

现在想来就是因为这个原因,才不能在没有任何约束文件的情况下,直接把仓库扔给 AI,让它换一种语言实现出来。

说起来,我最早学的不是前端

重构的事说完了,这里再回过头说说,我当时在做前端之前,其实学的是用 Unity3D 做游戏,以及为什么后面放弃了做游戏的过程,可能之前的文章也提到过。

之所以学做游戏,最关键的点就是当时我十分喜欢玩游戏,所以就去培训学习做游戏,培训了 4 个月。第一个月是讲基础,中间 2 个月是上午老师授课、下午自行操作,最后一个月完全由自己做一个能独立运行的游戏,就是我当时做的保卫萝卜,按照 Siki 学院的视频一步一步做的。

由于是 Unity3D,所以当时学的语言是 C#。但我零基础得有点过分了,几乎是完全不懂的状态,我甚至都不知道代码应该在哪儿写。在培训之前我就去找了一些视频来看,当时用的是 Visual Studio,宇宙第一 IDE。

正式培训的时候不是上来就接触 Unity3D,首先是从 C# 开始学的。早上授课的时间也很短,几乎就是 2 个小时左右,其实对于我这种零基础的人来说非常不友好,因为什么都不懂,讲课也是跳跃式讲的。第一个月结束的时候,作业是用 C# 做一个小的控制台游戏,大概就是贪吃蛇、2048 这一类。俄罗斯方块在手搓上面算是非常难的游戏,因为涉及了一些算法,由于时间短,几乎没人做这个。

这里就不得不提一下,后面我自学前端,找了很多视频,每个视频篇幅都非常长,基本就是事无巨细地从早讲到晚那种。也就是说,这次培训经历在后来对我来说是没用的,我后面还是从 0 学了一遍。

第二个月开始就是正式培训 Unity3D 了。好家伙,当时同一个培训班的同学很多都不是零基础,很多都是科班毕业然后来这里学习的,所以大家学起来就嘎嘎快。后面有一次期中测试,需要大家自行做个游戏然后演示,分成 2 人一组,有一组直接做了一个类似于泡泡堂这种双人联机的游戏!

当时甚至震惊了老师,因为联机是一个超难的事情。而我们那一组做的就是导入了一点素材,在一个地图里,一个怪物一样的角色不停地跑,就是一个空场景,然后加一个玩家操控的角色,就没有其它的交互了,惨不忍睹。

到了期末的那一个月,大家都在做自己的游戏,我就按照视频依葫芦画瓢做了一个保卫萝卜。而同班同学做出来的东西都非常精美,我印象最深的是有人做了类似杀戮尖塔那种打牌爬塔的游戏,有人做了类似鳄鱼小顽皮爱洗澡那样的小游戏,还有人做了类似极品飞车的。我再看看自己做的这个破保卫萝卜,陷入了沉思,当时我还在想难道他们是天才?

最后演示的时候是邀请了几个游戏公司的技术来观看的,这次演示不仅是演示学习成果,还是一场面试,你做的游戏好,是有直接进公司的机会的。后面让我大跌眼镜的是,当时最惊艳的那个爬塔游戏的同学没有被选中,反而是做小游戏的那位被选中了,当时应该有 20 人左右,就他一人在那次面试中脱颖而出。

从培训班出来,才知道岗位有多少

故事讲到这里其实才开始。从培训班毕业后就开始漫长的找工作,这个时候我才开始后悔学习做游戏,因为做一款游戏的投入成本其实是非常大的:美术资源需要专门的美术出,还有游戏策划、研发人员,普通的公司其实根本承担不住这么大的人力成本,动辄就是几十万上百万,所以成都的 Unity3D 岗位非常少,当时我几乎把能投的都投了个遍,也就混到了几个面试机会。

其中有一个公司挺大的,是招实习生,我就去面了。当时给的月薪是 2000,然后会给一周的时间,一周后有一次测试,通过了测试才算正式进入实习期,通不过那就拜拜。

我在那里呆了 4 天。入公司的那天,貌似是我要进的那个组的组长给我发了考试资料,说是资料,其实就是什么 C# 入门之类的。在培训之前我本来就没有什么基础,培训了 4 个月其实也没有什么好转,大概就是知道了在哪儿写代码、代码怎么开始运行,其它的还是懵懵懂懂的状态。

第 5 天组长发来了测试题。那个时候不像现在这样有 AI 辅助,测试题就真的是要手敲。题目是什么我忘记了,反正我就记得看到题目一道题都做不出来,于是我中途跑路了,给他们留了个言就没有再回公司。

后面就是漫长的找工作,一直找不到,我就认为自己不适合,于是开始找其它工作。最后是亲戚推荐了一份工作,做了几个月,我觉得我不能再那么下去了,于是准备重新学程序,什么需求量大就学什么。当时需求量最大的就是前端和后端,我觉得做后端 Java 虽然需求量大,但学的人更多,自学出来依然不好找工作。

于是我当时选了前端,这一学大概学了半年,然后我又去面试,后面运气好面上了就入职了一家公司。虽然自学的时候跟公司研发还是有区别,进去的时候接口都不知道怎么对接,但后面持续学习,慢慢地积累了些经验,这个博客也是那个时候开始写的。

然后到近几年,由于前端开发者迅速增多,并且 AI 的出现极大地冲击了整个行业,还包括经济下行带来的巨量裁员,导致今年找工作的人员暴增。我之前完全没有想到现在工作居然这么难找。

这次翻新之后,我想明白了两件事

经过这次重构,我觉得现在 AI 的工程化能力已经非常强了,但它的前端页面审美能力还是无法用简单的提示词就达到专业设计师的水平。后续如何使用 AI 做出更加精美的页面、界面,是我首先需要去探索的,因为页面是脸面。

另一件事是,现在做游戏最缺的是点子和素材,代码实现已经可以完全交给 AI 了。但素材不能无中生有,要不然就让 AI 生成,要不然就去找网上已有的免费或付费素材。

转载协议

本文采用 CC BY-NC-SA 4.0 协议进行许可,转载请注明出处。 CC BY-NC-SA 4.0

允许转载、修改和分享,但必须注明作者和出处,且不得用于商业用途,衍生作品需采用相同协议。

☕ 请我喝杯咖啡

如果这篇文章对你有帮助,欢迎打赏支持!

打赏二维码