MCPゲーム

インタラクティブな要素を備えた仮想ハウス環境を備えた、Node.js バックエンドを備えたマルチプレイヤー コントロール パネル ゲーム。

特徴

• 屋外環境を備えた没入型の一人称3D仮想住宅

• 内装と外装の特徴を備えた美しく細部までこだわった家

• 家に出入りするためのインタラクティブなドア

• 木々、植物、装飾的な要素を備えた庭園エリア

• 画像生成機能を備えたインタラクティブテレビ

• MCPシステムにアクセスするためのコンピュータ端末

• リアルな動きと衝突検出

• リアルタイムサーバー通信

Related MCP server: Room MCP

設定

1. 依存関係をインストールします:

npm install

2. サーバーを実行します。

npm start

または、自動再起動による開発の場合:

npm run dev

サーバーはポート 3002 で起動します。

ゲームコントロール

• 移動：WASDキー

• 見回す：マウスの動き（ゲームをクリックして有効にします）

• インタラクト: インタラクティブオブジェクトの近くでENTERキーを押します

• 終了インターフェース: ESCキー

• マウスロックの終了: ESCキー

インタラクティブ要素

屋外環境

• 木々や花壇のある地形を探索する

• 家の入り口までの道を進む

• 家の出入りにはドアの近くでENTERを押してください

テレビシステム

• テレビに近づいてENTERを押してリモコンにアクセスします

• テレビ画面に表示される画像を生成する

• ターミナルインターフェースで画像生成のプロンプトを入力します

MCPターミナル

• コンピューターデスクを見つけてENTERキーを押してターミナルにアクセスします

• MCPシステムにコマンドを送信する

• さまざまな仮想ツール（電子メール、Web 検索など）にアクセスします

技術的な詳細

• 3Dレンダリング用にThree.jsで構築

• ポインターロックコントロールを備えた一人称カメラ

• 手続き的に配置された木々のある屋外環境

• バックエンド通信用の Express.js サーバー

• 画像生成用のキャンバスライブラリ

• サーバー通信用のRESTful API

MCP ゲームイメージシステム

このドキュメントでは、MCP ゲームで画像表示システムがどのように機能するかについて説明します。

概要

システムはserver/openai-server/public/imageディレクトリにある既存の画像をバーチャルハウス内のテレビに表示します。以前は新しい画像を生成することで 500 Internal Server エラーが発生していましたが、現在は指定されたディレクトリに既存の画像があるかどうかをチェックするようになりました。

仕組み

1. 仮想ハウス内のテレビにはserver/openai-server/public/imageディレクトリにある画像が表示されます。

2. システムは 10 秒ごとに新しい画像をチェックします。

3. ユーザーがテレビのリモート インターフェイスを通じて新しい画像を要求すると、システムはディレクトリからランダムに画像を選択します。

新しい画像の追加

テレビに新しい画像を追加するには:

1. 画像ファイル (jpg、jpeg、png、gif、webp) をserver/openai-server/public/imageディレクトリに配置します。

2. システムはそれらを自動的に検出して表示します。

3. ファイルは Web 表示に適したサイズである必要があります (推奨: 800 x 450 ピクセル)。

使用法

1. 仮想ハウス内のテレビに近づきます。

2. Enter キーを押して、テレビのリモコン インターフェイスにアクセスします。

3. 画像の表示に関連するコマンドを入力します。

4. システムはディレクトリ内の利用可能な画像の中から 1 つを選択して表示します。

トラブルシューティング

• 画像が表示されない場合は、 server/openai-server/public/imageディレクトリが存在し、画像ファイルが含まれているかどうかを確認してください。

• サーバーが正しいポート (デフォルト: 3002) で実行されていることを確認します。

• ブラウザ コンソールで画像の読み込みに関連するエラー メッセージを確認します。

技術的な詳細

• システムは画像を直接生成しなくなり、500 内部サーバー エラーを回避します。

• 画像はリクエスト時にディレクトリからランダムに選択されます。

• 画像が利用できない場合、システムは適切なフィードバックを提供します。

MCPバックエンドサーバーに接続しています

MCPGame は外部の MCP バックエンド サーバーに接続して、端末とテレビのやり取りに高度な AI 機能を有効にできます。

構成

1. main.jsファイルを開き、上部にある構成セクションを見つけます。

// --- Configuration ---
const MCP_BACKEND_URL = 'http://localhost:3001'; // MCP Terminal backend connection
const IMAGE_SERVER_URL = 'http://localhost:3002'; // Image server connection

2. MCP_BACKEND_URLを更新して、MCP バックエンド サーバーを指すようにします。

   • ローカル開発の場合: http://localhost:PORT (PORT をバックエンドのポートに置き換えてください)

   • 本番環境の場合: デプロイしたバックエンド サーバーの完全な URL を使用します。

必要なAPIエンドポイント

MCP バックエンド サーバーは、次のエンドポイントを実装する必要があります。

1. GET /api/status - MCPシステムのステータスを返します

2. POST /api/query - ユーザークエリを受け入れ、AI応答を返します

応答フォーマット

クエリ エンドポイントは次の形式で JSON を返す必要があります。

{
  "response": "Text to display in the terminal",
  "spokenResponse": "Optional text for voice synthesis" 
}

接続のテスト

1. MCPバックエンドサーバーを起動する

2. MCPGameサーバーを起動します（ node server.js ）

3. ブラウザでゲームを開く

4. 仮想ハウス内のコンピュータ端末を操作する

5. ターミナルを使用すると、ゲームはMCPバックエンドサーバーに接続します。