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

十三 2023-11-02 12:26:26 來源：量子位

金磊 發(fā)自 凹非寺

量子位 | 公眾號 QbitAI

好家伙，現(xiàn)在雙手不沾一行代碼、不畫一張圖，竟能開發(fā)出類似《憤怒的小鳥》游戲了？

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

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

雖然這款游戲叫做《憤怒的南瓜》，但這畫質(zhì)、這feel，簡直跟原版一毛一樣有木有！

而正如我們剛才所說，這一切都是一位叫Javi Lopez的小哥，在一行代碼都都沒寫的情況下搞出來的。

不過他所依靠的三大“法寶”，想必大家都已經(jīng)非常熟悉了——

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

小哥對它們的分工非常明確：

GPT-4，你去搞定代碼。

DALL·E 3和Midjourney，你倆負(fù)責(zé)出圖。

至于小哥本人，主打的就是統(tǒng)籌全局、指點(diǎn)江山（這很老板[看]?）。

不過有一說一，小哥原本的打算就是趁著萬圣節(jié)圖一樂，只是想嘗試一下，沒想到最后還真成功了。

視頻一經(jīng)發(fā)布，也是瞬間引來了一大波網(wǎng)友的高度關(guān)注。

更令人意想不到的是，就連《憤怒的小鳥》原產(chǎn)品經(jīng)理（PM）都來圍觀了，并給予了小哥大大的肯定：

這個demo簡直太棒了?。ㄎ覀儯┳畛踝鲞@款游戲的時候還用的是Box2D和LUA Scripting，當(dāng)然還要制作關(guān)卡、敵人等等。

雖然沒人指望你做出一個爆款游戲，但對于（開發(fā)游戲時的）快速構(gòu)思、生成原型等，這絕對稱得上是“改變了游戲規(guī)則”。

DALL·E 3、Midjourney充當(dāng)美工

接下來，我們就來看下小哥是如何打造的《憤怒的南瓜》。

從整體流程上來看，可以大致分為兩大步驟：繪制圖形和生成代碼。

我們首先聚焦繪制圖形這項工作，畢竟用小哥的話來說，這個步驟是“最簡單的部分”了。

因為在此之前，他已經(jīng)有過一年半用AI生成圖片的經(jīng)驗，所以這項任務(wù)對小哥而言就是一通“口遁輸出”——自然語言的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.

這是一款名為“憤怒的南瓜”的視頻游戲的橫屏。設(shè)計靈感來自“憤怒的小鳥”游戲的美學(xué)，但有所不同。鬼屋、墓碑和蝙蝠等萬圣節(jié)元素主宰了背景。游戲標(biāo)志突出地顯示在中間頂部，風(fēng)格的南瓜角色看起來很生氣，隨時準(zhǔn)備在兩邊行動。一個“播放”按鈕位于底部中心，被怪異的薄霧包圍。

在制作游戲背景時，小哥用到的是Midjourney，并且又細(xì)分了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截圖中的《憤怒的小鳥》天際線、萬圣節(jié)版、墓地（淺海藍(lán)寶石和橙色）、新傳統(tǒng)主義風(fēng)格、kerem beyit、土方工程、木材、Xbox 360圖像、淺粉色和海軍藍(lán)——比例為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平臺，石磚，萬圣節(jié)，2d電子游戲地形，2d平臺游戲，萬圣節(jié)場景，類似于憤怒的小鳥，金屬彈頭萬圣節(jié)，截圖，游戲內(nèi)資產(chǎn)——比例為8:5。

而后，小哥將這兩張背景圖做了“縫合”，最終形成了現(xiàn)在游戲中展現(xiàn)的背景。

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

“南瓜”的prompt是這樣的：

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

萬圣節(jié)南瓜，游戲精靈，萬圣節(jié)版本，簡單精靈，2d，白色背景。

“怪物”的prompt則是：

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

綠色的萬圣節(jié)怪物，愚蠢，有趣，游戲內(nèi)精靈，萬圣節(jié)版本，簡單的精靈，2d，白色背景。

除此之外，小哥還創(chuàng)建了各種“精靈樣式表（sprite stylesheets）”，然后使用Photoshop、Photopea裁剪和刪除背景。例如：

• 木箱。物品資產(chǎn)精靈。白色背景。游戲內(nèi)精靈。
• 骷髏骨頭。大骨架骨頭。物品資產(chǎn)精靈。白色背景。游戲內(nèi)精靈。
• 長方形的石頭。物品資產(chǎn)精靈。白色背景。游戲內(nèi)精靈。
• 木箱。大骨架骨頭。物品資產(chǎn)精靈。白色背景。游戲內(nèi)精靈。
• 物品資產(chǎn)精靈。木板。白色背景。游戲內(nèi)精靈。與憤怒的小鳥風(fēng)格相似。

對于小細(xì)節(jié)，他使用的是Midjourney中的Inpainting功能。

GPT-4生成600行代碼

整個流程的第二步，也就是至關(guān)重要的代碼生成了，用小哥的話來描述就是“最具挑戰(zhàn)性的部分”。

小哥表示游戲的代碼總共600行，但在這個不過程中，GPT-4并不是一次性生成的所有代碼。其中的訣竅是——迭代地向GPT-4發(fā)出請求。

例如從最簡單的功能開始：

“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.

“我們現(xiàn)在可以用matter.js和p5.js制作一款類似《憤怒的小鳥》的簡單游戲嗎？”只需使用鼠標(biāo)發(fā)射具有角度和力量的球，并擊中具有2D物理效果的堆疊盒子。

然后加大難度，繼續(xù)向GPT-4提出更多要求。

小哥溫馨提示說，每次提出問題的時候，要清楚地解釋錯誤，并讓它自己解決。

最關(guān)鍵的是：要有耐心！

以下是小哥與GPT-4對話的片段：

現(xiàn)在，我問你：你知道《憤怒的小鳥》中的小鳥是如何發(fā)射的嗎？手指在屏幕上做什么？完全正確！用鼠標(biāo)把這個添加到游戲中。

我有這個錯誤，請修復(fù)它：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?

計算何時對怪物產(chǎn)生強(qiáng)烈影響的邏輯出了問題。如果影響是直接的，效果很好，但如果影響是間接的，效果就不好了。例如，如果我在兩個怪物上放置一個矩形，并在矩形上放置一個盒子，即使怪物應(yīng)該受到影響，它們也不會注意到。我們能做些什么來確保當(dāng)東西落在他們下面的身體上時，他們也會受到影響？

總而言之，小哥一再強(qiáng)調(diào)，對于讓GPT-4寫代碼這事，主打的就是要有耐心。

最后，小哥已經(jīng)將完整代碼放了出來，可以在文末連接處自取哦~

網(wǎng)友：難以置信

看到小哥的這項“提示工程”，有網(wǎng)友覺得這簡直難以置信：

才600行代碼？這怎么可能，一個簡單的iOS應(yīng)用都要1000行。

不過大多數(shù)網(wǎng)友還是對小哥的工作表示肯定與支持。

更重要的一點(diǎn)是，這項工作讓很多人看到了未來的一種可能性。正如一位網(wǎng)友所述：

寫prompt可能比直接寫代碼更麻煩。但是（這是一個很大的“但是”）！這里的神奇之處在于要求它寫關(guān)于你不知道的事情的代碼，所以即使這個過程很費(fèi)勁，但結(jié)果是可運(yùn)行的！

總而言之，這項工作確實讓我們看到“人機(jī)協(xié)作”的可行性。

在線試玩地址：
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