VSCode 插件资源转换工具

HoneyGUI Visual Designer 中内置了一套完整的资源转换工具，可以将各种格式的资源文件转换为嵌入式设备可用的二进制格式。这些工具采用纯 JavaScript/TypeScript 实现，集成在插件的编译流程中，无需额外安装 Python 环境或独立工具。

备注

本章节介绍的是 HoneyGUI Visual Designer VSCode 插件内置的资源转换工具，与传统的独立转换工具（exe 程序）不同：

  • VSCode 插件工具：集成在插件中，自动化转换，可视化配置，支持图像、3D 模型、视频、字体、玻璃效果。

  • 独立工具：需要单独下载和运行的 exe 程序，手动操作，详见 图像转换工具 和 字体转换工具。

工具概述

HoneyGUI Visual Designer 插件的资源转换工具支持以下资源类型：

  • 图像转换：PNG、JPEG、BMP、GIF → bin 文件

  • 3D 模型转换：OBJ、GLTF → 描述符 bin 文件

  • 视频转换：MP4、AVI、MOV 等 → MJPEG/AVI/H264 格式

  • 字体转换：TTF、OTF → 点阵或矢量字体 bin 文件

  • 玻璃效果转换：SVG（ .glass 扩展名）→ 模糊效果 bin 文件

快速开始

https://foruda.gitee.com/images/1770691129178222517/6964fad9_13408154.png

插件资源转换工具界面

步骤 1：打开插件面板

  1. 在 VSCode 左侧活动栏中，点击 HoneyGUI Visual Designer 插件图标。

  2. 插件侧边栏会显示 WELCOME 区域和 ENVIRONMENT 区域。

步骤 2：检查环境（可选）

资源转换工具本身不需要额外的环境依赖，但如果需要对视频进行裁剪或缩放，需要安装 FFmpeg。

可以在 ENVIRONMENT 区域查看 FFmpeg 是否已安装：

  • ✅ FFmpeg：可选，仅视频裁剪/缩放时需要

步骤 3：打开资源转换工具

在 WELCOME 区域，点击 Resource Conversion Tools 按钮，打开资源转换工具面板。

步骤 4：选择输出目录

  1. 在资源转换工具面板中，点击 Select Directory 按钮。

  2. 选择一个目录作为资源转换的输出位置。

  3. 插件会在选择的目录下自动创建 origin 文件夹，存放原始资源文件和配置。

  4. origin 文件夹中会生成 conversion.json 配置文件，保存所有资源的转换配置。

步骤 5：添加资源文件

将需要转换的资源文件拖拽到资源转换工具面板中：

  1. 从文件管理器中选择资源文件（图片、字体、视频、3D 模型、玻璃效果等）。

  2. 拖拽到工具面板的资源列表区域。

  3. 资源会自动添加到列表中，并显示在左侧。

步骤 6：配置转换参数

在资源转换工具面板中：

  1. 左侧资源列表：显示已添加的所有资源文件。

  2. 选择资源：点击左侧列表中的资源文件。

  3. 右侧属性栏：配置该资源的转换参数。

    • 图像：格式（RGB565、ARGB8888 等）、压缩方式（RLE、FastLZ、YUV）

    • 字体：字号、渲染模式（1/2/4/8 bpp）、字符集、输出格式

    • 视频：输出格式（MJPEG、AVI、H264）、帧率、质量、裁剪/缩放

    • 3D 模型：自动识别格式，无需额外配置

    • 玻璃效果：效果区域（0-100%）、效果强度（0-100%）

步骤 7：设置 Base Address

在开始转换前，需要设置 Base Address（基地址）：

  1. 在工具面板中找到 Base Address 输入框。

  2. 填入资源在设备内存中的起始地址（十六进制格式，如 0x704D1000）。

  3. Base Address 用于生成 romfs 文件系统时计算资源的内存地址。

备注

Base Address 的值取决于您的设备内存布局和固件配置。请参考设备的内存映射文档或固件配置文件。

步骤 8：开始转换

  1. 配置完所有资源和 Base Address 后，点击右下角的 Start Convert 按钮。

  2. 插件会自动执行以下操作：

    • 转换所有资源文件为二进制格式。

    • 打包资源到 romfs 文件系统。

    • 生成 app_romfs.bin、 app_romfs.c 和 ui_resource.h。

  3. 转换完成后，在输出目录中生成以下文件：

    • 资源 bin 文件：每个资源对应的二进制文件（如 image.bin、 font.bin）。

    • app_romfs.bin：打包后的 romfs 文件系统镜像。

    • app_romfs.c：romfs 的 C 语言数组形式（可直接编译到程序中）。

    • ui_resource.h：包含资源地址偏移宏定义（支持直接内存地址访问）。

小技巧

  • 转换进度会在输出面板中实时显示。

  • 如果转换失败，会显示详细的错误信息。

图像转换

支持的格式

输入格式：

  • PNG（支持透明度）

  • JPEG/JPG

  • BMP

  • GIF（直接打包原始数据）

输出格式：

  • RGB565：16 位色彩，每像素 2 字节

  • RGB888：24 位真彩色，每像素 3 字节

  • ARGB8888：32 位带透明度，每像素 4 字节

  • ARGB8565：24 位带透明度，每像素 3 字节

  • A8：8 位透明度通道

  • I8：8 位灰度图

压缩算法

  • RLE 压缩：游程编码，适合大面积纯色图像

  • FastLZ 压缩：快速压缩算法，平衡压缩率和解压速度

  • YUV 压缩：适合照片类图像，支持多种采样模式

    • YUV444：无色度采样，最高质量

    • YUV422：水平 2:1 采样，推荐使用

    • YUV411：水平 4:1 采样，最高压缩率

    • 模糊位数：0/1/2/4 bit，降低色度精度以提高压缩率

    • FastLZ 二次压缩：可选，进一步提高压缩率

配置方式

插件提供了可视化的配置界面，无需手动编辑配置文件，配置界面包含：

  • 格式选择：下拉菜单选择输出格式（RGB565、ARGB8888 等）

  • 压缩算法：选择压缩方式（无压缩、RLE、FastLZ、YUV）

  • YUV 参数：如果选择 YUV 压缩，可配置采样模式、模糊位数等

小技巧

配置会自动保存到 origin/conversion.json 文件中，下次打开文件时会自动加载。

自适应格式

  • adaptive16：自动选择 16 位格式

    • 有透明度 → ARGB8565

    • 无透明度 → RGB565

  • adaptive24：自动选择 24 位格式

    • 有透明度 → ARGB8888

    • 无透明度 → RGB888

使用方法

按照 快速开始 中的步骤打开资源转换工具面板后：

  1. 拖拽图片：将图片文件从文件管理器拖拽到工具面板的资源列表区域。

  2. 选择图片：在左侧资源列表中点击选择图片。

  3. 配置参数：在右侧属性栏设置转换参数。

    • 输出格式：RGB565、RGB888、ARGB8888、ARGB8565 等。

    • 压缩方式：无压缩、RLE、FastLZ、YUV。

    • YUV 参数 （如选择 YUV 压缩）：采样模式、模糊位数、二次压缩。

  4. 开始转换：点击右下角的 Start Convert 按钮。

  5. 查看输出：转换后的文件在输出目录中：

    • 图片名.bin：转换后的图片二进制文件。

    • app_romfs.bin：打包后的文件系统。

    • app_romfs.c：C 数组形式。

    • ui_resource.h：地址偏移宏定义。

3D 模型转换

支持的格式

输入格式：

  • OBJ：Wavefront OBJ 格式（支持 MTL 材质）

  • GLTF：GL Transmission Format 2.0（需要配套 .bin 文件）

输出文件：

  • 描述符 bin 文件：包含顶点、法线、纹理坐标、材质等信息

  • OBJ 格式： desc_xxx.bin

  • GLTF 格式： gltf_desc_xxx.bin

使用方法

按照 快速开始 中的步骤打开资源转换工具面板后：

  1. 拖拽模型：将 3D 模型文件（ .obj 或 .gltf）拖拽到工具面板。

  2. 拖拽纹理：如果有纹理图片，也一并拖拽到面板中。

  3. 查看配置：在右侧属性栏查看模型信息（通常无需额外配置）。

  4. 开始转换：点击右下角的 Start Convert 按钮。

  5. 查看输出：转换后的文件在输出目录中：

    • desc_xxx.bin 或 gltf_desc_xxx.bin：模型描述符。

    • 纹理名.bin：纹理图片的二进制文件。

    • app_romfs.bin、 app_romfs.c 和 ui_resource.h：打包文件。

注意事项：

  • GLTF 文件需要配套的 .bin 文件（buffer 数据），一起拖拽进来。

  • 纹理图片会自动转换为 bin 格式并关联到模型。

视频转换

支持的格式

输入格式：

  • MP4、AVI、MOV、MKV、WebM

  • FLV、WMV、M4V、3GP

  • ASF、RM、RMVB、VOB、TS

输出格式：

  • MJPEG：Motion JPEG，逐帧 JPEG 编码，解码简单

  • AVI：AVI 容器 + MJPEG 编码

  • H264：H.264/AVC 编码，高压缩率（需硬件解码支持）

转换选项

基础参数：

  • 帧率：输出视频帧率（如 30 fps）

  • 质量：MJPEG/AVI 为 1-31（1 最高），H264 为 CRF 0-51

视频处理：

  • 裁剪：裁剪视频区域（x, y, width, height）

  • 缩放：调整视频尺寸（width, height）

  • 保持宽高比：缩放时保持原始宽高比

使用方法

按照 快速开始 中的步骤打开资源转换工具面板后：

  1. 拖拽视频：将视频文件拖拽到工具面板的资源列表区域。

  2. 选择视频：在左侧资源列表中点击选择视频文件。

  3. 配置参数：在右侧属性栏设置视频转换参数。

    • 输出格式：MJPEG、AVI、H264。

    • 帧率：如 30 fps。

    • 质量：MJPEG/AVI 为 1-31（1 最高），H264 为 CRF 0-51。

    • 裁剪参数 （可选）：x, y, width, height。

    • 缩放参数 （可选）：width, height, 是否保持宽高比。

  4. 开始转换：点击右下角的 Start Convert 按钮。

  5. 查看输出：转换后的文件在输出目录中：

    • 视频名.mjpeg （或 .avi、 .h264）：转换后的视频文件。

    • app_romfs.bin、 app_romfs.c 和 ui_resource.h：打包文件。

性能提示：

  • MJPEG 格式解码最简单，适合低端设备。

  • H264 压缩率最高，但需要硬件解码器支持。

  • 降低帧率和质量可以显著减小文件大小。

  • 裁剪和缩放需要 FFmpeg 支持。

字体转换

支持的格式

输入格式：

  • TTF：TrueType Font

  • OTF：OpenType Font

输出格式：

  • 点阵字体：预渲染位图，文件较小，渲染快速

  • 矢量字体：保留矢量数据，可任意缩放，文件较大

字符集配置

支持多种字符集来源（取并集）：

  1. Unicode 范围： 0x20-0x7E （ASCII）

  2. 代码页： GB2312、 GBK、 CP932 （日文）、 KSX1001 （韩文）

  3. 字符文件： .txt 文件，包含需要的字符

  4. 自定义字符串：直接指定字符

常用字符集：ASCII（95字符）、ISO8859-1（193字符）、GB2312（7,478字符）、GBK（21,886字符）、CP932（7,483字符）、KSX1001（8,187字符）等。

渲染模式

位深度决定字体显示效果和文件大小：

  • 1bpp：黑白显示，文件最小

  • 2bpp：4 级灰度，推荐使用（性价比最优）

  • 4bpp：16 级灰度，显示效果优秀

  • 8bpp：256 级灰度，显示效果最佳

裁剪优化

字体转换工具支持自动裁剪优化：

  • 自动模式 （推荐）：字符数 ≤ 2048 使用偏移索引（不裁剪），字符数 > 2048 使用地址索引（启用裁剪）

  • 手动模式：可手动启用或禁用裁剪

使用方法

按照 快速开始 中的步骤打开资源转换工具面板后：

  1. 拖拽字体：将字体文件（.ttf 或 .otf）拖拽到工具面板。

  2. 选择字体：在左侧资源列表中点击选择字体文件。

  3. 配置参数：在右侧属性栏设置字体转换参数。

    • 字号：如 24。

    • 渲染模式：1bpp、2bpp、4bpp、8bpp。

    • 输出格式：点阵字体、矢量字体。

    • 字符集：可多选（ASCII、GB2312、GBK、CP932、KSX1001 等）。

    • 裁剪模式：自动、启用、禁用。

  4. 开始转换：点击右下角的 Start Convert 按钮。

  5. 查看输出：转换后的文件在输出目录中：

    • font.bin：转换后的字体二进制文件。

    • app_romfs.bin、 app_romfs.c 和 ui_resource.h：打包文件。

文件大小评估

字体文件大小受字符集、字号、位深度等因素影响。关于详细的文件大小参考数据、不同配置的对比分析以及选择建议，请参考 字体大小评估 ，包括：

  • 常用字符集大小对比（ASCII、GB2312、GBK、CP932、KSX1001 等）

  • 位深度对文件大小的影响（1bpp、2bpp、4bpp、8bpp）

  • 字号对文件大小的影响（16号、24号、32号、48号）

  • 矢量字体大小参考

  • 不同应用场景的配置建议

玻璃效果转换

玻璃效果是一种模糊背景的视觉效果，常用于实现毛玻璃、磨砂玻璃等 UI 效果。

支持的格式

输入格式：

  • SVG 文件（需使用 .glass 扩展名）

输出格式：

  • 模糊效果 bin 文件

转换参数

玻璃效果支持以下参数配置：

  • 效果区域 （Blur Radius）：0-100%，控制模糊效果的范围

  • 效果强度 （Blur Intensity）：0-100%，控制模糊的强度

使用方法

按照 快速开始 中的步骤打开资源转换工具面板后：

  1. 准备 SVG 文件：创建 SVG 文件并将扩展名改为 .glass。

  2. 拖拽文件：将 .glass 文件拖拽到工具面板的资源列表区域。

  3. 选择文件：在左侧资源列表中点击选择玻璃效果文件。

  4. 配置参数：在右侧属性栏设置玻璃效果参数。

    • 效果区域：0-100%（默认 50%）

    • 效果强度：0-100%（默认 50%）

  5. 预览效果：可以实时预览玻璃效果的模糊结果。

  6. 开始转换：点击右下角的 Start Convert 按钮。

  7. 查看输出：转换后的文件在输出目录中：

    • 效果名.bin：转换后的玻璃效果二进制文件。

    • app_romfs.bin、 app_romfs.c 和 ui_resource.h：打包文件。

资源目录结构

资源转换成功后，插件会自动创建以下结构：

输出目录/
├── origin/                    # 原始资源和配置
│   ├── conversion.json        # 转换配置文件
│   └── [资源文件]             # 拖拽进来的原始资源
├── [资源名].bin               # 转换后的资源二进制文件
├── app_romfs.bin              # 打包后的 romfs 文件系统
├── app_romfs.c                # romfs 的 C 数组形式
└── ui_resource.h              # 资源地址偏移宏定义

输出文件说明：

  • 资源 bin 文件：每个资源转换后的二进制文件，可单独使用。

  • app_romfs.bin：所有资源打包成的文件系统镜像，用于烧录到设备。

  • app_romfs.c：romfs 的 C 语言数组，可直接编译到固件中。

  • ui_resource.h：包含资源地址偏移宏定义，支持直接内存地址访问。

备注

conversion.json 文件记录了所有资源的转换配置，包括格式、压缩方式、参数等。该文件会被自动管理，通常不需要手动编辑。