不到 600 行代码实现了《愤怒的小鸟》翻版，GPT-4+DALL·E 3+Midjourney 撼动游戏圈！

2023-11-08 00:11

把草图变网站，用几秒复现一款经典小游戏...随着 GPT-4 与 Midjourney、DALL•E 3 等 AIGC 工具的强强联合，其带给游戏行业的震撼不是一星半点。

昨日，正值万圣节之际，一位名为 Javi Lepez 的外国小哥使用 Midjourney、DALL•E 3 和 GPT-4 打开了一个无限可能的世界，重新演绎了无数 80、90 后青春回忆中的经典游戏“愤怒的小鸟”，推出了其翻版——“愤怒的南瓜”（Angry Pumpkins）。

对于想要尝鲜的小伙伴，也可以通过以下链接试玩：

https://bestaiprompts.art/angry-pumpkins/index.html，它目前还不支持移动设备。

整个过程使用到了不足 600 行的代码，Javi Lepez 坦言，「没有一行是自己写的，但这却是最具挑战性的部分」。那么，他到底是怎么做的？

游戏开发的第一步：学会 Prompt，生成图像、物品

首先，值得一提的是，学好 Prompt，会让你在 AI 时代事半功倍。借助 AIGC 工具，只需要用简单的自然语言，在表述清楚需求的基础上，即可所求即所得。

和很多 AIGC 工具使用者一样，Javi Lepez 也是在近两年之内才频繁地使用 AI 生成式工具的，但是他在 Prompt 方面积攒了不少经验，这使得他在准备《愤怒的南瓜》这款游戏所需的素材时更为轻松。

在 X 平台上，他也分享了一些基于 DALL·E 3、Midjourney 的 Prompt 示例，如：想要一张这款游戏的主界面，Javi Lepez 是这样问 DALL·E 3 的：

一款名为《愤怒的南瓜》的视频游戏的横向、充满活力的主屏幕的照片。该设计灵感来源于《愤怒的小鸟》游戏美学，但也有所不同。背景以鬼屋、墓碑和蝙蝠等万圣节元素为主导。游戏徽标醒目地显示在屏幕中上方，风格化的南瓜角色看起来很愤怒，并准备在两侧采取行动。 “开始”（Play）按钮位于屏幕中下方，周围弥漫着神秘的雾气。

最终得到了效果不错的图片：

进而，Javi Lepez 选取了一张背景图，使用了 Midjourney 对它进行了修改，Prompt 为：

iPhone 屏幕截图中《愤怒的小鸟》天际线，改为万圣节版本，（配上）墓地，以浅海蓝宝石和橙色为主题，新传统主义，kerem beyit，earthworks，木头，Xbox 360 图像，淡粉和海军蓝——比例为 8:5

得到的图像如下：

还有另一张，裁剪过的，用于地面设计，Prompt 为：

2D 平台，石砖，万圣节，2D 视频游戏地形，2D 平台游戏，万圣节情景，类似于愤怒的小鸟，合金弹头万圣节，截图，游戏内道具——比例为 8:5

得到的图像如下：

当大的背景准备就绪之后，Javi Lepez 开始让 Midjourney 生成一些角色、对象，譬如：

万圣节南瓜，游戏内角色但是是万圣节版本，简单的精灵，2D，白色背景；
绿色万圣节怪物，滑稽，有趣，游戏内精灵，万圣节版本，简单的精灵，2D，白色背景

很快，Midjourney 便提供了一些图片便于开发者自己选择：

与此同时，Javi Lepez 还提供了一些 Prompt 来生成具体的物体，然后使用 Photoshop/Photopea 裁剪和去除了背景，如：

木箱。物品资产精灵。白色背景。游戏内精灵
骨骼骨头。大型骨骼骨头。物品资产精灵。白色背景。游戏内精灵
长方形石头。物品资产精灵。白色背景。游戏内精灵
木箱。大型骨骨头。物品资产精灵。白色背景。游戏内精灵
物品资产精灵。木板。白色背景。游戏内精灵。类似于愤怒的小鸟风格

游戏开发的第二步：生成代码，优化与修改

完成第一步之后，Javi Lepez 开始借助 GPT-4 来生成所需的代码，游戏玩法类似于《愤怒的小鸟》，当点击鼠标向后拉动“南瓜”并松开时，“南瓜”会弹射出去撞击木箱、石块、骨头等物品，击打到“怪物精灵”，直至完全消除后进入下一关。

因此，Javi Lepez 给 GPT-4 的提示词也是循序渐进，从简单的提问开始：

我们现在能否使用 matter.js 和 p5.js 制作一个类似《愤怒的小鸟》风格的简单游戏？只需使用鼠标发射带有角度和力量的球，然后用 2D 物理碰撞来击中堆叠的方块。

在尝试过程中，Javi Lepez 也发现，「迄今为止，我们还没有达到 GPT-4 只需一个提示就能生成完整游戏的程度」。

这意味着 GPT-4 生成的代码并不能拿来即用，这对它的使用者的能力也提出了一定的要求，使用者需要明白每次出现问题时，都要清楚地解释错误并让 GPT-4 进一步去修复：

现在，我问你：你知道《愤怒的小鸟》中是如何发射小鸟的吗？屏幕上的手指是干什么的？完全正确。使用鼠标将这个功能添加到游戏中。
我遇到了这个错误，请修复它：Uncaught ReferenceError: Constraint is not defined
我想要制作一个具有粒子效果的火炬。可以用 p5.js 做吗？请制作一个。
现在，将怪物变成圆形，并要非常小心：应用与矩形怪物相同的技术，涉及缩放和碰撞区域，不要像之前那样搞砸。

Javi Lepez 表示，这部分花费了我们（我和 GPT-4）许多耐心以及多次迭代，最终得到了只有 600 行的代码。

完整源代码详见：

https://bestaiprompts.art/angry-pumpkins/sketch.js

玩法展示（玩家也可以自制关卡）：

期待一个提示就能生成完整游戏的那一天

毫无疑问，Javi Lepez 的尝试再一次证明了 GPT-4 以及 Midjourney、DALL-E 3 这些先进的工具蕴藏的潜力，虽然目前距离一键生成完整的网站、游戏还有一定的距离，但正如 Javi Lepez 所述——「老实说，我从未想过这可能会实现。我真诚地相信，我们正生活在一个历史性时刻，直到现在我们只在科幻电影中见过。这些全新的工作流程，只需自然语言就能创造任何东西，将改变我们所知道的世界。这是如此巨大的浪潮，那些没有预见到它的人将受到重创......也相信，在未来我们迟早有一天将能够仅凭“提示词”来创建 AAA 级的电子游戏。」

对于 AIGC 的未来，不少网友同样持以期待：

太酷了！这里最酷的不是游戏本身，而是人工智能被用于软件开发。实际上，ChatGPT 被用于更为严肃和实际的应用领域。但我也是从游戏开始的。玩得开心会让开始变得更容易。你可以把今天的人工智能看作是一个知识渊博但不太聪明的助手，复杂的项目需要大量的提示。人类的任务是把这一切组合起来，测试，请求新的部分和修正。而这只是一个开始…
这是令人兴奋的，就像我们即将进入独立应用和游戏的新黄金时代一样。

最后，你是否有使用过 AI 工具尝试一些新鲜事？欢迎大家分享 AI 工具的应用情况与体验心得！

来源：

https://twitter.com/javilopen/status/1719363669685916095

想要了解更多AI 行业资讯以及ChatGPT和AI绘画实战案例，欢迎加入我们的「互联网AI早读课」知识星球！

在这个星球，你可以更加系统的学习AIGC相关知识：

1. ChatGPT和AI绘画基础+进阶全攻略

2. ChatGPT和AI绘画最直接变现案例

3. 与200+行业先行者链接，积累你的专属人脉资源

4. 社群保姆级一站式服务，包教包会包讨论

现在加入，立享99元早鸟价优惠，星球用户每涨100人，价格上调100元，直到恢复499元原价！

这个风口抓不抓的住，就看你愿不愿意迈出第一步了！

越晚加入成本越贵！最后两个名额又要涨价了！