GPT-4+Midjourney がコードなしで「Angry Pumpkin」を作成!実際の経験：閾値は低くなく、再現が難しい

市販の AI ツールを使えば、自分でコードを 1 行も書かずに完全な「Angry Birds」を作れるのでしょうか? ！

最近、ある海外のネットユーザーが、GPT-4とDALL-E 3/Midjourneyを使用して10時間をかけてAngry Birdsのチュートリアルを作成し、3日間で270万回以上視聴されたことをシェアしました。

写真

Hacker Newsでもトップになりました!

写真

彼の方法によれば、ゲーム素材の生成からコアゲームコードの作成まで、すべてが AI ツールを使用して行われます。

写真

レベルは 1 つしかありませんが、効果から判断すると完全にプレイ可能であり、アート スタイルは非常に成熟しており、「Angry Birds」のゲームプレイと興奮を完全に捉えています。

プロセス全体を実行した後、チュートリアルの作成者は次のように述べました。

本当にショックでした。正直に言うと、実際にこんなことが起こるとは思ってもいませんでした。私たちは、これまでSF映画でしか見たことのない歴史の瞬間を生きていると、私は固く信じています。

自然言語のみを使用してあらゆるものを作成できるこの新しいワークフローは、私たちが知っている世界を変えるでしょう。

これは非常に巨大な波なので、それを予期しない人は大きな打撃を受けるでしょう。

ネットユーザーたちは、それはまったくの見当違いだと嘆いた。これは私が今まで見た ChatGPT の最もクールな使用例です。

写真

おそらく、次のようなシナリオもそう遠くないだろう。

ゲームの遊び方を考え、AI エージェントと直接コミュニケーションするだけで、AI エージェントが自動的にゲームを作成します。このアプリはすごい。

写真

作者は最後に、このミニゲームの作成には約 10 時間かかったと付け加えました。コアフレームワークの作成には 2 時間かかりました。

その後の時間は主に、さまざまな詳細の調整と小さな問題への対処に費やされます。

しかし、実際に試してみると、そうではないことがわかりました。

AI の単語をいくつか使ってゲームを作ることはできますか?それはあなたが思っているほど簡単ではありません。

作者が書いたチュートリアルは複雑ではなく、全体のプロセスは 2 つの部分だけで構成されています。

画像素材

この部分は最も簡単です。結局のところ、画像生成ツールは 1 年以上前から市場に出回っており、AI を使用して画像を生成するための技術的な基礎は誰もがすでに習得しているはずです (プロンプトの単語をコピーしてください)。

まず、プロンプトワードを使用して背景画像を作成します。著者は、この開始インターフェイス画像を作成するために DALL·E 3 を使用しました。

写真

「Angry Pumpkins」というタイトルのビデオゲームの横長の鮮やかなホーム画面の写真。このデザインは「Angry Birds」ゲームの美学にインスピレーションを得ていますが、異なります。背景では、お化け屋敷、墓石、コウモリなどのハロウィーンの要素が目立っています。ゲームのロゴは中央上部に大きく表示され、その両側には怒って行動する準備ができているように見える様式化されたカボチャのキャラクターが配置されています。「再生」ボタンは、不気味な霧に囲まれた中央下部にあります。

プロンプトワードが翻訳されると、写真の内容の詳細な説明になります。

「Angry Pumpkins」というビデオゲームの横向きの鮮やかなホーム画面の写真。このデザインは、Angry Birds ゲームの美学にインスピレーションを受けていますが、ちょっとした工夫が加えられています。お化け屋敷、墓石、コウモリなどのハロウィーンの要素が背景を占めています。ゲームのロゴは上部中央に大きく表示され、その両側には怒って行動する準備ができているように見える様式化されたカボチャのキャラクターが配置されています。 「PLAY」ボタンは下部中央にあり、不気味な霧に囲まれています。

ただし、英語のプロンプトを使用する必要があることに注意してください。中国語はすべての人が理解できるようにするだけです。

次に、Midjourney を使用して 2 つのゲーム背景画像を作成しました。

プロンプトワードに加えて、「アウトペインティング」ボタンも使用されます。

写真

iPhone のスクリーンショットのアングリーバードのスカイライン、ハロウィーン エディション、墓地、ライト アクアマリンとオレンジのスタイル、新伝統主義、ケレム ベイト、土塁、木材、Xbox 360 グラフィックス、ライト ピンクとネイビー --ar 8:5

「Angry Birds Skyline iPhone スクリーンショット、ハロウィーン エディション、墓地、ライト アクアマリンとオレンジ スタイル、新伝統主義、ケレム ベイト、土塁、木材、Xbox 360 グラフィックス、ライト ピンクとネイビー ブルー --ar 8:5」

写真

2D プラットフォーム、石レンガ、ハロウィーン、2D ビデオゲームの地形、2D プラットフォーム、ハロウィーンのシナリオ、怒っている鳥に似ている、メタルスラッグハロウィーン、スクリーンショット、ゲーム内アセット --ar 8:5

「2D プラットフォーム、石のタイル、ハロウィーン、2D ビデオゲームの地形、2D プラットフォーマー、ハロウィーンのシーン、怒っている鳥に似ている、メタルスラッグのハロウィーン、スクリーンショット、ゲーム内アセット - ar 8:5」

写真

ハロウィンのカボチャ、ゲーム内スプライト、ハロウィン版、シンプルなスプライト、2D、白背景

「ハロウィンのカボチャ、ゲームのスプライトですがハロウィンバージョン、シンプルなスプライト、2D、白背景」

「緑のハロウィンモンスター、おどけた、面白い、ゲームのスプライトだがハロウィンバージョン、シンプルなスプライト、2D、白背景」

写真

緑のハロウィーンモンスター、ばかばかしい、面白い、ゲーム内のスプライトだがハロウィーン版、シンプルなスプライト、2D、白背景

さらに、木箱や骨などのゲーム素材はMidjourneyから直接生成されます。

コードセクション

ゲームの核となる部分は 600 行のコードです。

著者はコードを一切書いていませんが、GPT-4 を使用してコードを生成するのは非常に難しい作業であり、著者のエネルギーのほとんどはここに費やされました。

作者は、さまざまなパーティクル エフェクト、さまざまな種類のオブジェクトなど、多くの詳細を追加しました。

著者は、最も基本的なロジックから始めて、段階的に詳細な要件を作り、まるで開発者のように 600 行のコードを生成しました。

著者はまた、当初のきっかけについても次のように語った。

さて、皆さんに質問です。Angry Birds で鳥がどのように発射されるか知っていますか? 画面上で指が何をするか知っていますか? その通りです。マウスを使用してこれをゲームに追加します。

「Matter.js と p5.js を使用して、Angry Birds スタイルのシンプルなゲームを作成できるようになりました。マウスを使用して角度と力を指定してボールを発射し、2D 物理法則を使用して積み重ねられたボックスを叩くだけです。」

コードに問題がある場合は、次のプロンプトを使用して GPT-4 に質問します。

このエラーがあります。修正してください: Uncaught ReferenceError: 制約が定義されていません

このエラーが発生しています。修正してください: Uncaught ReferenceError: Constraint is not defined

チュートリアルハンズオンテスト

正直に言うと、私はこの件について最初は少し懐疑的でした。 GPT-4V が最初にリリースされたとき、Web ページを作成する機能が一般に公開されました。

ナプキンに描いたスケッチをモデルに入力すると、適切な Web ページが直接生成されます。食べたものは草で、出てきたものはミルクです。

しかし、特定のゲームになると、静的ページと動的ロジックを組み合わせる必要があります。GPT-4 は本当に Angry Birds に必要な機能を実現できるのでしょうか?

事実から真実を追求するという原則に基づいて、編集者はこのプロセスをすべての人のために再現しようとします。

まず、著者が提供した例に従って、GPT-4 をテストしてみましょう。実際に初めてまともなコードが生成されました。

写真

GPT-4 は HTML コードと JS コードの両方を生成しますが、これは予想外です。

写真

js コードは比較的長いため、ここではほんの一部だけを示します。興味のある読者は、記事の最後で GPT-4 によって初めて生成されたプログラムを見つけることができます。

写真

また、GPT-4 はプログラムの流れをユーザーに丁寧に説明してくれるので、泣けてきました。

GPT-4 によって生成された 2 つの html ファイルと js ファイルを使用して、それらが実際に使用可能かどうかをテストできます。

これには少しの知識や回避策が必要になる場合があります。ローカルにフォルダーを作成し、生成された 2 つのファイルをその中に配置します。直接開くと、ブラウザーにエラーが表示されます。

「GET https://cdnjs.cloudflare.com/ajax/libs/p5/1.4.0/p5.js net::ERR_ABORTED 404 (Not Found)」というエラーを GPT-4 にスローすると、次の解決策が得られます。

写真

この分析には確かに意味があるが、現在の問題には当てはまらないことは認めます。ここで、ファイルを正しい HTML ファイルと比較し、エラー ファイルの名前を正しいものに変更するには、手動による介入が必要です。

もう一度実行します。今回は、js ファイルからエラーが発生します: 「Uncaught SyntaxError: 識別子 'options' は既に宣言されています」。ここでも、まず GPT をテストしましょう。

写真

私たちは GPT の提案を謙虚に受け入れ、いくつかの修正を加えた後、プログラムは実際に機能しました。

写真

かなり興味深いですね。 。 。でも、あまりないですよね？

最後に、GPT-4 によって生成されたコードとチュートリアルの作成者が共有したコードを比較しましたが、確かに大きな違いがあります。

私たちのコードはわずか 90 行ですが、完成したチュートリアルには 600 行あります。

実際に Prompt を使用してチュートリアルのようなゲームを作成したい場合は、結果に基づいて GPT-4 とさらに通信する必要がありますが、コーディング スキルがなければこれはほぼ不可能です。

作者はコードを1行も書いていないと言っているが、それでも完成までに10時間かかった。

GPT-4 との通信には多くの考慮が払われているはずであり、作者は一定のコーディングの基礎とゲーム制作プロセスに関する基本的な理解を持っているはずであることが想像できます。

そのため、著者はチュートリアルでゲーム生成の具体的な手順を詳しく説明することができず、一般的なアイデアを全員と共有することしかできません。

しかし、著者の共有は、少なくとも、コーディングスキルとエンジニアリング経験を持つ人々にとって、GPT-4 は本当に何もないところから何かを生み出し、10 時間で完成品を生み出すことができ、開発時間と敷居を大幅に削減できることを証明しています。

しかし、コーディングスキルもゲーム制作の経験もない人にとっては、この道は今のところ実現可能ではありません。

参考文献:

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