插件介绍

本插件为 VectoUI 面向 Unity3D Engine 开发的自动化 UI 编译插件。

可将主流第三方云端设计协作平台（如蓝湖、Figma 等）的设计稿，一键解析并转换为可直接使用的 Unity Prefab 组件。

接入方法

Unity 插件接入

可访问本插件的 公开仓库 获取最新资讯。

(一) Manifest.json 引入 在 Unity 项目中，通过在 Packages/manifest.json 中添加以下配置，以引入本插件（默认用户已配置 SSH-Key 的鉴权方式）：

manifest.json

{
  "dependencies": {
    "com.vectoui.unity.convertor": "git@github.com:vecto-ui/com.vectoui.unity.convertor.git"
  }
}   

(二) Git URL 引入 在 Unity 编辑器菜单栏点击 Window > Package Manager，点击左上角的 + 号，选择 Install package from git URL ...。

输入以下地址引入插件 Repo，点击 Install 进行安装：

git@github.com:vecto-ui/com.vectoui.unity.convertor.git

基础用法

(1) 应用授权声明

首次在 Unity 中打开本插件时，会弹出数据访问与免责声明。请仔细阅读并点击 [我已同意并承担相应责任]，即可解锁全部功能。

(2) 账号与权限配置

API Key (VectoUI 平台验证)

进入插件的 设置/账号 页面，首先需要输入您的 API Key。 API Key 用于验证您的 VectoUI 订阅权益，可在 VectoUI 官网的 个人中心 页面获取。

输入后点击 绑定当前设备 即可完成绑定。

Access Token (第三方数据源授权)

Access Token 是您访问对应第三方设计平台数据的合法身份凭证。VectoUI 作为中立引擎，本身不提供第三方数据的抓取功能。您需要自行提取您拥有合法访问权限的平台凭证并填入此处。 关于如何安全地提取您本地的合法凭证，请点击此处参考准备工作教程。

(3) 生成 UI 组件

成功配置好以上鉴权信息后，即可刷新并拉取线上的项目数据与画板了。 在列表中找到您想要生成的 UI 界面，点击 生成 Prefab，VectoUI 引擎即会在本地为您完成解析与预制体生成。

🎨 美术制作规范

为了能够一次性生成结构完美、无需二次调整的组件，建议您的美术团队在作图时遵循 VectoUI 的标准化规范：

• Photoshop 美术制作规范
• Sketch 美术制作规范

(4) 常用配置选项

• 字体路径： 项目中会用到大量的自定义字体，可在 设置/通用/字体路径 中配置字体资产的相对路径。插件在转换时会主动查找该路径下的字体，并自动映射给生成的文本组件。
• TextMeshPro 支持： 完美支持 TMP 组件。勾选 设置/通用/启用 TextMeshPro 即可全局应用。
• 层级设置： 可配置生成组件及所有子节点的 Layer 层级，默认对齐至 UI 图层。
• 文本特效说明： 不同的团队对文本的 描边 (Outline) 或 阴影 (Shadow) 有不同的性能考量和处理策略。为避免 UGUI 默认特效脚本带来额外的性能开销，插件默认不直接转换文字特效。如有需求，请参考下方 后处理流程 进行自定义组件扩展。

进阶用法

组件自动挂载规则

本插件提供了基于节点名称正则匹配的组件自动挂载功能，可协助开发者根据命名规则自动挂载 Button、Canvas、ScrollRect 等 UGUI 核心组件。

1. 在 设置/高级/生成绑定类 中开启此选项。
2. 插件会自动生成 VectoUI 组件绑定规则配置文件，默认路径为：Assets/VectoUI/Editor/VectoUIAssetBindeRule.asset。
3. 规则资产内部已预置了一组默认的组件名称与挂载映射。您可以自由修改或添加自定义正则表达式来匹配新的组件。

💡 自定义脚本挂载注意： 若您希望通过该规则自动挂载项目组自己写的逻辑脚本，需在新建的规则下，将 Bind Type 配置为 Custom，且您的自定义脚本必须继承自 MonoBehaviour。

自定义后处理流程 (Post-Process)

如果正则挂载规则无法满足您复杂的业务逻辑需求，本插件还暴露了 IVectoUINodePostProcess 接口，用于在构建管线中注入您的自定义后处理逻辑。

在 VectoUI 生成 Prefab 的每一个节点时，均会触发该接口的 OnNodePostBuild 方法，并将节点的 GameObject 引用及相关 AST 数据（抽象语法树信息）传回。您可以借此自由修改节点属性或附加复杂逻辑。

后处理示例代码：

using UnityEngine;
using VectoUI.Builder;

namespace Game.Editor
{
    // 实现自定义节点后处理接口
    public class CustomNodePostProcess: IVectoUINodePostProcess
    {
        public void OnNodePostBuild(VectoUIPostNodeInfo nodeInfo)
        {
            Debug.Log($"OnNodePostBuild: {nodeInfo.NodeName}  Type: {nodeInfo.LayerType}");
            
            if (nodeInfo.LayerType == "textLayer")
            {
                // 为所有文本节点统一添加前缀
                nodeInfo.GameObject.name = $"txt_{nodeInfo.GameObject.name}";
            }
            else if (nodeInfo.LayerType == "shape")
            {
                // 为形状节点改名，同时使其能被您的其他自定义组件挂载规则（如正则匹配 `ic_*`）捕获
                nodeInfo.GameObject.name = $"ic_{nodeInfo.GameObject.name}";
            }

            // 打印该节点原始的 JSON 数据以便调试分析
            Debug.Log($"RawJson: {nodeInfo.RawJson}");
        }
    }
}