Vibe Coding Master : Racing Game

Vibe Coding Master : Racing Game

レーシングゲームは、ゲーム史上最も技術的な革新を牽引してきたジャンルの一つです。1976年のセガ「ロードレース」では、スプライトを使った疑似3D表現で奥行き感を演出し、1982年のナムコ「ポールポジション」では、リアルタイムでのスケーリングとローテーションによる本格的な3D風レース体験を実現しました。1992年のニンテンドー「スーパーマリオカート」は、レーシングゲームにアクション要素を融合させる革新的なアプローチで新たなサブジャンルを確立しました。1994年にリリースされたソニーの「リッジレーサー」は、ポリゴンベースの完全3Dレーシングゲームとして、その後のレーシングゲームの標準を築きました。

さまざまなゲームジャンルがある中で、大なり小なり、現実世界を模倣するために物理演算が利用されています。例えば、キャラクターがジャンプする動作には重力による落下がシミュレーションされ、大砲の弾が発射される場合には斜方投射の物理演算が利用されるなど、ゲームと物理演算は切っても切れない関係にあります。そして、レーシングゲームにおいては、車両の重心移動、タイヤと路面の摩擦、空気抵抗、サスペンションの挙動など、現実世界の複雑な力学を多く含んだジャンルといえます。

レーシングゲームにおける主要な物理要素

1. 車両の動力学

• エンジン力とトルク: アクセルペダルの入力を車の前進力に変換
• 摩擦力: タイヤと路面の接触による速度減衰とグリップ
• 空気抵抗: 高速時の現実的な減速効果

2. 車体の物理

• 重量と慣性: 車の質量による加速・減速の自然な挙動
• 重心とスタビリティ: カーブでの横転防止
• サスペンション: 路面の凹凸に対する車体の上下動

3. 衝突検出と応答

• 車両同士の衝突: 接触時の速度変化と方向転換
• 障害物との衝突: 壁やガードレールとの接触処理
• 地形との接触: 車輪が常に地面に接触している状態の維持

AIに依存するライブコーディングのメリットとして、複雑な計算式を知らなくても実装することができるという点が挙げられます。レーシングゲームの構築を通じて、こうしたメリットを体現することができます。

基本編：プロンプトでレーシングゲームを作ろう

1. 最初の一歩：シンプルな3Dレーシング

まずは、最もシンプルなプロンプトから始めてみましょう。

プロンプト例:

Three.jsを使って、3Dレーシングゲームを作ってください。
プレイヤーは車を運転してコースを周回します。
- 車は矢印キーで操作（前進・後退・左右回転）
- シンプルな楕円形のトラック
- 3人称視点（車の後ろからの視点）
- スピードメーターの表示
- ラップタイムの計測
- ゴールラインの通過判定

2. 物理演算の追加：リアルな車両挙動

基本的なゲームができたら、より現実的な車両の動きを実装していきます。
自動車物理を扱うことのできるライブラリはいくつか存在しており、下記のようなものが挙げられます。

Cannon.js

// 基本的な車両セットアップ例
const chassisBody = new CANNON.Body({ mass: 150 });
const vehicle = new CANNON.RaycastVehicle({
  chassisBody: chassisBody,
  indexRightAxis: 0,
  indexUpAxis: 1,
  indexForwardAxis: 2
});

Cannon.jsで実現できる要素:

• リアルな車両の加速・減速
• タイヤのグリップとスリップ効果
• 坂道での重力の影響
• カーブでの遠心力

Ammo.js（高度な物理）

• Bulletの物理エンジンをJavaScriptに移植
• より精密な車両シミュレーション
• 複雑な地形との相互作用

Rapier（新世代・高性能）

• WebAssemblyベースで高速
• モダンな物理演算
• メモリ効率が良い

今回はCannon.jsというライブラリを活用してみます。特にCannon.jsは下記のように車輪などを簡単に付け加えたりすることができます。

import * as CANNON from 'cannon-es';

// 車体の作成
const chassisBody = new CANNON.Body({ mass: 150 });
chassisBody.addShape(new CANNON.Box(new CANNON.Vec3(1, 0.5, 2)));

// 車両クラスのインスタンス化
const vehicle = new CANNON.RaycastVehicle({
  chassisBody: chassisBody,
  indexRightAxis: 0,    // X軸が右方向
  indexUpAxis: 1,       // Y軸が上方向  
  indexForwardAxis: 2   // Z軸が前方向
});

// ホイールの追加（たった数行で完了！）
const wheelOptions = {
  radius: 0.3,
  directionLocal: new CANNON.Vec3(0, -1, 0),
  suspensionStiffness: 30,
  suspensionRestLength: 0.3,
  maxSuspensionTravel: 0.3,
  dampingRelaxation: 2.3,
  dampingCompression: 4.3,
  maxSuspensionForce: 100000,
  rollInfluence: 0.01,
  axleLocal: new CANNON.Vec3(-1, 0, 0),
  chassisConnectionPointLocal: new CANNON.Vec3(-1, 0, 1),
  useCustomSlidingRotationalSpeed: true,
  customSlidingRotationalSpeed: -30
};

// 4つの車輪を追加
vehicle.addWheel(wheelOptions); // フロント左
vehicle.addWheel({...wheelOptions, chassisConnectionPointLocal: new CANNON.Vec3(1, 0, 1)}); // フロント右
vehicle.addWheel({...wheelOptions, chassisConnectionPointLocal: new CANNON.Vec3(-1, 0, -1)}); // リア左  
vehicle.addWheel({...wheelOptions, chassisConnectionPointLocal: new CANNON.Vec3(1, 0, -1)}); // リア右

車両の挙動を調整する主要パラメータ：

const wheelOptions = {
  suspensionStiffness: 30,        // 硬すぎると跳ねる、柔らかすぎると沈む
  dampingRelaxation: 2.3,         // サスペンションの減衰
  dampingCompression: 4.3,        // 圧縮時の減衰
  rollInfluence: 0.01,           // 車体のロール（傾き）
  customSlidingRotationalSpeed: -30 // タイヤの回転速度
};
// 理想的な値を見つけるのに時間がかかる

物理演算追加プロンプト例:

車両の物理演算をCannon.jsを使ってより現実的にしてください：
- 慣性の実装（急に止まらない、急に曲がらない）
- スピードに応じたハンドリングの変化
- ブレーキ機能の追加（スペースキー）
- タイヤの摩擦とドリフト現象
- 加速度に応じたエンジン音の変化

3. コースの複雑化とバリエーション

より挑戦的で面白いコースを作成します。

コースデザイン改良プロンプト例:

より複雑で面白いコースを作成してください：
- S字カーブと急カーブを含む本格的なサーキット
- 高低差のある立体的なコース（坂道、橋）
- チェックポイントシステム（正しい順序で通過）
- コース脇の装飾（観客席、木々、看板）
- 複数のコースから選択できる機能

環境効果の追加プロンプト例:

レース環境をより豊かにしてください：
- 昼・夜・夕方の時間帯設定
- 雨天時の路面状況変化（滑りやすさ）
- 風の影響（直線での追い風・向かい風）
- 動的な照明システム（ヘッドライト、街灯）
- 背景の動く雲と太陽の位置変化

4. 競争要素の導入

他の車両との競争要素を追加します。

AIカー追加プロンプト例:

コンピューター制御の対戦車を追加してください：
- 3〜5台のAIカーがコースを周回
- 各AIカーに異なる性能（最高速度、加速力、ハンドリング）
- AIカーはコースを正確に走行（最適なレーシングライン）
- プレイヤーカーとの追い抜き・競り合い
- 順位表示とリアルタイムランキング

応用編：本格的なレーシングシミュレーション

1. 高度な車両物理学

実車に近い精密な物理演算を実装します。

詳細な車両ダイナミクス

プロンプト例:

車両の物理挙動をより精密にシミュレートしてください：
- 重心の位置による挙動の変化
- 前輪・後輪それぞれの独立したグリップ計算
- オーバーステア・アンダーステアの再現
- ダウンフォースによる高速時のグリップ向上
- タイヤ温度によるグリップの変化
- 燃料消費による車重の変化

実装のポイント：

class VehiclePhysics {
  constructor() {
    this.mass = 1200; // kg
    this.centerOfGravity = { x: 0, y: 0.5, z: 0 };
    this.wheelbase = 2.5; // m
    this.trackWidth = 1.8; // m
    this.tireGrip = { front: 1.0, rear: 1.0 };
    this.downforce = 0.1;
  }
  
  updatePhysics(deltaTime, throttle, steering, brake) {
    // 重心移動の計算
    this.calculateWeightTransfer(throttle, brake, steering);
    
    // タイヤのグリップ計算
    this.updateTireForces();
    
    // 車両の運動方程式を解く
    this.integrateMotion(deltaTime);
  }
}

サスペンションシステム

プロンプト例:

リアルなサスペンションシステムを実装してください：
- 路面の凹凸に対する車体の上下動
- コーナリング時の車体ロール
- ブレーキング時のノーズダイブ
- 加速時のスクワット現象
- サスペンションの硬さ設定による挙動変化

2. 高度なAIシステム

人間らしい運転をするAIドライバーを実装します。

学習型AIドライバー

プロンプト例:

学習能力を持つAIドライバーを実装してください：
- レース中に最適なラインを学習
- プレイヤーの運転パターンを分析して対策
- ミスからの学習（コーナーでの失敗を次回に活かす）
- 異なる性格のAIドライバー（攻撃的、守備的、計算型）
- レース経験による実力向上システム

戦略的AI

プロンプト例:

レース戦略を考えるAIシステムを追加してください：
- 燃料戦略（ピットストップのタイミング）
- タイヤ戦略（ハード・ソフトタイヤの使い分け）
- 天候変化への対応（雨タイヤへの交換判断）
- オーバーテイクのタイミング計算
- DRS（可変リアウイング）の使用判断

3. リアルなレース環境

ピットストップシステム

プロンプト例:

本格的なピットストップシステムを実装してください：
- ピットレーンへの進入・退出
- タイヤ交換にかかる時間（3〜8秒）
- 燃料補給システム
- 車体の修理（衝突ダメージの回復）
- ピットクルーのアニメーション
- ピットストップ戦略がレース結果に与える影響

4. 車両カスタマイズシステム

詳細なセットアップ

プロンプト例:

車両の詳細なセットアップシステムを実装してください：
- エアロダイナミクス（ウイング角度、車高）
- サスペンション（硬さ、減衰力、車高）
- ギア比の調整（各ギアとファイナルレシオ）
- ブレーキバランス（前後の制動力配分）
- タイヤ空気圧の調整
- セットアップがラップタイムに与える影響の可視化

発展編：プロフェッショナルレーシングシミュレーター

1. マルチプレイヤーシステム

リアルタイム対戦

プロンプト例:

オンラインマルチプレイヤー機能を実装してください：
- 最大20人での同時レース
- ラグ補償と予測システム
- 衝突判定の同期処理
- チャット機能とボイスコミュニケーション
- 観戦モード（リプレイと実況機能）
- レース結果の保存と統計

2. VR対応と没入感の向上

VR最適化

プロンプト例:

VR（バーチャルリアリティ）対応を実装してください：
- VRヘッドセットでの360度視点
- コックピット内の詳細な計器類
- ハンドコントローラーでのステアリング操作
- モーションシックネス対策（テレポート移動オプション）
- VR専用のUI配置とメニューシステム
- ハプティックフィードバック（振動・力覚フィードバック）

3. 機械学習とデータ分析

運転スタイル分析

プロンプト例:

機械学習を使った運転分析システムを実装してください：
- プレイヤーの運転パターンの学習
- 弱点の特定と改善提案
- 理想的なライバルAIの自動生成
- 運転スタイルに応じた車両セットアップの推奨
- パフォーマンス予測システム
- 個人専用トレーニングプログラムの生成

4. ハードウェア連携

専用コントローラー対応

プロンプト例:

レーシングホイールとペダルセットに対応してください：
- フォースフィードバック対応ステアリング
- 独立したアクセル・ブレーキ・クラッチペダル
- Hシフトパターンとパドルシフト
- ハンドブレーキレバー
- 複数ボタンの機能割り当て
- デバイス設定の保存とプロファイル管理

AIナビゲーションシステム：ナビゲーションメッシュの活用

レーシングゲームにおけるAIドライバーをより賢く動作させるために、ナビゲーションメッシュ（NavMesh）の概念を活用することができます。

ナビゲーションメッシュの基本概念

ナビゲーションメッシュ（NavMesh）は、ゲームやAIにおいてキャラクターや物体が移動可能な領域を表現する3D空間の分割方法です。

簡単に言うと

• 3D空間を「走行可能な場所」と「走行不可能な場所」に分けた地図
• 三角形や多角形の集合体で移動可能エリアを表現
• AIドライバーが「どのルートを通って目的地に向かえばいいか」を判断するためのガイド

視覚的なイメージ

コース面を三角形に分割：
   A ────── B
   │＼      │
   │  ＼    │  ← この三角形内は走行可能
   │    ＼  │
   C ────── D

ナビゲーションメッシュの構造

メッシュの要素

• ノード（頂点）: 三角形の角の点
• エッジ（辺）: 隣接する走行可能エリア間の境界線
• フェイス（面）: 実際に走行できる三角形領域

接続情報

// 簡略化した例
const navMesh = {
  triangle1: {
    vertices: [A, B, C],
    neighbors: [triangle2, triangle5], // 隣接する三角形
    drivable: true
  },
  triangle2: {
    vertices: [B, C, D],
    neighbors: [triangle1, triangle3],
    drivable: true
  }
};

主な用途と解決する問題

1. パスファインディング（経路探索）

問題: AIドライバーが障害物を避けて目的地まで行きたい
解決: A*アルゴリズムなどを使って最短・最適経路を計算

2. 衝突回避

問題: AIカーが壁や障害物にぶつからないようにしたい
解決: 走行可能領域内でのみ移動を許可

3. 群衆シミュレーション

問題: 複数のAIカーが同じコースで自然に走行したい
解決: 各AIドライバーが共通のナビメッシュを参照して協調走行

レースゲームでの応用

AIドライバー

• コースの最適ライン計算: レーシングラインを事前定義
• 追い越し経路: 他車を避ける代替ルート
• 障害物回避: クラッシュした車両やデブリを避ける

実装例

// レースコース用のナビメッシュ
const raceTrackNavMesh = {
  mainLine: [...], // メインのレーシングライン
  overtakingZones: [...], // 追い越し可能エリア
  pitLane: [...], // ピットレーン
  runoffAreas: [...] // エスケープゾーン
};

ナビゲーションメッシュは、AIドライバーに「知能」を与える基盤技術の一つです。レースゲームでより賢いAIドライバーを作りたい場合、コースレイアウトに基づいたナビメッシュの設計が重要になります。

https://zenn.dev/oggata/books/612325bc050fae