はじめに

「VOID LANCER」は、ブラウザで遊べる3Dのレールシューティングゲームです。機体や敵、ボスの3Dモデルを、3DCGソフトのBlenderに、AIから直接指示して作り、そのモデルを使って、Three.js（ブラウザで3Dを動かすためのJavaScriptライブラリ）でゲームに仕上げました。AIコーディングエージェントは、Claude Codeを使っています。

デモを開く

この記事では、ゲームの仕組みだけでなく、モデリングからゲーム化までを、AIにどう指示し、どうテストし、どう試行錯誤しながら進めたか、その過程をご紹介します。

本文中、実際にAIへ伝えた内容は、読みやすいように丁寧な言い方に整えて、次のように引用形式で示します。

それ以外の地の文では、その指示に対してAI側がどう対応したか、どういう仕組みになっているかを解説します。

VOID LANCERとは

まずはゲームの概要をご紹介します。

• ブラウザのみで動作し、ダウンロードは不要
• PC（キーボード・マウス）とスマートフォン（縦向きのタッチ）の両方に対応
• 画面の奥へ自動で進む、レールシューティング（進む道筋が決まっているシューティング）
• 敵の編隊と小惑星をかわし、光るゲートをくぐり抜け、最後に大型のボスを倒すとクリア
• 機体を1回転させて敵弾をよける「回転よけ」（シューティングゲームでは「バレルロール」と呼ばれる動き）
• 人が操作しなくても自動で遊ぶ「AUTO PLAY」を搭載

最初の依頼と、方針の決め方

最初の依頼は、作りたいものと、守る条件を、一度に伝えました。

続いて、AIが出した選択肢に、次のように答えています。

この会話で、次の方針が決まりました。

• 他社の作品に似せず、機体の形や名称は、すべてオリジナルにする（タイトル名の「VOID LANCER」も、このとき新しく付けた仮の名前です）
• 画像素材は使わず、テクスチャ（表面の模様）は、すべてプログラムで生成する
• 効果音は、ブラウザの中で音を作る方式（Web Audio API）で合成する
• BGMも、まずはプログラムで合成し、のちに素材へ差し替えられる口を用意しておく

Blender MCPで、AIがモデルを作る

Blender MCPは、AIエージェントからBlenderを直接操作するための接続の仕組みです。Blenderに専用のアドオンを入れて接続すると、AIがPythonのプログラムをBlenderに送って実行し、形を作ったり、画面を確認したりすることができます。

最初に頼んだのは、完成イメージを共有するための、イメージ図でした。画像生成AIは使わず、Blenderで簡単な形を組んで、レンダリング（絵として書き出すこと）しています。

このときのつまずきは、敵機の翼が、胴体から外れたことでした。親子関係を付けて大きさを変えると、位置がずれるため、先に原点で組み立て、1つに結合したあとで配置する方式に切り替えています。また、最初は敵が小さすぎて見えなかったため、Blender上の位置を確認して、大きく、広く並べ直しました。

機体を、ゲームで使える形にする

イメージ図ができたら、次の指示を出しました。

Blenderに渡す作業は、4つの工程に分けました。

1. 形を作る：胴体、後退翼、双尾翼、翼端の砲、エンジン、キャノピー（操縦席の風防）まで、三角形（ポリゴン）を組み合わせて作る
2. 質感を付ける：画像を使わず、汚れ、パネルの継ぎ目、縁の剥げ、翼端の青い塗り分けを、Blenderの計算（プロシージャル）で作る
3. 質感を画像に焼き込む（ベイク）：Blender内の計算で作った質感は、ゲーム用のファイルに持ち出せないため、色、凹凸の影、発光の3枚の画像に固定する
4. 書き出す：GLB（3Dモデルを1つにまとめる標準のファイル形式）に書き出し、ゲームから読み込む

この4工程は、プログラムとして1本ずつ保存され、機体ごとに使い回すことができます。敵機とボスも、配色を差し替えるだけで、同じ手順で作りました。

つまずきもありました。Three.jsに読み込むと、金属の部分が真っ黒に表示されたのです。金属は、周囲の景色を映して見えるため、映す景色（環境マップ）が必要でした。部屋の景色を簡易的に作って渡すことで、解決しています。

ゲームの骨組みを、先に動かす

自機ができたところで、次のように指示しています。

敵やボスのモデルを作る前に、自機だけで、ゲームの動きの土台を作りました。レールシューティングの作り方は、次のとおりです。

• 自機は、画面の奥行きの位置を動かさず、上下左右にだけ動く
• 星や敵などの「世界」のほうを、手前に流す
• カメラは、自機の動きに少しだけ遅れて、追従する

これで、自機がまっすぐ奥へ進んでいるように見えます。光の演出（ブルーム、発光部分がにじんで光る表現）や、エンジンの炎も、このときに入れました。

試作を動かしながら、指示とテストを繰り返す

敵、敵弾、被弾を入れる

敵機のモデルを、自機と同じ手順で作りました。敵は2種類で、狙い撃ちをするガンナーと、自機に突進するダートです。ダートは、ガンナーと同じモデルを縮小して、橙に色付けしたものです。

自機の当たり判定は、翼が広いため、球ではなく、横長の楕円の形にしました。被弾後は短い無敵時間があり、HPが0になるとゲームオーバーです。

人が遊ばなくても確認できる、オートプレイ

この指示は、この制作で特に効果がありました。オートプレイは、人がキーを押す代わりに、AIが作った簡易な操縦プログラムが、キー入力と同じ経路で自機を動かす仕組みです。

• 回避：敵弾や小惑星が自機の位置に届く時点を予測し、当たりそうなら逆方向へよける
• 狙い：手前の敵を、弾が届くまでの時間だけ先読みして狙う
• 回転よけ：切迫したときだけ使う

さらに、描画も音もなしで、時間だけを高速で進める機能を用意しました。長時間のプレイを、短い時間で確認することができます。

オートプレイのおかげで、人が毎回遊ばなくても、バグと難易度を確認できるようになりました。たとえば、出現してすぐの突進機が、自機を狙う処理を通らず、画面の奥に多数たまっていたバグが見つかっています。操縦の腕前を数値で調整できるようにして、クリア率も測りました。

ボスとステージ進行

ボスは、1つの機体を、翼2枚と、本体と、コアの4つのパーツに分けて作りました。流れは、次のとおりです。

1. 翼を2枚とも壊す（それぞれ体力があり、3方向に弾を撃つ）
2. コアが現れる（全方向の弾と、狙い撃ち、突進機の呼び出し）
3. コアの体力が4割以下になると、攻撃が激しくなる
4. 倒すと連鎖して爆発する

ステージ全体は、ステージ名の表示、道中、「WARNING」の警告、ボス戦、クリアの順に進みます。

タイトル画面と、小惑星・ゲート

タイトル画面は、ゲーム本体の画面をそのまま背景に使いました。ゲートは、通り抜けると連続でボーナスが入り、3連続でHPが回復する仕組みで、道中の遊びを増やしています。

この頃に、次のバグにも出会いました。小惑星の位置を指定する行の末尾にコメントを書いたところ、次の文がコメントに飲み込まれ、小惑星がすべて自機の位置に出現しました。オートプレイがすぐに全滅したことで気づき、「小惑星なしなら100%クリア」と切り分けて、原因を絞っています。

画面の重なりを直す

狭い画面で、進行バーやボスの体力バーが、他の表示と重なっていました。AIは、実際の画面で各表示の位置を測って、重ならないように調整しています。

スマートフォンに対応する

操作の決め方

操作は、画面を指でドラッグして自機を動かし、触れている間は自動で連射する方式になりました。回転よけは、画面の左右どちらかの半分を、ダブルタップして出します。

縦向きだけにする

縦向きと横向きの両方を、実機で試すのは大変なため、縦向きだけに絞って、確認の範囲を減らしました。続けて、こう指示しています。

AIの調査では、ブラウザだけでは、端末を完全に縦に固定することはできません。環境別に最善を尽くす構成になりました。

• Androidのブラウザ：開始の操作で全画面にして、縦向きに固定する
• iPhoneのブラウザ：固定ができないため、横向きにされたら一時停止して、向きの案内を出す
• ホーム画面に追加（PWA）：縦向きと全画面の指定を、設定ファイルに書く

公開して、実機で見つかった点を直す

公開用のビルド

公開用のファイルは、ビルド前の素材から大きく軽量化できました。

• モデルの軽量化：ビルドのときに、モデルの画像をWebP形式に変換して、容量を大きく減らしました
• フォントの絞り込み：日本語フォントは、画面で使う文字だけを含むものに絞りました
• 配置場所を選ばない作り：ファイルの参照を相対パスにして、どのフォルダに置いても動くようにしました

ビルドで見つかった不具合もありました。開発中は偶然動いていた、画面の表示の切り替えの設定が、実際には壊れていたのです。ビルド後の画面で、各表示の状態を測って、見つけています。

本番への公開

さくらのレンタルサーバーに、静的なファイルとして置いて、公開しました。公開には、アップロードスキルを使っています。

スマホの実機で見つかった点

公開後、スマートフォンの実機で遊んで、次のように伝えました。

PCでは、Tキーでオートプレイを解除していましたが、スマホにはキーがありません。AIは、画面の右上に、切り替えのボタンを追加しました。操作の説明文も、単語の途中で折り返されていたため、意味の区切りで改行しています。

ボタンを増やすと、別の問題が出ます。

実際に、ボタンとボスの体力バーが重なったため、スマホでは、ボスのバーをボタンの下に移しました。

ボタンの整理

最後に、ボタンの役割を整理しました。

メニューに戻るボタンと、オートプレイの入り切りのボタンを、PCとスマホの両方に、同じ形で表示するようにしました。

今後、AIで3Dゲームを作る人に向けたポイント

• モデリングも、AIに指示して進めることができます。形を作る、質感を付ける、焼き込む、書き出す、という工程をプログラムとして残すと、機体ごとに配色だけを変えて、使い回すことができます
• テストを効率よく行うために、人が操作しなくても進む仕組みを、早めに作るのがおすすめです。オートプレイは、バグの発見にも、難易度の調整にも役立ちました
• 開発中の画面と、公開したあとの実機では、見つかる問題が違います。キーボードがないスマホでは、オートプレイを解除する手段がありませんでした。キーボード前提の機能には、画面上の代わりのボタンを用意しておくことができます
• 画面の重なりは、実際の画面で測って確認します。ボタンを1つ増やすだけで、別の表示と重なることがあります
• 画像素材を使わない場合でも、書き出しの形式や環境に気をつける必要があります。Blenderの計算で作った質感は、そのままでは持ち出せないため、画像に焼き込みます
• BGMや効果音は、まずプログラムで作り、素材へ差し替えられる口を残しておくことができます

公開デモ

「VOID LANCER」のデモは、次のリンクから開くことができます。

デモを開く

ほかのゲームデモは、次の記事でまとめてご紹介しています。

まとめ

「VOID LANCER」は、Claude CodeにBlenderを操作させてモデルを作り、Three.jsでゲームに仕上げた、ブラウザの3Dレールシューティングです。「まずは検討して」から始め、自機、敵、ボス、オートプレイ、スマホ対応、公開と、1つずつ指示を重ねました。人が操作しなくても進むオートプレイを早めに作ったことで、テストと調整を、効率よく進めることができました。