この記事では、Architects of Chaos の技術的な詳細を掘り下げます。これは、物理ベースのビルドゲームで、2つのAIエージェントが最も高く、かつ最も安定した構造物を作るために競い合います。
The Concept
基本となる発想は、物理ベースのシミュレーションと、戦略的なAIの意思決定を組み合わせたゲームを作ることでした。さまざまな建築思想（安定性 vs. 高さ）がどのように相互に、そして予測不能な環境上の課題に対して優劣を競うのかを見たかったのです。
The Tech Stack
- React 18+: UIと状態管理のために使用。
- Matter.js: Web向けの2D物理エンジン。すべての衝突、重力、制約を扱います。
- Tailwind CSS: モダンでレスポンシブな見た目とレイアウトのために使用。
- Motion (Framer Motion): 滑らかなUIアニメーションとトランジションのために使用。
- Lucide React: 一貫性のあるクリーンなアイコンセットのために使用。
Architecture: Syncing React and Matter.js
最大の技術的課題は、Reactの状態とMatter.jsの物理エンジンを同期させ続けることでした。GameCanvas.tsx の中の useEffect フック内に、中央のゲームループを用意しました。
The Game Loop
ゲームループの役割は次のとおりです:
- 物理の更新: Matter.jsエンジンをステップ実行します。
- 指標の計算: 各エージェントの構造物の高さと安定性を求めます。
- フェーズ管理: エージェントのターン間の移行、落ち着くフェーズ、そして環境イベントの処理を行います。
// GameCanvas.tsx における簡略化したゲームループ
useEffect(() => {
const runner = Matter.Runner.create();
Matter.Runner.run(runner, engineRef.current);
const updateLoop = setInterval(() => {
if (gameState.isPaused) return;
// 指標を計算
updateAgentMetrics(agentA, setAgentA);
updateAgentMetrics(agentB, setAgentB);
// フェーズ管理
if (gameState.phase === 'SETTLING') {
// すべてのボディが落ち着いたか確認
const allSettled = bodies.every(b => b.speed < 0.1);
if (allSettled) {
// 次のフェーズへ移行
}
}
}, 100);
return () => {
Matter.Runner.stop(runner);
clearInterval(updateLoop);
};
}, [gameState.isPaused, gameState.phase]);
Real-Time Stability Metrics
このゲームの最も魅力的な機能の1つが、Real-Time Stability Gauge（リアルタイム安定度ゲージ） です。単純な高さトラッカーとは異なり、このゲージは構造の健全性をその場で計算します。
物理的な特性をいくつか考慮しています:
- 重心オフセット: 構造物の質量が、その土台の中心からどれだけ離れているか。
- 構造の傾き: タワーの水平なずれ。
- リアルタイム速度: ブロックがまだ動いていたり振動していたりすると、安定性は低下します。
- アスペクト比: 幅のある「塊」は、細い「タワー」より自然に安定しやすく、ゲージはこの建築的な現実を反映します。
安定性が30%を下回ると、ゲージはCRITICAL（重大） 状態に入り、差し迫った崩壊をプレイヤーに警告するため赤く点滅します。
AI Agents: Strategy vs. Ambition
AIエージェントである Fortress Architect と High-Rise Maverick は、それぞれ src/logic/ai.ts に実装された異なる建築戦略を持っています。
- Fortress Architect: 幅広い土台と安定性を優先します。
- High-Rise Maverick: 最大の高さを得るために、ブロックを縦に積み上げることに注力します。
// Fortress Architect の例: AIロジック
export function getAgentAMove(agentBodies: Matter.Body[], plotRange: [number, number], round: number, difficulty: Difficulty): BlockPlacement {
// ...既存の質量の中心付近に安定した場所を見つけるためのロジック...
const avgX = agentBodies.reduce((acc, b) => acc + b.position.x, 0) / agentBodies.length;
let x = avgX + (Math.random() - 0.5) * jitter;
// ブロックがプロット範囲内に収まるようにする
x = Math.max(plotRange[0] + halfWidth, Math.min(plotRange[1] - halfWidth, x));
return { type, x, rotation };
}
️ 環境上の課題: 混沌の追加
ゲームをよりダイナミックにするために、滑りやすい地面、地震、嵐といった環境上の課題を導入しました。これらの効果はランダムに発動され、選択した難易度に応じて強度が増します。
- 滑りやすい地面: すべてのブロックに対して、一時的に摩擦を低下させます。
- 地震: すべてのブロックに対して、短時間の垂直方向の力を加えます。
- 嵐: 重力と力をランダム化する、最後の高強度フェーズです。
Architects of Chaos（混沌の建築家たち）では、物理ベースのシミュレーションをReactアプリケーションに統合して、魅力的で予測不能なゲームプレイを作り出せることを示しています。戦略的なAIとダイナミックな環境効果を組み合わせることで、プレイして楽しく、かつ技術的にも面白いゲームを実現しました。
完全なソースコードはGitHubで確認してください。
