连《愤怒的小鸟》前PM都来围观了

金磊 发自 凹非寺

量子位 | 公众号 QbitAI

好家伙，现在双手不沾一行代码、不画一张图，竟能开发出类似《愤怒的小鸟》游戏了？

毫不夸张，国外一个小哥就真真儿的做到了，请看VCR~

完整视频可查看：https://mp.weixin.qq.com/s/d6kNHCNJTEess_UKUxWu1A

虽然这款游戏叫做《愤怒的南瓜》，但这画质、这feel，简直跟原版一毛一样有木有！

而正如我们刚才所说，这一切都是一位叫Javi Lopez的小哥，在一行代码都都没写的情况下搞出来的。

不过他所依靠的三大“法宝”，想必大家都已经非常熟悉了——

GPT-4、DALL·E 3，还有Midjourney。

小哥对它们的分工非常明确：

GPT-4，你去搞定代码。

DALL·E 3和Midjourney，你俩负责出图。

至于小哥本人，主打的就是统筹全局、指点江山（这很老板[看] ）。

不过有一说一，小哥原本的打算就是趁着万圣节图一乐，只是想尝试一下，没想到最后还真成功了。

视频一经发布，也是瞬间引来了一大波网友的高度关注。

更令人意想不到的是，就连《愤怒的小鸟》原产品经理（PM）都来围观了，并给予了小哥大大的肯定：

这个demo简直太棒了！（我们）最初做这款游戏的时候还用的是Box2D和LUA Scripting，当然还要制作关卡、敌人等等。

虽然没人指望你做出一个爆款游戏，但对于（开发游戏时的）快速构思、生成原型等，这绝对称得上是“改变了游戏规则”。

DALL·E 3、Midjourney充当美工

接下来，我们就来看下小哥是如何打造的《愤怒的南瓜》。

从整体流程上来看，可以大致分为两大步骤：绘制图形和生成代码。

我们首先聚焦绘制图形这项工作，毕竟用小哥的话来说，这个步骤是“最简单的部分”了。

因为在此之前，他已经有过一年半用AI生成图片的经验，所以这项任务对小哥而言就是一通“口遁输出”——自然语言的prompt。

例如在制作游戏主界面的时候，小哥给DALL·E 3“投喂”的prompt是这样的：

Photo of a horizontal vibrant home screen for a video game titled ‘Angry Pumpkins’. The design is inspired by the ‘Angry Birds’ game aesthetic but different. Halloween elements like haunted houses, gravestones, and bats dominate the background. The game logo is prominently displayed at the center-top, with stylized pumpkin characters looking angry and ready for action on either side. A ‘Play’ button is located at the bottom center, surrounded by eerie mist.

这是一款名为“愤怒的南瓜”的视频游戏的横屏。设计灵感来自“愤怒的小鸟”游戏的美学，但有所不同。鬼屋、墓碑和蝙蝠等万圣节元素主宰了背景。游戏标志突出地显示在中间顶部，风格的南瓜角色看起来很生气，随时准备在两边行动。一个“播放”按钮位于底部中心，被怪异的薄雾包围。

在制作游戏背景时，小哥用到的是Midjourney，并且又细分了2步，生成了两张图片。

第一张的promt是：

Angry birds skyline in iPhone screenshot, Halloween Edition, graveyard, in the style of light aquamarine and orange, neo-traditionalist, kerem beyit, earthworks, wood, Xbox 360 graphics, light pink and navy —ar 8:5.

iPhone截图中的《愤怒的小鸟》天际线、万圣节版、墓地（浅海蓝宝石和橙色）、新传统主义风格、kerem beyit、土方工程、木材、Xbox 360图像、浅粉色和海军蓝——比例为8:5。

另一段prompt是：

2d platform, stone bricks, Halloween, 2d video game terrain, 2d platformer, Halloween scenario, similar to angry birds, metal slug Halloween, screenshot, in-game asset —ar 8:5.

2d平台，石砖，万圣节，2d电子游戏地形，2d平台游戏，万圣节场景，类似于愤怒的小鸟，金属弹头万圣节，截图，游戏内资产——比例为8:5。

而后，小哥将这两张背景图做了“缝合”，最终形成了现在游戏中展现的背景。

在角色方面，他用到的也是Midjourney，主要生成的对象是“南瓜”和“怪物”。

“南瓜”的prompt是这样的：

Halloween pumpkin, in-game sprite but Halloween edition, simple sprite, 2d, white background.

万圣节南瓜，游戏精灵，万圣节版本，简单精灵，2d，白色背景。

“怪物”的prompt则是：

Green Halloween monster, silly, amusing, in-game sprite but Halloween edition, simple sprite, 2d, white background.

绿色的万圣节怪物，愚蠢，有趣，游戏内精灵，万圣节版本，简单的精灵，2d，白色背景。

除此之外，小哥还创建了各种“精灵样式表（sprite stylesheets）”，然后使用Photoshop、Photopea裁剪和删除背景。例如：

• 木箱。物品资产精灵。白色背景。游戏内精灵。
• 骷髅骨头。大骨架骨头。物品资产精灵。白色背景。游戏内精灵。
• 长方形的石头。物品资产精灵。白色背景。游戏内精灵。
• 木箱。大骨架骨头。物品资产精灵。白色背景。游戏内精灵。
• 物品资产精灵。木板。白色背景。游戏内精灵。与愤怒的小鸟风格相似。

对于小细节，他使用的是Midjourney中的Inpainting功能。

GPT-4生成600行代码

整个流程的第二步，也就是至关重要的代码生成了，用小哥的话来描述就是“最具挑战性的部分”。

小哥表示游戏的代码总共600行，但在这个不过程中，GPT-4并不是一次性生成的所有代码。其中的诀窍是——迭代地向GPT-4发出请求。

例如从最简单的功能开始：

“Can we now create a simple game using matter.js and p5.js in the style of “Angry Birds”? Just launch a ball with angle and force using the mouse and hit some stacked boxes with 2D physics.

“我们现在可以用matter.js和p5.js制作一款类似《愤怒的小鸟》的简单游戏吗？”只需使用鼠标发射具有角度和力量的球，并击中具有2D物理效果的堆叠盒子。

然后加大难度，继续向GPT-4提出更多要求。

小哥温馨提示说，每次提出问题的时候，要清楚地解释错误，并让它自己解决。

最关键的是：要有耐心！

以下是小哥与GPT-4对话的片段：

现在，我问你：你知道《愤怒的小鸟》中的小鸟是如何发射的吗？手指在屏幕上做什么？完全正确！用鼠标把这个添加到游戏中。

我有这个错误，请修复它：Uncaught ReferenceError: Constraint is not defined.

我想做一个有粒子效果的火炬。可以用p5.js完成吗？请做一个。

小哥还把他最耗精力的部分拿出来分享了一下，即编写“物体砸到怪物身上”的代码：

There’s something off with the logic that calculates when there’s a strong impact on a bug. If the impact is direct, it works well, but not if it’s indirect. For example, if I place a rectangle over two bugs and drop a box on the rectangle, even though the bugs should be affected by the impact, they don’t notice it. What can we do to ensure they also get affected when things fall on top of a body they are under?

计算何时对怪物产生强烈影响的逻辑出了问题。如果影响是直接的，效果很好，但如果影响是间接的，效果就不好了。例如，如果我在两个怪物上放置一个矩形，并在矩形上放置一个盒子，即使怪物应该受到影响，它们也不会注意到。我们能做些什么来确保当东西落在他们下面的身体上时，他们也会受到影响？

总而言之，小哥一再强调，对于让GPT-4写代码这事，主打的就是要有耐心。

最后，小哥已经将完整代码放了出来，可以在文末连接处自取哦~

网友：难以置信

看到小哥的这项“提示工程”，有网友觉得这简直难以置信：

才600行代码？这怎么可能，一个简单的iOS应用都要1000行。

不过大多数网友还是对小哥的工作表示肯定与支持。

更重要的一点是，这项工作让很多人看到了未来的一种可能性。正如一位网友所述：

写prompt可能比直接写代码更麻烦。但是（这是一个很大的“但是”）！这里的神奇之处在于要求它写关于你不知道的事情的代码，所以即使这个过程很费劲，但结果是可运行的！

总而言之，这项工作确实让我们看到“人机协作”的可行性。

在线试玩地址：
https://t.co/tynYmxhLzM

600行完整代码：
https://bestaiprompts.art/angry-pumpkins/sketch.js

参考链接：
[1]https://twitter.com/javilopen/status/1719363262179938401
[2]https://news.ycombinator.com/item?id=38089247