通過市面上的AI工具，不需要自己親自寫一行代碼，就能做出一個(gè)完整的「憤怒的小鳥」？！

最近，外國網(wǎng)友分享了自己花了10個(gè)小時(shí)，通過GPT-4和DALL-E 3/Midjourney做了個(gè)憤怒的小鳥的教程，3天之內(nèi)已經(jīng)超過了270萬的瀏覽。

圖片

還曾登頂Hacker News！

圖片

按照他說的方法，從游戲素材生成，到游戲核心代碼的編寫，都使用AI工具完成。

圖片

雖然只有一關(guān)，但是從效果來看已經(jīng)完全可以流暢游玩，而且美術(shù)風(fēng)格非常成熟，完全get到了《憤怒的小鳥》的玩法和爽點(diǎn)。

教程作者在跑完整個(gè)過程后感嘆到：

我真的被震撼到了。老實(shí)說，我從來沒想過這一切真的就這么發(fā)生了。我堅(jiān)信我們正生活在一個(gè)迄今為止只在科幻電影中看到的歷史時(shí)刻中。 

這個(gè)全新的工作流程，讓我們可以僅使用自然語言就能創(chuàng)建任何東西，將改變我們所知道的世界。 

這是一場如此巨大的浪潮，那些沒有預(yù)見到它到來的人將受到沉重打擊。

網(wǎng)友紛紛感嘆，離了大譜！這是我見過最酷炫的ChatGPT用例。

圖片

也許我們離這樣的場景已經(jīng)不遠(yuǎn)了：

只要想想一個(gè)游戲的玩法，直接和AI智能體溝通，然后它就能給你做出來。這個(gè)應(yīng)用實(shí)在是太瘋狂了。

圖片

作者最后補(bǔ)充到，他前后制作這個(gè)小游戲大概花了10個(gè)小時(shí)的時(shí)間。核心框架花了兩個(gè)小時(shí)就弄出來了。

后邊的時(shí)間主要是調(diào)整各種細(xì)節(jié)和處理小問題。

然而我們自己上手試了一下之后，發(fā)現(xiàn)，好像還真不是那么回事。

用AI幾句話就能做游戲？遠(yuǎn)沒有想象的那么簡單

教程作者寫的不復(fù)雜，整個(gè)過程就兩個(gè)部分。

圖像素材

這部分是最簡單的，畢竟文生圖工具已經(jīng)面世一年多了，大家應(yīng)該早就熟練掌握了用AI生圖的技術(shù)要領(lǐng)了（抄提示詞）。

首先是用提示詞制作一張背景圖，作者用DALL·E 3制作的這張開始界面圖。

圖片

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.

提示詞翻譯過來之后，就是一段對于圖片內(nèi)容的詳細(xì)描述。

一張名為「憤怒的南瓜」的視頻游戲的橫向充滿活力的主屏幕的照片。該設(shè)計(jì)的靈感來自于「憤怒的小鳥」游戲的美學(xué)，但有所不同。鬼屋、墓碑和蝙蝠等萬圣節(jié)元素占據(jù)了背景。游戲徽標(biāo)醒目地顯示在頂部中心，風(fēng)格化的南瓜角色看起來很憤怒，并準(zhǔn)備在兩側(cè)采取行動(dòng)?！窹LAY」按鈕位于底部中心，周圍環(huán)繞著怪異的薄霧。

但是注意，必須要用英文的提示詞，中文只能幫助大家理解。

然后用Midjourney制作了兩張游戲背景圖。

除了提示詞之外，還使用了「外畫（outpainting）」按鈕。

圖片

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)寶石和橙色風(fēng)格，新傳統(tǒng)主義，kerem beyit，土方工程，木材，Xbox 360 圖形，淺粉色和海軍藍(lán) --ar 8:5」

圖片

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 平臺(tái)、石磚、萬圣節(jié)、2d 視頻游戲地形、2d 平臺(tái)游戲、萬圣節(jié)場景、類似于憤怒的小鳥、合金彈頭萬圣節(jié)、屏幕截圖、游戲內(nèi)資產(chǎn) --ar 8:5」

圖片

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

「萬圣節(jié)南瓜，游戲中的精靈，但萬圣節(jié)版，簡單的精靈，2d，白色背景」

「綠色萬圣節(jié)怪物，愚蠢，有趣，游戲中的精靈，但萬圣節(jié)版，簡單的精靈，2d，白色背景」

圖片

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

除此之外，對于木箱，骨頭等游戲素材，也就直接從Midjourney中生成。

代碼部分

游戲的核心部分是600行的代碼。

作者完全沒有動(dòng)手寫任何一行代碼，但是想要用GPT-4生成代碼也是非常有挑戰(zhàn)的任務(wù)，作者大部分的精力也是花在了這里。

作者添加了許多細(xì)節(jié)，例如不同的粒子效果、不同類型的對象等。

作者生成600行代碼，幾乎還是像開發(fā)者一樣，從最基本的邏輯做起，一步一步提出更細(xì)節(jié)的要求。

作者也分享了他的初始的prompt：

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.

「我們現(xiàn)在可以使用 Matter.js 和 p5.js 以《憤怒的小鳥》的風(fēng)格創(chuàng)建一個(gè)簡單的游戲嗎？只需使用鼠標(biāo)以角度和力量發(fā)射一個(gè)球，然后用 2D 物理擊中一些堆疊的盒子即可?！?/span>

當(dāng)代碼出現(xiàn)問題時(shí)，用這個(gè)提示詞向GPT-4提問：

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

我有這個(gè)錯(cuò)誤，請修復(fù)它：Uncaught ReferenceError: Constraint is not defined

教程上手實(shí)測

老實(shí)說，對于這件事情，小編一開始是有些懷疑的。GPT-4V在發(fā)布之初，就向大眾展示了自己做網(wǎng)頁的能力。

用餐巾紙畫草圖喂給模型，直接生成出像模像樣的網(wǎng)頁——吃進(jìn)去的是草，擠出來的是奶。

但是說到具體的游戲，就需要把靜態(tài)的頁面和動(dòng)態(tài)的邏輯結(jié)合起來，GPT-4到底能否較好的完成憤怒的小鳥所需要的功能呢？

本著實(shí)事求是的原則，小編嘗試為大家復(fù)現(xiàn)這個(gè)過程。

首先根據(jù)作者給出的提示范例，我們來考一考GPT-4，它竟然第一次就真的生成出了像模像樣的代碼：

圖片

GPT-4同時(shí)給出了html和js的代碼，出人意料。

圖片

由于js的代碼比較長，所以這里只截取展示一小部分，感興趣的讀者可在文章的最后找到GPT-4首次生成的程序。

圖片

此外，GPT-4還非常耐心地向用戶解釋了程序的流程，它溫我哭。

有了GPT-4生成的html和js兩個(gè)文件之后，我們就可以測試一下是否真的可用。

這里可能需要一點(diǎn)點(diǎn)相關(guān)的知識(shí)或者稍微變通一下。在本地建立文件夾放入剛剛生成的兩個(gè)文件，直接打開果然瀏覽器報(bào)錯(cuò)。

我們把報(bào)錯(cuò)：「GET https://cdnjs.cloudflare.com/ajax/libs/p5/1.4.0/p5.js net::ERR_ABORTED 404 (Not Found)」丟給GPT-4，它給出了如下解決方案：

圖片

我們承認(rèn)它分析得確實(shí)有幾分道理，但是對于當(dāng)前問題來說并不起作用。這里人工介入跟正確的html文件比對一下，將報(bào)錯(cuò)文件的名字修改正確。

再次執(zhí)行，這次的報(bào)錯(cuò)來自js文件：「Uncaught SyntaxError: Identifier 'options' has already been declared」，同樣我們還是先考一考GPT：

圖片

我們虛心接受GPT的建議，再次修改之后，程序居然可以運(yùn)行了。

圖片

有點(diǎn)意思。。。但不多？

最后，我們用GPT-4給我們生成的代碼和教程作者分享的代碼進(jìn)行了一下對比，確實(shí)區(qū)別還很大。

我們的代碼只有90行左右，而教程中的成品有600行。

而如果真的要通過Prompt做出教程中那個(gè)樣子的游戲，需要針對做出來的效果進(jìn)一步和GPT-4溝通，完全沒有代碼能力幾乎是不可能的。

雖然作者說自己沒有寫一行代碼，但是依然花了10個(gè)小時(shí)才最終完成。

可以想象背后一定還是花了很多的心思和GPT-4溝通，一定也需要作者有一定的代碼基礎(chǔ)，對游戲制作流程有基本的了解。

所以，作者也沒有辦法在教程詳細(xì)說明游戲生成的具體步驟，只能將大概的思路和大家分享一下。

不過，作者的分享至少證明了，對于有代碼能力，又有工程經(jīng)驗(yàn)的人，GPT-4真的能夠無中生有，10小時(shí)出成品，大大降低開發(fā)時(shí)間和門檻。

但是沒有代碼能力，沒有游戲制作經(jīng)驗(yàn)的人，這條路暫時(shí)還走不通。

參考資料：

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