はじめに
Grok3を活用してゲームを作成する手法が話題となっています。
今回はGrok3を活用したゲーム生成手法についてまとめてみます。
Grok3で作られたゲームの投稿
Portal3
2D Action Game
パックマン
GTA
Packman
SpaceInvador
プロンプト
気になるのはプロンプトですが、下記のような簡単なプロンプトでも、比較的、イメージ通りのものを作成することができます。
結果
試しにAR化も頼んでみたところ下記のように生成してくれました。
もっと正確にプロンプトを作るには下記のようなポストが参考になります。
**プロンプト: 兵士キャラクターを使用した 3D 迷路ゲーム デモの作成**
手続き的に生成された迷路と、スムーズな動きと適切な向きの兵士キャラクターを備えた Web ベースの 3D ゲーム デモを開発します。次の仕様に従ってください:
- **ライブラリと依存関係:**
- **Three.js (r128):** CDN 経由で Three.js (バージョン r128) を使用します (例: [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js))。
- **GLTFLoader:** [jsDelivr](https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js) から GLTFLoader を使用して 3D 兵士モデルを読み込みます。
- **OrbitControls:** [jsDelivr](https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js) の OrbitControls を使用してカメラ制御を実装します。
- **シーンの設定:**
- パースペクティブ カメラを使用して Three.js シーンを作成します。
- ブラウザー ウィンドウ全体をカバーするように WebGL レンダラーを設定します。
- シーンを適切に照らすために照明 (HemisphereLight や DirectionalLight など) を含めます。
- 兵士の位置や回転などのリアルタイム データを表示するデバッグ オーバーレイ (HTML 要素) を追加します。
- **迷路の生成:**
- 各セルのサイズが 4 単位の 16×16 グリッド迷路を構築します。
- 常に外側の境界セルを壁としてマークします。
- 壁のない中央の空き領域 (たとえば、両方の軸のセル 6～9) を確保します。
- 残りのセルに壁を 15% の確率でランダムに配置します。
- キャンバスを使用してプロシージャル テクスチャを作成します:
- **床テクスチャ:** 茶色の色調とグリッド ラインのテクスチャ。
- **壁テクスチャ:** 基本色とランダムなパターンのテクスチャ。
- **壁と衝突の設定:**
- 各壁セルについて、セルの寸法に一致するサイズのボックス ジオメトリ メッシュを作成し、シーンに追加します。
- 衝突検出を容易にするために、各壁の境界ボックスを計算します。
- 兵士の位置 (衝突半径を使用) が壁の境界ボックスと交差するかどうかをチェックして、衝突検出を実装します。
- **兵士のキャラクターとアニメーション:**
- GLTFLoader を使用して [https://threejs.org/examples/models/gltf/Soldier.glb](https://threejs.org/examples/models/gltf/Soldier.glb) から兵士モデルをロードします。
- 迷路の空き領域内で兵士のサイズを調整して配置します。
- 兵士の AnimationMixer を少なくとも 2 つのアクションで設定します:
- **アイドル アニメーション:** 移動キーが押されていないときに再生されます。
- **アニメーションの実行:** 兵士が移動しているときにアクティブになります。
- フェードインとフェードアウトのテクニックを使用して、アニメーション間をスムーズに切り替えます。
- **移動とコントロール:**
- 兵士を移動するための WASD キーボード コントロールを実装します。
- カメラの前方 (XZ 平面) と左のベクトルを使用して移動方向を計算します。
- **回転の修正:** 兵士が移動方向を向くようにするには、次の方法で角度を計算します:
const angle = Math.atan2(moveDirection.x, moveDirection.z);
soldier.rotation.y = angle + Math.PI;
この調整 (π の追加) は、キャラクターの正しい向きにとって重要です。
- OrbitControls ターゲットを更新して兵士を追跡し、キャラクターを画面の中央に保ちます。
- **レスポンシブ デザイン:**
- ウィンドウのサイズ変更イベントを処理して、カメラのアスペクト比とレンダラーのサイズを更新します。
- **アニメーション ループ:**
- 次のメイン アニメーション ループを作成します:
- AnimationMixer を更新します。
- 兵士の移動と衝突検出を処理します。
- デバッグ オーバーレイを更新します。
- シーンを継続的にレンダリングします。
すべてのファイルを一つのindex.htmlにまとめてください。