暂未发布 敬请期待 (开发进度:30%)

Web版 BehaviorTree.CPP 可视化编辑与调试工具

项目简介

BT Web Studio 是一款专为 BehaviorTree.CPP 行为树库设计的在线可视化编辑器和调试工具。它提供直观、高效、功能丰富的图形化界面，帮助开发者轻松构建、修改、分析和调试复杂的行为树。

本工具使用 React 和 ReactFlow 构建，支持将行为树导出为 BehaviorTree.CPP 兼容的 XML 格式，并能加载 XML 文件进行可视化展示和编辑。

核心功能

• 可视化编辑:
  • 节点库管理: 提供 BehaviorTree.CPP 内置的标准节点类型（Action, Condition, Control, Decorator 等），并允许用户自定义节点。
  • 拖拽式操作: 用户可以从节点库中拖拽节点到画布上，快速构建行为树结构。
  • 节点连接与配置: 通过拖拽连接节点，形成父子关系，并在属性面板中配置节点的详细参数。
  • 树形结构约束: 编辑器强制执行行为树的结构规则，确保每个节点类型遵守其父子关系要求。例如，控制节点可以有多个子节点，装饰器和动作节点只能有一个父节点和一个子节点。
• 实时调试:
  • 单步执行与断点: 支持在运行时暂停、单步调试、断点管理等功能，帮助开发者逐步跟踪行为树的执行流程。
  • 节点状态实时更新: 实时显示节点状态，包括运行、成功、失败等状态，并允许用户在调试过程中查看每个节点的实时状态变化。
  • 调试面板: 提供详细的调试信息和反馈，显示当前节点、黑板变量及相关数据。
• 事件流与时间轴回放:
  • 事件流记录与控制: 通过事件流记录器，记录行为树执行的每个节点状态变化。用户可以筛选、搜索事件，并查看不同时间段内的执行记录。
  • 时间轴组件: 提供回放控制，包括播放、暂停、快进、跳过等操作，并支持缩放、拖拽滑杆以查看特定时间段内的事件。回放过程中与画布状态同步，支持节点状态可视化。
• 实时监控与黑板管理:
  • 节点状态监控: 提供实时节点高亮显示，展示节点状态的变化，如 RUNNING, SUCCESS, FAILURE。
  • 黑板变量监控与修改: 实时展示和编辑黑板变量，支持在调试过程中直接修改黑板值并观察其对行为树执行的影响。
• XML 导入/导出:
  • XML 导入与解析: 支持将 BehaviorTree.CPP 的 XML 文件导入工具，自动解析并可视化显示行为树结构。
  • XML 导出与生成: 支持将编辑的行为树导出为 XML 格式，以便与其他项目或代码库进行集成，确保与 BehaviorTree.CPP 的兼容。
• 布局与导航:
  • 自动布局与自由导航: 一键自动整理行为树，使其结构更加清晰，便于查看。提供小地图（MiniMap）和支持画布的平移、缩放功能。
  • 多标签编辑: 支持多标签操作，用户可以同时编辑多个行为树，方便进行比较与修改。
• 编辑辅助与操作优化:
  • 撤销/重做: 支持多步操作的撤销和重做，确保编辑过程灵活且无忧。
  • 复制/粘贴/克隆: 允许快速复制、粘贴和克隆节点或整个子树，节省编辑时间。
  • 快捷键支持: 提供丰富的快捷键功能，如删除、全选、缩放、调整节点等操作。

技术栈

• 前端框架: React
• 图形库: ReactFlow
• UI 组件库: shadcn/ui
• 构建工具: Vite
• 语言: TypeScript

项目文件结构

本项目采用清晰的模块化结构，主要代码位于 src 目录下。以下是 src 目录的主要组成部分：

• src/core/: 包含所有核心业务逻辑和非 UI 工具函数。
  • src/core/bt/: 行为树相关的核心逻辑，如 XML 解析、行为树布局算法、行为树管理器等。
  • src/core/store/: 使用 Zustand 实现的全局状态管理模块，包含各个功能模块的状态切片（slices）。
  • src/core/debugger/: 与调试器通信相关的逻辑，如 WebSocket 客户端、断点管理器等。
  • src/core/layout/: 通用的布局算法和对齐工具。
  • src/core/utils/: 项目通用的辅助函数和工具。
• src/components/: React 组件库。
  • src/components/ui/: 基于 shadcn/ui 的通用 UI 组件。
  • 其他子目录或文件包含应用特定的组件，如调试面板、节点信息面板等。
• src/hooks/: 自定义 React Hooks，用于封装可复用的逻辑。
• src/styles/: 全局样式文件，主要使用 Tailwind CSS。
• src/config.ts: 全局配置文件，集中管理硬编码的配置项。
• src/app.tsx: 应用主入口和根组件。
• src/main.tsx: 应用的渲染入口。

如何使用

1. 克隆仓库:

   git clone https://github.com/your-username/bt-web-studio.git
   cd bt-web-studio

2. 安装依赖:

   npm install

3. 启动开发服务器:

   npm run dev

4. 在浏览器中打开 http://localhost:5173 即可开始使用。

路线图

• 基础编辑功能: 完成节点拖拽、连接、删除、属性编辑。
• XML 导入/导出: 实现与 BehaviorTree.CPP 的兼容。
• 布局与导航: 实现自动布局、小地图、缩放等。
• 编辑辅助: 完成撤销/重做、复制/粘贴、快捷键。
• 实时调试后端集成: 开发 WebSocket 服务，用于与 C++ 行为树应用通信。
• 状态可视化: 在前端实时展示节点状态。
• 断点与单步调试: 实现完整的调试器功能。
• 黑板变量管理: 支持黑板变量的实时监控和修改。
• 事件流记录与回放: 支持事件流记录和回放。
• 多标签编辑: 支持多标签操作，如同时编辑多个行为树。
• 多语言支持: 支持多语言，如中文、英文等。

文档

有关更详细的使用和部署信息，请参阅以下文档：

• 用户使用指南 - 详细介绍 BT Web Studio 的功能和使用方法
• 部署指南 - 介绍如何部署 BT Web Studio 到生产环境

贡献

欢迎任何形式的贡献！如果您有任何建议、发现 Bug 或希望添加新功能，请随时创建 Issue 或提交 Pull Request。

许可证

本项目采用 GNU Affero General Public License v3.0 开源。