Vibe Eyes Client

Vibe Eyes Clientは、ブラウザゲームをVibe Eyes MCPデバッグサーバーに統合し、リアルタイムデバッグ、可視化、分析機能を実現するための軽量クライアントライブラリです。

開発者ツールゲームとゲーム化 #ゲームデバッグ #リアルタイム可視化 #エラー監視 #SVG表示 .JavaScript

rating : 2.5 points

downloads : 18

update time : 2025-04-28

概要

Vibe Eyes MCP デバッグサーバーは、ブラウザゲーム向けに設計されたツールで、開発者がゲームの実行状態をリアルタイムで監視および分析するのを支援します。キャンバス内容、ネットワーク要求データ、ログ情報をキャプチャすることで、豊富なデバッグ機能を提供し、開発効率を向上させます。

主な特徴

多プラットフォーム（Webとモバイル）へのデプロイをサポート、低リソース消費、プラグイン拡張機構、詳細なデバッグ情報記録。

適用シーン

ブラウザゲームの開発テスト、パフォーマンス最適化、エラー調査などのシーンに適しており、特にリアルタイム監視が必要なゲームプロジェクトに最適です。

キャンバスキャプチャ機能キャンバス内容のリアルタイムキャプチャをサポートし、ネットワークを通じてデバッグサーバーに送信して可視化表示します。

ネットワーク要求追跡ゲーム内のすべてのネットワーク要求（HTTPおよびWebSocket通信を含む）を監視し、パフォーマンスのボトルネックを分析するのに役立ちます。

ログ分析機能ゲーム実行中のログ情報を収集して表示し、フィルタリング、検索、高度な分析をサポートします。

基本的な統合

デバッグウィンドウの設定

基本的な統合例プロジェクトでVibe Eyesを基本的に統合する方法を示します。

カスタムデバッグウィンドウの例デバッグウィンドウをゲーム画面の左側に表示し、幅を設定します。

Vibe Eyesはすべてのブラウザゲームをサポートしていますか？

デバッグサーバーが実行されていない場合、どのように処理されますか？

パフォーマンスを最適化するために、リソース消費をどのように管理すればよいですか？

🚀 Vibe Eyes クライアント

軽量級のクライアントライブラリで、ブラウザゲームを Vibe Eyes デバッグサーバーとリアルタイムでデバッグ、可視化、分析を統合することができます。

これにより、AI が処理中のゲームをリアルタイムで「見る」ことが可能になります！

🚀 クイックスタート

Vibe Eyes クライアントは、ブラウザゲームと Vibe Eyes デバッグサーバーをリアルタイムで統合するための軽量級なクライアントライブラリです。これにより、AI がゲームをリアルタイムで「見る」ことができます。

✨ 主な機能

自動的なキャンバススクリーンショットのキャプチャとストリーミング
タイムスタンプ付きのコンソールログとエラーの収集
グローバルエラーと未処理のプロミス拒否の処理
専用のデバッグウィンドウでの SVG 可視化の表示
SVG サイズ測定を含む完全なデバッグ統計情報
ゲーム性能への影響を最小限に抑える
堅牢なエラー処理とエレガントな接続回復
複数のビルド形式（UMD、ESM、IIFE）

1.1.0 の新機能

切断時の SVG 表示：デバッグウィンドウは、サーバーに接続されていない場合でも動作するようになりました。
リアルタイム接続状態の可視化：接続状態をリアルタイムで表示し、視覚的なフィードバックを提供します。
スマートウィンドウ配置：デバッグウィンドウをゲームウィンドウに対して配置（右、左、上、下）します。
レスポンシブなデフォルト値：デバッグウィンドウのサイズは、デフォルトでゲームウィンドウのサイズの 75% に設定されます。
改善されたエラー処理：ウィンドウの閉じる操作や再接続シナリオをより適切に処理します。

📦 インストール

npm install vibe-eyes-client

または、HTML ファイルに直接以下のスクリプトを追加することもできます。

<script src="https://unpkg.com/vibe-eyes-client/dist/vibe-eyes.min.js"></script>

💻 使用例

基本的な使用法

// デフォルト設定で初期化（サーバーに自動接続）
// （null = 自動検出）
// （コンテナが null の場合、ポップアップウィンドウを作成）

VibeEyes.init({
  // 設定オプション
});

// イベントを監視
VibeEyes.on('message', (msg) => {
  console.log('メッセージを受信:', msg);
});

高度な使用法

VibeEyes.init({
  serverUrl: 'http://localhost:3000', // カスタムサーバー URL
  debugMode: true, // デバッグモードを有効にする
  container: '#debug-container' // カスタムコンテナ要素を使用
});

📚 ドキュメント

一般的なオプション

属性	詳細
serverUrl	サーバーの URL アドレス（デフォルト：`http://localhost:3000`）
debugMode	デバッグモードを有効にするかどうか（デフォルト：`false`）
container	カスタムコンテナのセレクタまたは要素（デフォルト：`null`、自動的にポップアップウィンドウを作成）

ネットワークオプション

属性	詳細
reconnectInterval	切断後の再接続間隔（ミリ秒単位、デフォルト：`3000`）
maxRetries	最大リトライ回数（デフォルト：`5`）

可視化オプション

属性	詳細
theme	SVG のテーマカラー（デフォルト：`light`、オプション：`dark`）
fontFamily	テキストのフォントファミリー（デフォルト：`Arial`）
fontSize	テキストのサイズ（ピクセル単位、デフォルト：`14`）

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <script src="vibe-eyes.min.js"></script>
</head>
<body>
  <div id="debug-container"></div>
  <script>
    VibeEyes.init({
      serverUrl: 'http://localhost:3000',
      debugMode: true,
      container: '#debug-container'
    });
  </script>
</body>
</html>