ChatGPTに頼んで手軽にゲームを作って楽しむ方法

こんにちは。江辺です。
YUMEMIのデザイナーと活動をしている視覚伝達設計研究所（以下、視伝研）にて、今回は話題のAIはデザインにどのように活用すべく『誰が一番AIをAI（あい）しているか？？選手権』を開催しました。

この記事では、発表会の中で江辺がまとめた「ChatGPTに手軽にゲームを作ってもらう方法」について紹介します。

環境準備

まずは環境準備です。
AIにゲームを作ってもらう方法はいくつかありますが、今回は出来るだけ手軽に、且つ人間が手を動かすことなくゲームを作ろうという方針のもと、ビジュアルデザインのためのプログラミング言語であるProcessingを使うことにしました。

Processing自体をマシンにインストールする方法もありますが、せっかくなのでウェブ上にアップをしてほかの人にも使ってもらうためにOpenProcessingというウェブサービスを使います。

OpenProcessing - Creative Coding for the Curious Mind

英語なので、少し戸惑うかもしれませんが、サイトにアクセスしたら右上の『CREATE A SKETCH』をクリックしてコードの編集画面が表示されればOKです。

右上の『CREATE A SKETCH』をクリック

またゲーム生成に使うのは、みなさんご存知ChatGPTです。
サイトにアクセスして適宜ログイン後、ChatGPTの操作画面に移動してください。

Introducing ChatGPT

ChatGPTにプログラミングを依頼する

ここからはChatGPTとの根気のいる戦いです。
ChatGPTは知識がなくてもプログラミングコードなどを生成してくれる、とても頼もしい奴ですが、こちらのオーダーに一発で答えてくれることはなかなかありません。
ひとまず、ChatGPTに以下のように依頼をしてみましょう。

Processingで簡単なゲームができるコードを書いてください

そうすると、返ってきた返答はこちら↓

もちろんです、簡単な"バウンシングボール"ゲームを作ってみましょう。これはボールが画面の端に到達したら反射するというゲームです。

// ボールの位置を保存する変数
float x;
float y;

// ボールの速度を保存する変数
float xspeed;
float yspeed;

void setup() {
  // ウィンドウのサイズを設定
  size(800, 600);

  // ボールの初期位置を設定
  x = width / 2;
  y = height / 2;

  // ボールの初期速度を設定
  xspeed = 5;
  yspeed = 5;
}

void draw() {
  // 背景色を設定
  background(0);

  // ボールを描画
  fill(255);
  ellipse(x, y, 48, 48);

  // ボールの位置を更新
  x = x + xspeed;
  y = y + yspeed;

  // ボールが画面の端に達したら反射
  if (x > width || x < 0) {
    xspeed = xspeed * -1;
  }
  if (y > height || y < 0) {
    yspeed = yspeed * -1;
  }
}

このソースコードをコピーして、さきほどのOpenProcessingの編集画面にペースト。右上のメニューから『Pjs』を選択し、『SAVE』ボタンをクリックしましょう。
OpenProcessingのアカウントを持っていないとSign Up画面が表示されるので適宜必要な情報を入力しソースコードを保存してください。

MODEでPjsを選択してSAVE

そうすると出来上がる画面はこちら↓

GPT GAME - kazuakiebe - OpenProcessing

………なんか、ボールは動いているけどまったくゲームになっていない。。。！！！😭

ここからは、あの手この手でChatGPTを会話しながらゲームを作っていきます。ひとまず、ブロック崩しのようなゲームを目指して、ChatGPTに改良を依頼し続けます。

何度かのやり取りを経て出来たゲームがこちらです↓

GPT GAME Ver.02 - kazuakiebe - OpenProcessing

結構、ゲームっぽくなってきました。
もう少し描画やブロックを工夫したり、アイテム数のパターンを増やしていくと結構それだけで遊ぶことのできるゲームが出来そう。
プログラミングの知識がなくてもこんな形で手軽にゲームを作ることができました。

ちなみに、『誰が一番AIをAI（あい）しているか？？選手権』では、出来るだけ面白いシューティングゲームを作るべく頑張り、そのときのゲームはこちらになります。

シューティングゲーム ver.03 - kazuakiebe - OpenProcessing

ChatGPTが得意なこと、不得意なこと

このようにChatGPTに依頼をすることで、誰でも簡単なゲームを作ることができたり、相談をすることでゲーム性を高めるための要素を追加提案してくれるのがとても良いところな反面、どうしても描画面では良し悪しの判断が出来なかったり、そもそもプログラミングだけで精密な描画をすることが難しいため少し物足りない印象になってしまうのが残念なところでした。

また、たまに生成してもらったコードをコピペしても動作しないことがあり、そういったときにプログラミングの知識がゼロだと、どこを直したら良いのかわからず、ChatGPTに正確な指示が出せず、結構いいところまでいっても、より作り込みが出来なくなってしまうシーンがあるのが、なかなか悩ましいポイントです。

プログラミングが、より身近に

このような一連の研究の中で、個人的にずっとトライしてみたいと思っていたProcessingでこんな簡単に遊べるようになったのはとても良い発見でした。

今回はゲームという方向性でプログラミングにチャレンジしてみましたが、インタラクティブなアートや表現などいろいろなところに活用できるので、今後も時間を見つけてはAIとビジュアルコーディングの研究は続けていきたいと思います。

---

最後に、視伝研では、こんな形でゆるゆるとUIやUXについて研究を進めています！これまでの研究内容はこちら。今回の『誰が一番AIをAI（あい）しているか？？選手権』のほかのメンバーの発表も、なかなかの力作揃いなのでぜひ興味あれば見てみてください。今後の研究にもご期待を！

視覚伝達情報設計研究室｜Yamashita Angelica｜note