LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@opensource(白井 陽介)

【AI駆動開発】v0でクソゲーを作ってしまった…

Posted at

こんにちは、物理が大好きなエンジニアです。最近、空き時間にVercelのv0と生成AIを活用したAI駆動開発で「Kuso Physics」というオープンソースの物理演算ベースの3Dパズルゲームを作りました。「クソゲー」と名付けましたが、実は本気で作り込んだ作品です！今回は、生成AIによる開発効率化とv0の活用方法、そしてオープンソースで物理演算を取り入れたWebゲーム開発の過程について共有したいと思います。

👉 GitHub リポジトリ
👉 デモプレイはこちら

image.png

Kuso Physicsとは

Kuso Physicsは、物理法則を活用した3Dパズルゲームです。プレイヤーは重力、摩擦、運動量などの実世界の物理概念を応用して、ボールを目的地まで誘導します。このクソゲーの特徴は、デバイスを振ったり（Shake Mode）、マウスを素早く動かしたりすることで、ボールに力を加えられる点です。

物理演算の正確さと、パズルゲームとしての面白さを両立させることに注力しました。

技術スタックと生成AIによる開発アプローチ

Kuso Physicsの開発にあたって採用した技術スタックは以下の通りです：

Next.jsを選んだ理由は、モダンなWeb開発環境と高速なパフォーマンスを両立できるためです。また、Vercelが提供するv0と生成AIを活用することで、AI駆動開発のワークフローを確立しました。この生成AIとの協働により、コーディング効率が向上し、創造的な問題解決に集中できました。

GitHub Pagesで簡単に公開できるようにビルド設定を最適化したことで、このクソゲーは誰でも簡単にアクセスできます。

開発の裏側：生成AIとv0による効率化

1. v0と生成AIによる開発ワークフロー

Vercelが提供するv0を開発プロセスに組み込むことで、生成AIと協働する新しい開発スタイルを試みました。v0は特にUI/UXコンポーネントの生成やバグ修正のサジェストで活躍しました。

// v0がサジェストしたコンポーネント例
const PhysicsControl = ({ onStart, onReset, shakeIntensity, setShakeIntensity }) => {
  return (
    <div className="physics-controls">
      <button onClick={onStart} className="start-button">
        Start Simulation
      </button>
      <button onClick={onReset} className="reset-button">
        Reset
      </button>
      <div className="shake-control">
        <label>Shake Intensity:</label>
        <input 
          type="range" 
          min="0" 
          max="10" 
          value={shakeIntensity} 
          onChange={(e) => setShakeIntensity(Number(e.target.value))} 
        />
      </div>
    </div>
  );
};

生成AIとのペアプログラミングにより、物理演算の複雑な実装も短時間で完成させることができました。AI駆動開発の本質は、AIの生成能力と人間の創造性を組み合わせることにあります。

2. 物理エンジンとの連携

3Dパズルゲームとしての魅力を高めるため、Matter.jsの物理エンジンとThree.jsの3Dレンダリングを組み合わせました。この実装でも、生成AIが多くのボイラープレートコードを生成し、開発効率を大幅に向上させました。

// 物理エンジンの初期化とThree.jsとの連携
// 生成AIによる開発で短時間で実装
const initPhysicsEngine = () => {
  const engine = Matter.Engine.create({
    enableSleeping: false,
    gravity: { x: 0, y: 1, scale: 0.001 }
  });
  
  // Three.jsシーンとの連携
  const updateScene = () => {
    objects.forEach(obj => {
      const physicsBody = physicsObjects.get(obj.id);
      if (physicsBody) {
        obj.position.x = physicsBody.position.x;
        obj.position.y = physicsBody.position.y;
        obj.rotation.z = physicsBody.angle;
      }
    });
    renderer.render(scene, camera);
  };
  
  Matter.Events.on(engine, 'afterUpdate', updateScene);
  
  return engine;
};

3. Shake Modeの実装

デバイスのモーションセンサーやマウス操作でボールに力を加える「Shake Mode」は、実装の中でも特に工夫した部分です。v0を活用してさまざまなデバイスでテストするシミュレーションコードも迅速に開発できました。

// デバイスの動きを検知してボールに力を加えるコード例
// 生成AIによる開発で最適化
window.addEventListener('devicemotion', (event) => {
  const acceleration = event.accelerationIncludingGravity;
  
  if (Math.abs(acceleration.x) > shakeThreshold || 
      Math.abs(acceleration.y) > shakeThreshold) {
    applyForceToObject(ball, {
      x: acceleration.x * forceMultiplier,
      y: acceleration.y * forceMultiplier
    });
  }
});

4. パズルゲームとしての設計

Kuso Physicsは単なる物理シミュレーションではなく、エンゲージメントを高める3Dパズルゲームとして設計しました。レベルデザインにはAIの提案も取り入れ、難易度曲線を最適化しています。

// AIが提案したレベルデータの例
{
  "id": "level-123",
  "name": "重力の谷",
  "objects": [
    {
      "type": "platform",
      "x": 100,
      "y": 200,
      "width": 300,
      "height": 20,
      "angle": 0.2,
      "material": "wood",
      "bounciness": 0.3
    },
    {
      "type": "obstacle",
      "shape": "circle",
      "x": 250,
      "y": 150,
      "radius": 30,
      "material": "metal"
    },
    // その他のオブジェクト...
  ],
  "startPosition": {"x": 50, "y": 50},
  "targetPosition": {"x": 400, "y": 300},
  "hints": ["物体の慣性を利用して坂を登ろう", "金属面での反射を活用"]
}

レベルエディターも実装し、ユーザーが自分だけのパズルを作成・共有できるようにしました。この機能により、Kuso Physicsのコミュニティ形成を促進しています。

生成AIを活用したオープンソース開発

Kuso Physicsは完全にオープンソースとして公開しています（AGPL-3.0ライセンス）。v0を活用した生成AI開発の成果を共有することで、コミュニティ全体の技術向上に貢献したいと考えています。

以下の手順で簡単にローカル環境で実行できます：

git clone https://github.com/KusoGames/Kuso-Physics.git
cd Kuso-Physics
npm install
npm run dev

GitHub Pagesでの自己ホスティングも簡単です。リポジトリをフォークした後、GitHub Actionsが自動的にビルドとデプロイを行います。あとはリポジトリの「Settings > Pages」からgh-pagesブランチを公開するだけです。

Vercelアカウントをお持ちの場合は、ワンクリックでデプロイすることも可能です。

生成AIとの共創で学んだこと

このプロジェクトを通して、特に生成AIとの協働開発について学んだことを共有します：

  1. 生成AIはクリエイティブな提案に優れている - v0は単なるコード生成だけでなく、ゲームデザインや物理パラメータのアイデアも提供
  2. AI駆動開発はプロトタイピングを加速する - 従来なら数日かかる実装が数時間で完了
  3. v0と生成AIによるペアプログラミングでバグを早期発見 - AIが潜在的な問題点を事前に指摘してくれることで、デバッグ時間が大幅に短縮

また、物理演算ゲームとしての観点からは：

  1. 物理演算のチューニングは奥が深い - 「正確な物理」と「面白いパズルゲーム性」のバランスが重要
  2. 3D表現と物理演算の組み合わせは没入感を高める - Three.jsとMatter.jsの連携により、よりリッチな体験を提供
  3. ユーザーフィードバックの価値 - テストプレイの段階で得られた意見が最終的な品質を大きく向上

今後の展望：AIとの共創

v0とAI駆動開発の可能性を更に追求するため、今後は以下の機能拡張を計画しています：

  1. AI生成レベルの導入 - プレイヤーの好みや過去のプレイパターンに基づいて、AIがパーソナライズされたパズルレベルを生成
  2. 物理学習要素の強化 - AIによる実際の物理法則の解説コンテンツを動的に生成
  3. マルチプレイヤー対戦モード - リアルタイム物理演算による対戦モードの実装
  4. v0を活用したUI/UXの継続的改善 - ユーザーフィードバックとAI分析に基づく最適化

まとめ：クソゲーを超えた物理パズル体験

「クソゲー」と名付けましたが、実はAI駆動開発とv0の力で本気で作った3D物理パズルゲーム「Kuso Physics」の開発記をお届けしました。Next.jsと現代のWebテクノロジーを駆使することで、インストール不要でありながら本格的な物理演算を楽しめるゲームが作れることを示せたと思います。

特にVercelが提供するv0を活用したAI駆動開発は、クリエイティブな作業と技術的な実装の両面で大きなブレークスルーをもたらしました。AIとの共創により、一人では実現困難だったアイデアも形にすることができました。

👉 デモをプレイ
👉 GitHubリポジトリ

なお、本記事もGoogle AI Proに部分的に助けてもらいながら執筆しています。AIとの共創はコード開発だけでなく、ドキュメント作成にも大きなメリットをもたらしてくれました。

AI駆動開発と物理演算の面白さを再発見できるゲーム体験を提供できれば幸いです。質問やフィードバックはGitHub Discussionsまでお願いします！

...
#AI駆動開発 #v0 #Vercel #Next.js #物理演算 #パズルゲーム #クソゲー #3Dゲーム

1
3
0

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
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?