デスピサロを相手に、効くはずのないザラキを唱えまくるクリフトを見ながら、AIというのはなんてアホなのだろうと思った。それが、僕が初めてAIに出会った瞬間だったと思うのだけど、時は過ぎ、現代では生成AIを中心とした「かしこいAI」たちが世に溢れていて、僕たちの生活様式を目まぐるしく変化させている。
このあいだ、Threadsを眺めていたら、Claudeを使ってステップシーケンサーを作ってる人がいて、えー、こんなことが出来るのなら僕もやってみたいと思った。せっかくなので遊べるものがいい。シンプルで面白いもの。何がいいかなと考えたら、PONGが頭に浮かんだ。PONGというのは、1972年にATARIが発表したビデオゲームの古典的名作。左右のパドルでボールを打ち合う、シンプルなピンポンゲームだ。
ゲーム制作の進め方
ラスボスに即死魔法を繰り返していたAIも、今では賢くなっていてプログラミングまでやってくれる。だから、今回は極力自分ではコードを書かない。作りたいものの概要を伝え、それを元に生成AIにコードを書いてもらう。そして、大枠が出来上がったら、調整や拡張をして完成させる。という方法で作ることにした。
ゲームの仕様を考える
とはいえ、PONGをそのまま再現するのでは面白くないので、何かしら別のアイデアを盛り込みたい。PONGを下敷きにしつつも、別のゲームとして楽しめるよう、仕様について考えてみた。
PONGはテーブルテニスなので、ボールを交互に打ち合い、相手がボールを打ち返せないと得点になる。つまり、ラリーに競り勝つところにゲームの楽しさがある。だけど、競り勝った瞬間よりもその過程に着目してはどうか。ラリーが続いている時の緊張感にこそ、PONGの醍醐味があるのではないか。
そこで、このゲームは、テーブルテニスのフォーマットはそのまま活かしつつ、ラリーを続けることを目的にしてみた。相手が打ち返せなかった時に得点になるのではなく、ラリーが続くことで、それが得点になっていく。ボールを打ち返すごとに、少しずつ高まる緊張と高揚感の中、最高得点を目指してラリーを続ける。
その体験を表現するためには、ラリーが単調にならないよう、単純な操作の中にも、スポーツのような緊張感を持たせたい。そのためには、ラリーが続くことで少しずつ状況変化が起こるようにしたい。そこで、以下のような仕様を追加することにした。
- 打ち返す度にボールが加速する（勢いがつく）
- 打ち返す度にパドルが短くなる（打ちにくくなる）
シンプルなゲームなので、気が向いた時にPCやスマホでサクッと遊びたい。なので、ブラウザをベースにした一人用のゲームにする。
プロトタイピング
テーマは「ラリー」にしよう！と盛り上がったものの、実際にそれは面白い体験になるのかどうか分からない。そこで、アイデアの手触りを確かめるために、ChatGPTにざっくりしたアイデアを投げてプロトタイプを作ってもらうことにした。
ブラウザで動くPONGのゲームを作りたい。操作は上下キーもしくは画面のタッチで行いたい。
できたのがこれ。モデルは GPT-4o にした。PONGは一対一の構造なので、左右のパドルはそれぞれ独立して動く。これを一人用にした時に、一人で2つのパドルを個別に操作するのは面倒だしテンポが悪い。何かいい解決方法はないかと思っていたら、ChatGPTが勝手にパドルが同時に動く仕様を実装してくれて助かった。これはいいアイデアだね！
これをベースに、以下の仕様を追加してコードを書き直してもらった。
- ボールがパドルに当たる度に、ボールの速度が20%ずつ上がる
- ボールがパドルに当たる度に、パドルが5%ずつ短くなり、移動速度が5%上がる
- ボールを打ち返すのに失敗したら、ゲームを終了して「GAME OVER」と表示する
前よりゲームっぽくなった。ラリーが続くことで状況変化が起きて難易度が上がっていく感覚が体感できた気がする。この方向性でブラッシュアップしていきたい。
ゲームの実装
Threadsで見つけたステップシーケンサーがClaudeで作られていたので、僕もコーディングはClaudeを試してみたいと思っていた。Claude 3.5 Sonnet にはArtifactsという機能が追加されていて、生成してくれたコードをチャットウィンドウ内でプレビューできる。部分的なコードの調整を行う場合は、コード全文を出力してくれなかったりして、作り込む段階ではあまりプレビュー出来なかったけど、チャットと並行してコードのやり取りを扱うにはとても便利だった。
というわけで、以下の内容でClaudeにリクエストを投げてみた。
ブラウザで遊べるPONGを作りたい。
- 左右にパドルがあり、操作によってこれらは同時に上下に動く
- 上下キーでパドルを移動できる。
- ボールを弾くたびに、スピードが10%ずつ早くなっていく
- ボールを弾くたびに、パドルの高さが5%ずつ短くなっていく
- ボールを弾いた数がスコアとして画面上に表示される
- ボールを弾くのを失敗すると「GAME OVER」の文字が表示される
- 「GAME OVER」表示時にEnter、もしくは画面のどこかをタップするとゲームをリトライできる
- ゲーム内の要素の色や形状をcssでコントロールしたい。
モデルは Claude 3.5 Sonnet。なんかだいぶゲームっぽくなった。これをベースに調整を加えていくと、遊べるものになりそうな気がする。
これをベースに、以下の調整を行った。
- マウス / トラックパッドで操作ができるようにする
- エリアの中央を点線で区切る
- パドルの位置調整と当たり判定の調整
- ボールの形状を円ではなく正方形に
ゲームができた。すごい。
完成
コード全体をコピペして、こんな機能を追加したい、とか、ここを改善したい、というだけで、変更箇所をまとめてくれて、それを手元のコードにマージする。その繰り返しでゲームが出来上がってしまった。
対話だけでは、どうしても修正がうまくいかなかった点もあったけど、そこは諦めて自分でコードを読んだ。あー、ここ、サイズの計算に横幅を使わなきゃいけないのに、縦幅使ってるじゃん！！みたいに、Claudeの見落としポイントを発見できた時はとても嬉しくて、ああ、僕、ゲーム作ってる！！！という気持ちにさせてくれた。
あとは、ローカルストレージにハイスコアを記録するようにしたり、スマホの縦持ちで遊びやすくしたり、スマホのフルスクリーンモードの時にジャイロセンサーでパドルを動かせるようにしたり、などなど、細かな改善や機能追加であれこれ整えて、ついにゲームは完成した。
ゲームタイトルは、PONGをリスペクトして「PONG PONG RALLY」にした。ボールをPONG PONGする度に高まる緊張と高揚感。ラリーを続けてハイスコアをめざせ！！
僕のハイスコアは24だぜ！とドヤっていたところ、初見の同僚に28を獲得されて惨敗してしまった。サクッと遊べるので、PCで、スマホで、隙間時間に遊んでみてほしい。
PCのトラックパッドもスイスイ遊べて便利だけど、スマホで「ホーム画面に追加」してフルスクリーンで遊ぶと、隠し機能のジャイロセンサーON/OFFが使えるのでおすすめ。スマホを傾けてパドルを操作するのは、玉転がしのおもちゃを遊んでいるようで、新鮮な感覚が味わえる。
スマホのフルスクリーンモードで、端末を傾けてパドルを操作できるようにしてみた。PONG PONG RALLYをホーム画面に追加して、画面下のGYRO表示をタップして遊んでください。 https://t.co/7x8Zi4QwBQ pic.twitter.com/Pkqvo79hcx
— Atsushi Kawakami (@akwkm) 2024年7月23日
おまけ
ChatGPTにPONG PONG RALLYのイメージイラストを作ってもらった。
PONGをモチーフにしたゲームで、PONG PONG RALLYと言います。このゲームにふさわしいイメージイラストを、16:9の画像で作って。
