ChatGPTスーパープラグインをテスト済み: 経験ゼロでも5分でゲームを開発

この記事はAI新メディアQuantum Bit（公開アカウントID：QbitAI）より許可を得て転載しています。転載の際は出典元にご連絡ください。

これはランダムな発言ではありません。ブロガーがすでにデモを公開しています。

写真

宇宙を舞台に宇宙船が小惑星に衝突するゲームです。

その効果は依然として非常に衝撃的です。一部のネットユーザーは、それを見た後、GPT-4 + コードインタープリター = ChatGPT-4.5 を賞賛しました。

写真

このブロガーは、自身の成果を披露しただけでなく、親切にチュートリアルを提供し、プロンプトまで教えてくれたことは特筆に値します。

写真

早速試してみました〜

すぐに再現されアップグレードされた

チュートリアルを再現しようとしたところ、プロンプトは次のようになりました。

マウスで宇宙船を操作し、マウスの左クリックで小惑星を撃つ Asteroids 用の p5.js コードを作成します。宇宙船が小惑星に衝突すると負けになります。すべての小惑星を撃ち落とすと勝ちです。宇宙船と小惑星には独自のテクスチャを使用したいと思います。

コード インタープリターをそのままオンにして ChatGPT に入力すると、すぐに JS コードが取得されました。

 let spaceship; let spaceshipImg; let asteroids = []; let asteroidImg; let bullets = []; function preload() { spaceshipImg = loadImage('spaceship.png'); // replace with your image path asteroidImg = loadImage('asteroid.png'); // replace with your image path } function setup() { createCanvas(windowWidth, windowHeight); spaceship = new Spaceship(); for(let i = 0; i < 10; i++){ asteroids.push(new Asteroid()); } } function draw() { background(0); spaceship.show(); spaceship.move(); for(let i = bullets.length-1; i >= 0; i--){ bullets[i].show(); bullets[i].move(); for(let j = asteroids.length-1; j >= 0; j--){ if(bullets[i].hits(asteroids[j])){ if(asteroids[j].r > 10){ let newAsteroids = asteroids[j].breakup(); asteroids = asteroids.concat(newAsteroids); } asteroids.splice(j, 1); bullets.splice(i, 1); break; } } } for(let asteroid of asteroids){ asteroid.show(); asteroid.move(); if(asteroid.hits(spaceship)){ alert("Game Over"); noLoop(); } } if(asteroids.length === 0){ alert("You Won!"); noLoop(); } } function mousePressed() { if(mouseButton === LEFT){ bullets.push(new Bullet(spaceship.pos, spaceship.heading)); } }

著者のチュートリアルに従って、このコードをオンライン コンパイル プラットフォームにコピーしました。

自分で用意する必要がある宇宙船や小惑星の写真もあります。アップロードしたら実行してみましょう！

ねえ、何が悪かったの？

写真

慌てる必要はありません。エラー メッセージを ChatGPT に直接コピーし、すぐに修正できました。

 class Spaceship { constructor() { this.pos = createVector(width / 2, height / 2); this.r = 50; this.heading = 0; this.rotation = 0; } show() { push(); translate(this.pos.x, this.pos.y); rotate(this.heading + PI / 2); image(spaceshipImg, 0, 0, this.r, this.r); pop(); } move() { this.pos = createVector(mouseX, mouseY); } } class Bullet { constructor(shipPos, angle) { this.pos = createVector(shipPos.x, shipPos.y); this.vel = p5.Vector.fromAngle(angle); this.vel.mult(5); } show() { push(); stroke(255); strokeWeight(4); point(this.pos.x, this.pos.y); pop(); } move() { this.pos.add(this.vel); } hits(asteroid) { let d = dist(this.pos.x, this.pos.y, asteroid.pos.x, asteroid.pos.y); return d < asteroid.r; } } class Asteroid { constructor(pos, r) { if(pos){ this.pos = pos.copy(); } else { this.pos = createVector(random(width), random(height)); } if(r){ this.r = r * 0.5; } else { this.r = random(15, 50); } this.vel = p5.Vector.random2D(); } show() { push(); image(asteroidImg, this.pos.x, this.pos.y, this.r * 2, this.r * 2); pop(); } move() { this.pos.add(this.vel); } hits(ship) { let d = dist(this.pos.x, this.pos.y, ship.pos.x, ship.pos.y); return d < this.r + ship.r; } breakup() { return [ new Asteroid(this.pos, this.r), new Asteroid(this.pos, this.r) ]; } }

いつも忘れっぽいChatGPTは、コンポーネントに関連する関数の出力を忘れていたことが判明しました。

サプリメントを追加したら、大丈夫でした。結果はDEMOとは少し異なりますが、それでもプレイ可能で、確かに5分もかかりませんでした。

（デモでは宇宙船の位置は固定されており、回転させることができます。私たちが再現したゲームは、その逆です。）

写真

しかし、私たちはこれに満足していなかったので、ChatGPT にいくつかの機能を追加してもらいました。

これらの手順については特別なプロンプトを設計せず、代わりに自然言語で直接説明しましたが、結果は非常に良好でした。

ここではコードとプロンプトを段階的に説明しません。記事の最後で、制作プロセス全体を通して ChatGPT とチャット記録を共有します。

最初のステップは、スコアリングとタイミングのメカニズムを追加することです。

写真

注意深い読者は、異なるサイズの小惑星が同じスコアを持っていることに気付くかもしれません。

そこで、ChatGPT に、サイズの異なる小惑星に異なるスコアを設定するように依頼しました。

さらに、ここの小惑星は画面から飛び出した後戻ってこないので、このバグも修正しました。

写真

もうその味がするんですか？しかし、この宇宙船は方向転換できないようなので、次にこの問題を解決してみましょう。

写真

最後に、一時停止機能（スペースバーで制御）を追加して、ゲームが完成しました。

写真

ヘビ、白いブロックを踏まないように

ブロガーのチュートリアルに従って、ChatGPT で他のゲームをいくつか作成してみました。

たとえば、Snake の場合、後で表示する必要のある周囲の壁を除いて、残りは 1 つのステップで表示されました。

しかし、食べ物を円で描くように頼んだのに、ChatGPT は四角い絵を描いてしまいましたが、それは大した問題ではありません。

写真

スネークゲームがあまりにも古典的だからなのかはわかりませんが、ChatGPT は名前を見た瞬間に何をすべきかがわかりました。

そこで、ゲーム名を与えず、ゲームプレイの説明だけをして、ChatGPT のパフォーマンスを確認するために再度試してみました。

今回は「白いタイルを踏まない」というゲームでした。ゲームプレイを説明しましたが、スピードが遅いことを除けば、かなり良いゲームでした。

以上がゲーム作成用コードインタープリターの完全な評価です。新しいアイデアがあれば、コメント欄にメッセージを残してください。

参考リンク: https://twitter.com/icreatelife/status/1678184683702566922

生産工程
小惑星: https://chat.openai.com/share/7fdc27a1-4a64-4c2f-a27d-c62f31a8af97 スネーク:
https://chat.openai.com/share/c67ca1c8-8a9e-41a1-bd0d-40970b52104c
白いタイルを踏まないでください。
https://chat.openai.com/share/639e957d-66bd-41bb-9676-1c9890629d49