游戏调试客户端库

一个轻量级的客户端库,用于将浏览器游戏与Vibe Eyes MCP调试服务器集成,实现实时调试、可视化和分析。

  • by monteslu
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 monteslu/vibe-eyes-client

使用说明

Vibe Eyes客户端

一个轻量级的客户端库,将浏览器游戏与 Vibe Eyes MCP调试服务器 用于实时调试、可视化和分析。

这使得AI能够实时查看它正在开发的游戏!

特性

  • 自动画布截图捕获和流式传输
  • 控制台日志和带有时间戳的错误收集
  • 全局错误和未处理的promise拒绝处理
  • 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>

用法

基本集成

// Initialize with default settings (auto-connects to http://localhost:8869)
// Available globally when using the script tag
// The client will automatically start capturing once connected
initializeVibeEyes();

// Or use the existing client instance directly
window.VibeEyesClient.initialize();

自定义配置

// Initialize with custom settings (when included via script tag)
initializeVibeEyes({
  serverUrl: 'http://your-debug-server:8869',
  captureDelay: 2000,   // Screenshot every 2 seconds
  maxLogs: 50,          // Store more logs
  canvasId: 'my-canvas' // Specific canvas to capture
});

// Or when using as a module
import { initializeVibeEyes } from 'vibe-eyes-client';

initializeVibeEyes({
  serverUrl: 'http://your-debug-server:8869',
  captureDelay: 2000,
  canvasId: 'game-canvas'
});

手动控制

// Get the client instance
const client = window.VibeEyesClient;

// Explicitly stop/restart capturing if needed
client.stopCaptureLoop();
client.startCaptureLoop();

显示SVG可视化

Vibe Eyes MCP服务器发回SVG可视化,您可以在专用调试窗口中显示:

// Get the client from initialization
const client = initializeVibeEyes();

// Enable SVG display - opens a new debug window with SVG and stats
client.enableSvgDisplay();

// You can optionally provide a custom container
client.enableSvgDisplay({
  container: '#my-custom-container' // Optional existing container element
});

// Configure the debug window position and size (all options are optional)
const client = initializeVibeEyes({
  serverUrl: 'http://localhost:8869',
  debugWindow: {
    // All debugWindow properties are optional with sensible defaults
    width: 500,                // Optional: Width in pixels (default: 75% of game window width)
    height: 600,               // Optional: Height in pixels (default: 75% of game window height)
    position: 'right'          // Optional: Position relative to game window (default: 'right')
    // Possible positions: 'right', 'left', 'top', 'bottom', 'detached'
  }
});

// Toggle the display on/off
client.toggleSvgDisplay();

// Disable the display (closes the debug window)
client.disableSvgDisplay();

调试窗口显示:

  • 顶部的SVG可视化
  • 底部有完整的响应统计数据,包括SVG大小
  • 当新数据从服务器到达时实时更新

配置选项

所有配置选项都是可选的,并具有合理的默认值。

客户端初始化选项

选项 默认值 描述
服务器URL 'http://localhost:8869' Vibe Eyes MCP服务器的URL
捕获延迟 1000 捕获之间的毫秒
maxLogs 10 最大存储控制台日志
maxErrors 10 最大存储错误日志数
autoConnect true 初始化时连接
canvasId null 要捕获的特定画布的ID(null=自动检测)
debugWindow 对象 调试窗口的配置(见下文)

SVG显示选项

选项 默认值 描述
container null SVG容器的元素或选择器(如果为null,则创建弹出窗口)

调试窗口选项

选项 默认值 描述
width null 调试窗口的宽度(像素)(null=游戏窗口宽度的75%)
height null 调试窗口的高度(以像素为单位)(null=游戏窗口高度的75%)
position “right” 相对于游戏窗口的位置:“right”、“left”、“top”、“bottom”或“detached”

构建格式

以下构建格式在 dist/ 目录:

  • vibe-eyes.min.js -针对大多数用例的小型UMD构建
  • vibe-eyes.js -用于调试的未缩小UMD构建
  • vibe-eyes.iife.js -IIFE构建,带有全局变量,可直接用于浏览器
  • vibe-eyes.esm.js -ES模块适用于现代捆扎机和环境

相关项目

许可证

国际协调委员会