星战科技xingzhan.cloud
返回市场
脉动视界客户端

脉动视界客户端

作者：monteslu2 星标更新：2025-03-24
安装使用来源：spider==github.com

项目介绍

Vibe Eyes 客户端

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

这使得AI能够在实时状态下“看到”它正在处理的游戏！

<img src="happy.jpg" alt="笑脸" width="50%">

特性

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

使用方法

基本集成

// 使用默认设置初始化（自动连接到http://localhost:8869）
// 当使用script标签时，全局可用
// 客户端连接后会自动开始捕获
initializeVibeEyes();

// 或者直接使用现有的客户端实例
window.VibeEyesClient.initialize();

自定义配置

// 使用自定义设置初始化（通过script标签包含）
initializeVibeEyes({
  serverUrl: 'http://your-debug-server:8869',
  captureDelay: 2000,   // 每2秒截取一次图
  maxLogs: 50,          // 存储更多的日志
  canvasId: 'my-canvas' // 指定要捕获的canvas
});

// 或者作为模块使用
import { initializeVibeEyes } from 'vibe-eyes-client';

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

手动控制

// 获取客户端实例
const client = window.VibeEyesClient;

// 显式停止/重启捕获（如有需要）
client.stopCaptureLoop();
client.startCaptureLoop();

显示SVG可视化

Vibe Eyes MCP服务器返回SVG可视化，可以在专用调试窗口中显示：

// 从初始化获取客户端
const client = initializeVibeEyes();

// 启用SVG显示 - 打开一个新的调试窗口，显示SVG和统计数据
client.enableSvgDisplay();

// 可以选择提供自定义容器
client.enableSvgDisplay({
  container: '#my-custom-container' // 可选的现有容器元素
});

// 配置调试窗口的位置和大小（所有选项都是可选的）
const client = initializeVibeEyes({
  serverUrl: 'http://localhost:8869',
  debugWindow: {
    // 所有debugWindow属性都有合理的默认值
    width: 500,                // 可选：宽度（像素，默认：游戏窗口宽度的75%）
    height: 600,               // 可选：高度（像素，默认：游戏窗口高度的75%）
    position: 'right'          // 可选：相对于游戏窗口的位置（默认：'right'）
    // 可能的位置：'right', 'left', 'top', 'bottom', 'detached'
  }
});

// 切换显示开关
client.toggleSvgDisplay();

// 禁用显示（关闭调试窗口）
client.disableSvgDisplay();

调试窗口显示：

  • 顶部是SVG可视化
  • 底部是完整的响应统计数据，包括SVG尺寸
  • 实时更新，随着新数据从服务器到达而更新

配置选项

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

客户端初始化选项

选项默认值描述
serverUrl'http://localhost:8869'Vibe Eyes MCP服务器的URL
captureDelay1000捕获之间的毫秒数
maxLogs10最多存储的日志数量
maxErrors10最多存储的错误日志数量
autoConnecttrue初始化时连接
canvasIdnull要捕获的具体canvas的ID（null=自动检测）
debugWindow对象调试窗口的配置（见下文）

SVG显示选项

选项默认值描述
containernullSVG容器的元素或选择器（如果为null，则创建弹出窗口）

调试窗口选项

选项默认值描述
widthnull调试窗口的宽度（像素，默认：游戏窗口宽度的75%）
heightnull调试窗口的高度（像素，默认：游戏窗口高度的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模块

相关项目

许可证

ISC