Gemini 3.1 Proで完全な3D Snow Bros風プラットフォーマーゲームを構築

単一のプロンプトから構築された、プレイ可能な 3D ゲーム

ゲーム開発は、最も技術的要求の高い創造分野のひとつです。物理演算、レンダリング、AI、状態管理、UI がすべて単一のコードベースで連携する必要があります。このワークフローは、十分に詳細なプロンプトと Gemini 3.1 Pro Preview があれば、Eigent が手作業のコードを 1 行も書かずに、仕様策定から実装、そして完全にプレイ可能な複数ファイルのブラウザゲームの提供まで行えることを示しています。

1Gemini 3.1 Pro Preview を設定する

このワークフローは、録画時点で Google の最も高性能なモデルである Gemini 3.1 Pro Preview 上で動作します。Eigent で設定するには、設定 → モデル → カスタムモデル に移動します。

• API Host: https://generativelanguage.googleapis.com/v1beta/openai/
• Model: gemini-3.1-pro-preview

Eigent は複数のカスタムモデルを同時にサポートしています。Gemini、OpenAI、Anthropic、Qwen、Deepseek、MiniMax などをすべて同時に設定でき、1 つをアクティブなデフォルトとして指定できます。

2ゲーム設計プロンプト

詳細なプロンプトは、詳細な結果を生みます。今回のプロンプトは、メカニクス、ビジュアルスタイル、スコア、特別イベント、さらには特定の収集シーケンスまで指定しています。

プロンプトで挙げられたすべてのメカニクスが、出力に実装されています。

3Eigent がビルドを計画し、実行する

Eigent は Developer Agent に対して 1 つのタスクを作成します。

Developer Agent は Terminal & Shell ツールに加え、Web Deployment と Screen Capture の機能を使って、すべてのゲームファイルをワークスペースフォルダに直接書き込みます。

43 つのファイルで完成する 1 つのゲーム

出力は、相互依存する 3 つのファイルです。

• index.html — エントリーポイントとゲームコンテナ
• game.js — すべてのゲームロジック: Three.js レンダリングパイプライン、物理演算、敵 AI 状態マシン、弾丸システム、連鎖反応検出、ボーナスドロップロジック、スコア管理、ライフ管理、SNOW 文字の収集シーケンス
• style.css — キャンバスのサイズ設定、UI オーバーレイ、HUD スタイリング

Three.js レンダラーは、パララックス深度を持つ層状の 3D 環境を構築します。背景には雪山、中景にはプラットフォーム、前景には地形があり、すべてがプロシージャルなキャンバス要素と滑らかなアニメーションで表現されています。

5完成したゲームの見た目

任意のモダンブラウザで index.html を開くと、完全にプレイ可能なプラットフォーマーが表示されます。

• HUD: スコアカウンター、ウェーブカウンター、ライフ表示、S-N-O-W 文字の進行バー
• プレイヤー操作: 左右移動、ジャンプ、雪の弾の発射
• 敵のメカニクス: 段階的な凍結状態、キックで転がす操作、雪だるまが複数の敵に当たったときの連鎖反応
• ボーナスシステム: 単一の雪だるまで全滅させた場合に 10,000 点ボーナスをドロップ
• ビジュアルスタイル: 3D の層状の雪山背景、Mario 風のレベルデザイン、滑らかなパララックススクロール

初回読み込み時のツールチップ: "Freeze enemies with Z. Kick fully frozen snowballs!"

使用トークン総数: 約 147,000 — この規模の複数ファイルゲームとしては効率的です。

6AI 支援ゲーム開発について何を示しているか

Snow Bros のメカニクス — 凍結、キック、連鎖 — には、相互依存するゲーム状態を実装する必要があります。敵は未凍結、部分凍結、完全凍結のいずれかであり、特定の状態でのみ転がせる雪だるまへ移行します。連鎖反応ロジックには、転がる雪だるまと他の敵との衝突判定が必要です。これらは簡単な実装ではありません。

Gemini 3.1 Pro がゲーム全体の仕様をコンテキスト内に保持し、複数ファイルにまたがる整合性のある相互依存 JavaScript を生成できることが、この実現を可能にしています。結果はテンプレートではなく、説明されたメカニクスを正確に実装したカスタム実装です。

7次に試すこと

8より良い結果を得るためのヒント

• メカニクスを正確に指定する。 freeze → kick → chain reaction のメカニクスが機能したのは、各状態遷移がプロンプト内で明示的に説明されていたからです。「クールな敵の相互作用」のような曖昧な表現では、もっと単純な結果になります。

• 使用する技術を明記する。 3D レンダリングに「Three.js」、構成に「pure HTML/CSS/JS, no libraries」を指定すると、Eigent に明確な実装制約が与えられます。これらがないと、エージェントはタスクごとに異なる、場合によっては互換性のないアプローチを選ぶ可能性があります。

• 反復前にブラウザ上で確認する。 Eigent がファイルを出力したら、すぐに index.html を開いてコアのメカニクスループをテストしてください。この段階では、すべてを最初から細かく指定するよりも、狙いを絞った追加プロンプトで軌道修正する方が早く進められます。