巨猫ランナー
ブラウザで遊べる3Dランナーゲーム「巨猫ランナー」を作りました。
タイトルの通り、主人公は大きな猫。
街の道路をどんどん走りながら、魚を集めたり、障害物をジャンプで避けたり、敵の巨猫をかわしたりして進んでいくゲームです。
見た目はポップでかわいく、でも少しリッチに。
シンプルに遊べるけれど、スピードが上がるほどちゃんと難しくなるように調整しています。
今回はこのゲームを、チャピ（ChatGPT）とコデピ（Codex）を使いながら制作しました。
魚を集めて走り続ける「巨猫ランナー」
「巨猫ランナー」は、3レーン制の3Dランナーゲームです。
プレイヤーは猫を操作して、左右にレーン移動したり、ジャンプしたりしながら、できるだけ長く走り続けます。
ゲーム中には、魚、金の魚、スーパー肉球、スターなどのアイテムが登場します。
魚を集めるとスコアが増え、金の魚を取ると一気に魚10匹分。
スーパー肉球を取ると2段ジャンプが解放され、スターを取ると10秒間無敵になります。
障害物もいろいろあります。
石、コーン、土管、バナナ、車、人間、敵巨猫などが登場し、バナナを踏むと猫がくるっとスリップします。
さらに、時間が経つと昼から夕方、夜へと街の雰囲気も変化します。
夜になると街灯やビルの窓が光り、空には星も出てきます。
ただ走るだけではなく、見た目の変化やアイテムの気持ちよさも楽しめるようにしました。
チャピと要件を固めて、コデピと一緒に実装
制作の流れとしては、まずチャピと相談しながら、ゲームの要件定義をまとめました。
どんなゲームにするか。
猫はどう動くか。
障害物は何を出すか。
アイテムはどんな効果にするか。
UIはどんな雰囲気にするか。
そういった内容をざっくりと整理してから、コデピ（Codex）にプロンプトを投げました。
最初のポン出しは、なんと5分くらい。
Vite、TypeScript、three.js、GSAPを使った3Dランナーゲームの原型が、かなり短時間で動く状態になりました。
もちろん、そこからが本番です。
最初に出てきたものを実際に遊んでみると、猫の向き、アイテムの見た目、UIの読みやすさ、障害物のバランスなど、気になる部分がたくさん出てきます。
そこから6時間ほど、僕が何度も実際に遊びながら、
- ここはもっと見やすくしたい
- この障害物はわかりづらい
- このアイテムを追加したい
- ゲームオーバー画面をもっと楽しくしたい
- スマホで見たときに崩れている
- 難易度をもう少し調整したい
といった改善点をコデピに伝えて、ひとつずつ実装してもらいました。
人間側では、追加アイテムや障害物のアイデアを考えました。
例えば、金の魚、スーパー肉球、スター、バナナスリップ、横切る人間、敵巨猫などです。
それをコデピに伝えると、実装してくれて、また僕が遊んで確認する。
その繰り返しで、少しずつ「遊べるゲーム」になっていきました。
AIに全部丸投げというよりは、人間が遊びながら方向性を決めて、AIが手を動かす共同制作という感じでした。
この進め方はかなり楽しかったです。
自分でコードを全部書くよりも試行錯誤の回数を増やせるので、「もっと面白くするには？」に集中しやすいのが良いところでした。
作ってみて感じたこと
今回あらためて感じたのは、AIを使うと「最初に動くもの」を作るスピードがとても速いということです。
ただし、そこから本当に楽しいものにするには、やっぱり人間が遊んで、見て、違和感を伝えて、調整していく必要があります。
特にゲームは、数値や見た目のちょっとした違いで気持ちよさが変わります。
魚の位置が高すぎる。
障害物の間隔が狭すぎる。
UIが少し邪魔。
スマホだとボタンが重なる。
スター状態がわかりづらい。
こういう細かいところを何度も直していくことで、だんだん完成度が上がっていきました。
AIと一緒に作る場合でも、「遊んで判断する人間の感覚」はかなり大事だと思います。
技術スタック
今回の「巨猫ランナー」は、以下の技術で作っています。
- Vite
- TypeScript
- three.js
- GSAP
- HTML / CSS
- localStorage
- Web Audio API
- WordPress用の静的アップロード
Reactは使わず、Vite + TypeScript のシンプルな構成にしています。
3D表現は three.js、アニメーションやUI演出には GSAP を使っています。
スコアや自己ベストは localStorage に保存しています。
ゲーム本体はブラウザで動くので、ビルドしたファイルをサーバーにアップロードすれば公開できます。
AIと一緒に、短時間でここまでゲームらしいものが作れるのはかなり面白い体験でした。
また別の猫ゲームも作ってみたくなりますね。
