BOO 可视化编辑器 - VSCode 插件

传奇引擎 BOO 脚本可视化编辑器 — 所见即所得的拖拽式 UI 设计与代码生成工具

简介

BOO 可视化编辑器是专为通用传奇引擎打造的 VSCode 插件，让你在 VSCode 中通过拖拽操作设计游戏 UI 界面，自动生成符合传奇引擎规范的 BOO 脚本代码。

告别手写坐标、反复调试的痛苦，所有 UI 元素的位置、尺寸一目了然，代码实时同步。

功能特性

🎨 画布可视化编辑

拖拽定位 — 在画布上自由拖拽元素，精确调整位置
实时预览 — 所有修改即时反映在画布上
缩放控制 — 支持画布缩放，适应不同分辨率的 UI 设计
多元素管理 — 右侧面板展示所有画布元素，支持选中、删除

🧩 丰富的 UI 组件

组件	说明
🖼️ 图片	从素材库直接拖拽添加，支持 PNG 格式
✍️ 文字	自定义文本内容、字体颜色、大小
✨ 特效	动画特效组件，可配置帧数、播放速度
🔘 按钮	交互按钮组件，支持多种按钮样式
⏱️ 倒计时	倒计时显示组件
📝 文本框	可输入文本框，支持提示文字、颜色配置
🔢 数字框	数字输入框，支持最小/最大值、错误提示
🎒 装备框	装备槽位组件，可设置物品名称
❌ 关闭按钮	快捷导入关闭按钮图片
📊 进度条	快捷导入进度条图片

🔄 双向实时同步

画布 → 代码：在画布上拖拽、添加、修改元素后，传奇代码自动生成（300ms 防抖）
代码 → 画布：手动编辑代码区的脚本，画布自动解析并渲染对应元素（800ms 防抖）
支持 will序号 配置，生成完整的 BOO 脚本格式

📂 素材管理

打开文件夹 — 一键加载整个文件夹的 PNG 图片素材
拖拽导入 — 支持拖拽图片到导入框快速添加
快捷槽位 — 关闭按钮、装备框、进度条三个常用素材的快捷导入槽
素材列表 — 缩略图网格展示，双击或拖拽即可添加到画布

📋 属性面板

选中画布元素后，右侧面板实时显示元素属性
支持精确修改：X/Y 坐标、宽度、高度
不同组件类型展示专属属性（文字颜色、特效帧数、输入框提示等）

📜 代码区

默认隐藏，通过工具栏「📜 代码区」按钮切换显示
可自由拖拽移动、八方向缩放
实时显示生成的传奇引擎 BOO 脚本代码

安装方法

方式一：VSIX 文件安装（推荐）

获取 boo-visual-editor-1.0.0.vsix 文件
打开 VSCode，按 Ctrl+Shift+P
输入 Extensions: Install from VSIX...
选择 .vsix 文件完成安装
重新加载窗口（Ctrl+Shift+P → Developer: Reload Window）

方式二：命令行安装

code --install-extension boo-visual-editor-1.0.0.vsix

使用方法

1. 打开编辑器

安装后，VSCode 左侧 Activity Bar 会出现「老卢」图标，点击即可打开编辑器。

也可以通过命令面板：Ctrl+Shift+P → 输入 BOO: 打开可视化编辑器

2. 加载素材

点击工具栏 「📂 打开文件夹」 按钮，选择包含 PNG 图片的素材文件夹。图片将以缩略图形式展示在左侧素材面板中。

3. 添加元素到画布

方式一：在素材列表中双击图片，直接添加到画布

方式二：从素材列表拖拽图片到画布区域

方式三：使用工具栏按钮添加文字、特效、按钮等组件

4. 编辑元素

移动：在画布上直接拖拽元素
选中：点击元素，右侧属性面板显示详细属性
修改属性：在属性面板中精确调整坐标、尺寸等参数
删除：选中元素后点击「删除元素」按钮

5. 生成代码

点击工具栏 「📜 代码区」 按钮显示代码面板
填入 will序号
代码将自动生成，格式符合传奇引擎 BOO 脚本规范
修改代码，画布也会同步更新

6. 快捷导入

素材面板顶部提供三个快捷槽位：

❌ 关闭按钮 — 点击导入关闭按钮图片，再点「⚡ 调用」添加到画布
🎒 装备框 — 快速导入装备框图片
📊 进度条 — 快速导入进度条图片

生成代码示例

[@Main]
#if
#act
OPENMERCHANTBIGDLG 1 0 1 4 0 -50 1 0 0
#say
<&img:2:1:0:0>
<&img:5:1:125:81>
<&text:充值使者:10:3:150:200>

代码中各指令含义：

OPENMERCHANTBIGDLG — 打开大对话框，参数为画布尺寸和偏移
<&img:序号:张数:X:Y> — 在指定坐标显示图片
<&text:内容:字号:颜色:X:Y> — 在指定坐标显示文字
<&effect:序号:张数:速度:X:Y> — 播放特效动画
<&btn:...> — 显示交互按钮
<&inputtext:...> — 显示文本输入框
<&inputnum:...> — 显示数字输入框

快捷操作

操作	说明
双击素材	添加到画布
拖拽素材到画布	添加到画布
点击画布元素	选中并显示属性
拖拽画布元素	移动位置
拖拽代码区标题栏	移动代码区位置
拖拽代码区边缘	缩放代码区大小
修改 will序号	自动重新生成代码

技术架构

VSCode Extension (TypeScript)
├── Activity Bar 图标入口
├── WebviewViewProvider (侧边栏)
│   ├── 文件夹扫描 & Base64 图片加载
│   ├── postMessage 双向通信
│   └── CSP 安全策略
└── Webview (HTML + Canvas 2D)
    ├── 画布渲染引擎
    ├── 拖拽交互系统
    ├── 双向同步引擎 (画布 ↔ 代码)
    ├── 属性面板
    └── 代码生成器

系统要求

VSCode ≥ 1.80.0
操作系统：Windows（已测试 Windows 10/11）

技术支持

QQ：1167746

更新日志

v1.0.0

首个 VSCode 插件版本发布
Activity Bar 集成，侧边栏完整编辑器界面
支持 10 种 UI 组件拖拽编辑
画布与代码双向实时同步
Base64 图片加载，兼容所有磁盘路径
代码区可切换显隐、自由拖拽缩放

BOO 可视化编辑器

boo-diy