不寫一行代碼，他用GPT-4、DALL·E 3等手搓了《憤怒的南瓜》！_風聞

金磊 發自 凹非寺

量子位 | 公眾號 QbitAI

好傢伙，現在雙手不沾一行代碼、不畫一張圖，竟能開發出類似《憤怒的小鳥》遊戲了？

毫不誇張，國外一個小哥就真真兒的做到了，請看VCR~

雖然這款遊戲叫做**《憤怒的南瓜》**，但這畫質、這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