作者： 浮之静 来源： 浮之静

当我们谈论游戏开发时，GPT-4 可能并不是最先浮现在脑海中的工具。但随着技术的发展，与 AI 合作已经成为一种新趋势。在这篇文章中，作者 @javilopen[1] 将教我们如何与 GPT-4 合作，从零开始编写一个类似于“愤怒的小鸟”的游戏。这个游戏名为“🎃 Angry Pumpkins ”（愤怒的南瓜）。

准备工作

需要 ChatGPT Plus 账号，来使用 GPT-4 和 DALL-E 3 功能。GPT-4 负责游戏逻辑生成，DALL-E 3 负责游戏素材生成，在这里作者还同时使用到了 Midjourney 来生成游戏素材，以及 Midjourney 的局部重绘功能（Inpainting，DALL-E 3 对于图片元素的控制度不如 MJ）。最后使用 Photoshop 之类的编辑工具对素材进行裁剪，去除背景等操作。

游戏素材

注意：这里的步骤及提示词并非完整 Prompt，仅作为参考。

开始游戏背景

使用 DALL·E 3 生成游戏开始背景图。

📌 Prompt (DALL·E 3 from GPT-4)

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.

游戏中背景

作者在生成游戏背景时，多次用到 MJ 的局部重绘功能来修复一些细节。

📌 Prompt (Midjourney)

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

还有另外一张，裁剪下半部分用于地面显示。

📌 Prompt (Midjourney)

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

最后将两张图进行裁剪，拼接，以达到最佳效果。

游戏角色

这里生成的角色需要进行裁剪，去除背景色等操作。

生成需要发射的南瓜（万圣节南瓜，游戏中的精灵）。

📌 Prompt (Midjourney)

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

生成需要打击的目标（绿色的万圣节怪物，滑稽，有趣，游戏中的精灵）。

📌 Prompt (Midjourney)

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

游戏资产

这部分主要进行游戏资产创作，有木箱、木板、骨头、骷髅、矩形石块等。

📌 Prompt (Midjourney)

• Wooden box. Item assets sprites. White background. In-game sprites

• Skeleton bone. Large skeleton bone. Item assets sprites. White background. In-game sprites

• Rectangular stone. Item assets sprites. White background. In-game sprites

• Wooden box. Large skeleton bone. Item assets sprites. White background. In-game sprites

• Item assets sprites. Wooden planks. White background. In-game sprites. Similar to Angry Birds style

游戏逻辑

尽管 GPT-4 极为强大，但目前为止，它还不能仅凭一个提示就生成整个游戏。因此，与 GPT-4 的合作方法非常类似于传统的编程方式：从一个简单的功能基础开始，然后迭代、扩展和改进代码。例如，我们可以从先从一个简单的请求开始。

Step 1

matter.js[2] 和 p5.js[3] 是两个流行的 JavaScript 库，分别用于物理模拟和 2D 绘图。

提示 ChatGPT 使用 matter.js 和 p5.js 创建一个类似于“愤怒的小鸟”风格的简单游戏，只需使用鼠标发射一个带有角度和力量的球，然后用 2D 物理学击中一些堆叠的盒子。

📌 Prompt (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.

Step 2

持续循环迭代，需要耐心！

从 Step 1 开始后，就不断要求更多的东西。每次出错，清晰地解释错误并让 GPT-4 进行修复，一定要有耐心！示例：

• 现在，我要问你：你知道在 Angry Birds 中怎么发射鸟吗？手指在屏幕上做什么？是的。把这个加到游戏里，用鼠标。

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

• 我想用 p5.js 制作一个带有粒子效果的火炬。可以做吗？请做一个。

• 现在，让怪物成为圆形，要非常小心：应用已经存在的矩形缩放和碰撞区域的相同技术，不要像以前那样弄错了。

📌 Prompt (GPT-4)

• Now, I ask you: do you know how the birds are launched in Angry Birds? What the finger does on the screen? Exactly. Add this to the game, using the mouse.

• I have this error, please, fix it: Uncaught ReferenceError: Constraint is not defined

• I would like to make a torch with particle effects. Can it be done with p5.js? Make one, please.

• Now, make the monsters circular, and be very careful: apply the same technique that already exists for the rectangular ones regarding scaling and collision area, and don’t mess it up like before.

注意：这里并没有什么标准答案，只需要按照自己的想法进行描述让 GPT-4 进行代码生成即可。你唯一需要做的就是对生成后的代码不断进行验证，如果遇到执行错误，则需要将错误准确的表述给 GPT-4，让其修复（可参考：Prompts：ChatGPT 提示指南，ChatGPT 会是下一代打工人吗？）。一直循环这个步骤，直到代码可以完全运行为止，一定要有耐心！再比如描述了一个复杂的物理模拟问题，其直接和间接的冲击可能会有不同的效果：

• 计算何时对虫子产生强烈冲击的逻辑有些问题。如果冲击是直接的，它工作得很好，但如果是间接的就不行。例如，如果我在两只虫子上放一个矩形，然后在矩形上放一个盒子，即使虫子应该受到冲击的影响，它们也不会注意到。我们能做些什么来确保它们也受到影响，当物体掉在它们所在的身体上方时？

📌 Prompt (GPT-4)

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 合作开发游戏是一个不断迭代、合作的过程，需要足够的耐心。通过明确的沟通、持续的反馈和细致的解释，我们就可以利用 GPT-4 的能力，创造出引人入胜的游戏体验。

最后我对此游戏进行了部署和验证，如果有朋友对文章中的源码或游戏资产感兴趣，可以从这里进行游戏体验或源码下载（点击文末「阅读原文」可直接跳转至源码 ）：

• 体验地址：https://lencx.github.io/fe-tips/game/angry-pumpkins

• 代码仓库：https://github.com/lencx/fe-tips/tree/main/game/angry-pumpkins

游戏规则

👉 按 空格键 重置南瓜。
👉 按 Enter 清空世界。
👉 编辑模式：长按 Q （箱子）、W （矩形石块）、E （长骨头）、R （长木板）、T (骷髅) 或 M (打击的目标，绿色的万圣节怪物)，并点击以向世界添加物体并创建你自己的结构。

References

[1] @javilopen: https://twitter.com/javilopen

[2] matter.js: https://github.com/liabru/matter-js

[3] p5.js: https://github.com/processing/p5.js

更多AI工具，参考Github-AiBard123，国内AiBard123