1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

生成AIを用いて全力で作りたいゲームを作ってみたらけっこう大作が出来上がった話

1
Posted at

はじめに

生成AI(コーディングエージェントの Claude Code)と二人三脚で、ブラウザで遊べる横スクロールのアクションゲーム HOVER DODGE を作りました。

最初は「フラッピーバードっぽい回避ゲーム」でした。そこから、

  • 4 章構成のストーリーと 3D カットシーン
  • ボス 11 体
  • 42 種のスキルツリーとレベル 80 までの成長要素
  • 章ごとにまるごと変わる、全部コードで鳴らしている BGM
  • 20 体の 3D モデル(glTF)
  • クリア後のエンドレスモード

……と、気づけばかなり大きなゲームになっていました。

この記事では、「人間が方向を決めて、AI が実装する」というやり方で、どこまで作れたかの記録を書きます。

▶ 遊ぶ:https://junia2009.github.io/hover-dodge/
(スマホは横向きで。ホーム画面に追加するとアプリのように起動します)

1-title.png

コードの大半とほとんどの 3D モデルは AI が書いたものです。私の役割は次のとおりです。

  • 何を作るか決める
  • 主人公レイの原案モデルとキャラクター設定を考える
  • AI が入れた修正をコードで追いかけて確認する
  • 遊んで、ダメ出しする

数字で見る HOVER DODGE

項目 数
開発期間 2026 年 5 月(第 1 期)+ 10 月(第 2 期)。コミットのあった日は 16 日
コミット / プルリクエスト 213 コミット / 95 PR
バージョン v1.0.0 → v3.6.3
ゲーム本体 index.html 1 ファイル、約 11,000 行(HTML・CSS・JS 全部入り)
3D モデル 20 体(自機・キャラクター・ボスの旗艦など)。すべて AI がコードで組んで glTF に書き出し
ボス 11 体(多段階ボス・仲間が加勢する最終戦あり)
スキル 42 種(ツリー・ランク・シナジー・装備枠)
BGM 外部音源ファイル ゼロ。WebAudio ですべて合成、章ごとに 7 曲ずつ

どんなゲーム?

画面タップ(またはスペースキー)で羽ばたいて、迫ってくる壁と敵をよけ続けるゲームです。

主人公は、宇宙パイロットに憧れる小さな鳥 レイ。故郷の星 アイギス を宇宙海賊団に焼かれたレイが、瓦礫の中から掘り出した古い機体と、そこに眠っていた AI パラス と一緒に飛び立つ……という物語です。

  • CHAPTER Ⅰ「BIDENT」:宇宙海賊団バイデントとの戦い
  • CHAPTER Ⅱ「CERBERUS」:冥王ハデスの影を追う。おばあちゃんを救出
  • CHAPTER Ⅲ「HYPNOS」:消息不明だった父・ソルのビーコンを追って、冥界の門へ
  • CHAPTER Ⅳ「NYX」:夜の女神が目を覚まし、星がひとつずつ消えていく(最終章)
  • ✈ PILOT MODE:全クリア後、パイロットになったレイが平和になった銀河を旅するエンドレスモード

各章にはその章だけのギミックがあります。

  • 第三部:霧の中を飛ぶと眠くなる「眠気ゲージ」
  • 最終章:機体のまわりしか見えない「夜」、装備スキルを忘れてしまう「忘却」

![最終章のボス NYX と、駆けつけた仲間の編隊]2a-boss-nyx.png

![3D カットシーン(パイロットモードの見送りシーン)]2b-cutscene.png

![PILOT MODE。明るい空を惑星が流れていく]2c-pilot-mode.png

開発スタイル:「いちいち聞かなくていいから、メインに上げて」

基本の流れ

開発は、ほぼ次のループの繰り返しでした。

  1. 私が自然言語で「次はこうしたい」と伝える
  2. AI がブランチを切って実装する
  3. AI が ヘッドレスブラウザ(Playwright)で実際にゲームを動かし、スクリーンショットで見た目を確認する
  4. バージョン番号と README の更新履歴を更新し、コミット → PR 作成 → マージ
  5. 私が PR の差分で修正箇所を追いかけつつ、実際に遊んで、気になったところを伝える → 1 に戻る

途中から、

もういちいち聞かなくていいからメインにあげて

とお願いしたので、確認待ちがなくなりました。そこからはテンポが一気に上がりました。そのぶん 1 依頼 = 1 PR にして、何が変わったかを差分で追えるようにしています。任せっぱなしにはせず、どこがどう変わったかは自分でもコードで確認しています。

依頼はふわっとでいい

依頼はかなりざっくりです。たとえばこんな感じ。

次に、最終決戦の時、複数の仲間が駆けつけてくれる時あるやん?あの時、NPC 達も飛行機で実際に飛んできてくれる設定にしない?

これだけで、AI がやってくれたのは次のようなことです。

  • 仲間 4 人の機体を、それぞれのキャラの色で用意する
  • 画面の左から駆けつける動きを作る
  • 主人公の周りで編隊を組んでボスを撃ち、順番に抜けて援護する流れを作る

スマホでの描画負荷まで気にして実装してくれました。

ダメ出しが一番大事

AI が出してきたものは、だいたい「ちゃんと動く」し「それっぽい」です。でも 「面白いか」「グッとくるか」は人間が遊んで判断するしかありません。印象に残っているダメ出しをいくつか。

強いスキルが、強い場面で役に立たない

ソルのスキルを強くしたい。例えば、フラッピーバードに有るまじき壁に攻撃できるスキルとか?

最初の実装は「10 秒に 1 枚、壁を壊せる」でした。でも遊んでみると、

強いスキルを活用する場面って、もう壁が 1 秒間に何個も…意味ない感は否めないよね

という状態でした。そこで終盤向けに作り直してもらいました。

  • SOLAR FLARE:前方の壁を全部自動で溶かす
  • SUN DIVE:PULSE のたびに数秒間、ぶつかった壁を何枚でも粉砕する

BGM が章で変わらない

BGM がね、エピソードが変わっても変わらないのよ。…エピソードごとに BGM を一新したい

まず、章ごとにキー・テンポ・コード進行・メロディを変えてもらいました。それでも「もっと変化をつけてもいいかな」と伝えたら、AI はかなり攻めてきました。

  • 拍子:第三部はワルツの 3/4、最終章のボスは 7/8
  • ドラムキット:和太鼓 / ブラシ / 大聖堂の残響
  • 楽器:オルゴール、合唱パッド、弓で弾くようなリード

ストーリーの「感動しない」問題

最終章の物語案について、

綺麗にまとまってはいると思うけど、なんか感動はしない感じがする

と伝えて、別案を複数出してもらいました。その中の「案 A」を軸に、敵側の設定を掘り下げます。さらに「敵のボスを最後は味方にしたい」という方針を足して、最終章ができました。

AI は「整った案」を出すのは得意だけど、どれが刺さるかは人間が選ぶ。この役割分担がうまくはまったと思います。

細かい見た目のこだわり

最近の例です。

  1. 「パイロットの制服を着たレイ」というセリフがあるのに、見た目が変わっていないと指摘した

  2. AI が制帽とネッカチーフを付けてくれた

  3. でも

    洋服はいい気がした!けど、帽子はダメだな。憧れのパパとおなじゴーグルにしようぜ!

    とお願いした

AI は父親・ソルの 3D モデルからゴーグルの部品を写して、主人公の頭の大きさに合わせて付け替えてくれました。

![パパとおそろいのゴーグルを付けたレイ(右はパパのソル)]3-ray-goggles.png

技術的に面白かったところ

1. index.html 1 ファイルに全部入り

  • 依存は CDN の Three.js と Google Fonts だけ
  • ゲーム本体は HTML・CSS・JS を全部まとめた index.html 1 ファイル(約 11,000 行)
  • ビルド工程なし。GitHub Pages にそのまま置いて動く

人間が手で保守するなら絶対に分割したい大きさです。でも AI は grep で場所を探して、必要な部分だけを書き換えるのが上手なので、意外と破綻しませんでした。

2. 3D モデルも AI が「コードで」作る

キャラクターや敵の旗艦の 3D モデル(20 体)は、主人公レイ以外は Blender などのモデリングツールを使っていません。

レイだけは、私が作った初期モデルが原案です。ほかのキャラ(おばあちゃん、パパ、ボスたち)は、このレイの体型や配色ルールに合わせて AI が作っています。作り方はこうです。

  1. AI が Three.js のジオメトリ(球・円柱・ロフトなど)を組み合わせてモデルを書く
  2. ヘッドレスブラウザで 4 方向からのプレビュー画像 と ゲーム内での見え方 をレンダリングする
  3. GLTFExporter で .glb に書き出す

プレビュー画像を見て「イメージ通り!GLB で書き出して」と言うだけで、モデルが 1 体増えます。

// 例:新米AI「パウロ」のモデル(抜粋)
add('dome',  new THREE.SphereGeometry(R, 48, 24, 0, Math.PI * 2, 0, Math.PI / 2), mat.dome);
add('shell', new THREE.SphereGeometry(R, 48, 24, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2), mat.shell);
add('eye',   new THREE.SphereGeometry(0.23, 32, 20), mat.eye, o => { o.position.set(0, 0.03, eyeZ); o.scale.set(1, 1, 0.45); });
// 記録係なので、録画中に光る REC ランプ付き
add('rec',   new THREE.SphereGeometry(0.06, 14, 10), mat.rec, o => { /* ドームの右上に配置 */ });

腕・アンテナ・ボスの首などは 名前付きのピボット にしてあります。ゲーム側から getObjectByName('armR') で取り出して、手を振らせたり首ごとに壊したりできます。

![パウロのモデルのプレビュー(上:3 方向から、下:レイと並べたサイズ比較)]4-paulo-model.png

3. BGM も効果音も全部 WebAudio で合成

音源ファイルは 1 つもありません。BGM は固定ループではなく、プレイに反応して変わります。

  • セクション切替:フェーズやボスが来ると、必ず次の小節頭で曲が切り替わる。1 小節前からライザーとスネアロールで盛り上げる
  • 危険度・ヒート:壁や敵との近さ、連続回避の勢いに応じて、ハイハットやアルペジオ、リードのオクターブが変わる
  • スティンガー:ギリギリ回避すると、今鳴っているコードの構成音でベルが鳴る。コンボが続くほど音程が上がる
  • しゃべる声:セリフの文字送りに合わせて、話者ごとに違う電子音が鳴る

4. カットシーンエンジンとキャラの会話

3D カットシーンは汎用エンジン(Cine)で動いています。

  • 台詞・タイプライター・SKIP・ベール遷移・カメラ補間を共通化
  • シーンごとに「丘」「焼けた惑星」「夜明け」などの舞台と、セリフ番号ごとのキャラの動きを書く

プレイ中にも、無線で相棒 AI がしゃべります。被弾・コンボ・ギリギリ回避・経過時間・前回の死因など、状況別にセリフが用意してあります。同じセリフが続かないように、履歴を localStorage に持っています。

最近のアップデートでは、エンドレスモード用に 新米 AI「パウロ」 を追加しました。

  • 主人公を「先輩!」と慕う後輩キャラ
  • 前作の相棒パラスに憧れている
  • 記録係として名場面に通し番号を振っていく(「記録しました! 先輩の名場面 No.12!」)

キャラ設定を数行伝えただけで、全場面ぶんのセリフと掛け合いを書いてくれました。

5. PWA とキャッシュ

Service Worker でオフラインでも遊べるようにしています。

  • ページ本体はネット優先で取得する
  • 3D モデルは専用キャッシュに入れて、再ダウンロードしない
  • 新バージョンが出ると、タイトル画面に「タップで更新」ボタンが出る

ハマったところ・AI 開発の注意点

  • 「動く」と「見える」は別

    • パウロのモデルを最初に配置したときは、ただの光の点にしか見えなかった
    • 制服を着せたつもりが、別のシーンのキャラに着ていた
    • 制帽が大きすぎてキャラが帽子に埋もれた

    AI 自身がスクリーンショットを撮って確認する工程は必須です。それでも最終チェックは人間の目でした。

  • 初期化順のバグ(TDZ)

    • 1 ファイルに全部書いているので、const を宣言前に参照してしまうバグが何度か出た(画面が真っ暗になる)
    • ヘッドレスブラウザのエラーログで早めに気づけるようにした
  • 更新が届かない問題:Service Worker の登録が途中のバージョンから壊れていて、スマホに新しい版が届かない時期があった

  • スマホの画面サイズ

    • 縦画面で閉じるボタンが画面外にはみ出す
    • タブが重なって押せない

    こういう不具合は、実機で触った人間が気づいて伝えるしかありません。

  • ゲームバランス:数値上は強いスキルでも、実際に使う場面では役に立たない、ということがあります。体感は人間の仕事です。

人間がやったこと、AI がやったこと

人間(私) AI
何を作るか決める 実装(ゲームロジック、UI、シェーダー、音楽、3D モデル)
主人公レイの初期モデルとキャラクター設定の提案 レイに合わせたほかのキャラのモデル作り
物語の方向性、キャラの性格、「刺さる」案を選ぶ 設定資料(docs/LORE.md)とセリフの執筆、複数案の提示
PR の差分で修正箇所を追いかけて確認する バージョン管理、README の更新履歴、PR の作成とマージ
実機で遊んで違和感を伝える、「イメージ通り!」の判断 ヘッドレスブラウザでの動作確認・スクリーンショット

主人公レイの初期モデルとキャラクター設定、物語の方向性、そして「こういうゲームにしたい」という気持ちは私が出しました。コードを書く手はほぼ AI ですが、どこがどう変わったかは自分でも追いかけています。

おわりに

生成 AI でのゲーム開発で一番大事だと感じたのは、「遊んで、感じたことを言葉にする」ことでした。

  • 「なんか感動しない」
  • 「帽子はダメだな」
  • 「強いスキルなのに意味ない感がある」

みたいな、理屈になっていない感想でも、AI はちゃんと具体的な修正に落としてくれます。逆に言うと、その感想を出せるのは、作りたいものがある人間だけです。

作りたいものがある人にとって、今は本当に面白い時代だと思います。ぜひ遊んでみてください!

▶ HOVER DODGE:https://junia2009.github.io/hover-dodge/
▶ GitHub:https://github.com/junia2009/hover-dodge

1
1
23

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?