窗口属性关联插件
kunpocc窗口属性关联插件 - kunpo-fgui
项目信息
- 商店地址: Cocos Store - 窗口属性关联
- 支持版本: Cocos Creator 3.7+
- 框架支持: 需配合框架 kunpocc
🎯 简介
kunpo-fgui 是一个为 Cocos Creator 设计的插件，它提供了一个可视化的编辑器，用于配置和管理基于 FairyGUI 和 kunpo 库的 UI 界面组件属性。
本插件的核心目标是解决在 Cocos Creator 项目中手动管理 FairyGUI 组件引用的痛点，通过”拖拽绑定”和”配置导出”的方式，将 UI 制作与代码逻辑解耦，极大地提升开发效率和项目的可维护性。
✨ 主要功能
🎨 可视化编辑器
在 Cocos Creator 中提供一个独立的面板，用于展示和操作 FairyGUI 项目。
📋 FairyGUI 项目解析
自动解析 FairyGUI 项目的 XML 文件，以树状视图清晰地展示包、组件和其层级关系。
🖱️ 拖拽属性绑定
支持通过拖拽的方式，将 FairyGUI 的组件与代码中的属性进行可视化绑定。
🔗 自动路径生成
自动生成并管理组件在界面层级中的唯一访问路径 (idPath)，无需手动编写。
💾 配置导出
一键将所有 UI 绑定关系导出为 JSON 配置文件，供运行时使用。
🔧 深度集成
提供菜单栏入口和快捷键，无缝集成到 Cocos Creator 的开发流程中。
🚀 解决的痛点
下表对比了使用本插件前后的开发体验：
| 痛点 | 使用本插件前 | 使用本插件后 |
|---|---|---|
| 组件获取 | 手动编写 getChild、getChildByPath 等代码，繁琐且易错 | 在可视化面板中拖拽一次即可完成绑定，代码通过配置直接获取对象 |
| 代码维护 | UI 路径、名称等字符串硬编码在业务代码中，难以维护 | 所有 UI 路径信息都保存在独立的配置文件中，代码与 UI 细节解耦 |
| UI 变更 | UI 设计师修改组件名或层级，开发者需在代码中全局搜索替换，工作量大且风险高 | 只需在面板中更新绑定并重新导出配置，业务代码无需任何改动 |
| 关系概览 | 难以直观地了解一个复杂界面中所有组件的引用情况 | 面板中清晰地展示了所有组件的绑定关系，一目了然 |
📖 如何使用
1️⃣ 打开面板
通过顶部菜单 kunpo/窗口编辑器 或快捷键 Cmd/Ctrl + Shift + F 打开插件主面板。
2️⃣ 选择 FGUI 包
在面板中，选择或导入你的 FairyGUI 项目及对应的包。
3️⃣ 拖拽绑定
从左侧的组件列表中，将需要绑定的组件拖拽到右侧的属性或回调区域。
4️⃣ 导出配置
完成所有绑定后，点击 导出UI配置，插件会自动生成最新的绑定配置文件。
5️⃣ 代码中使用
在你的代码中，加载该配置文件，并通过 kunpo 库的接口来获取和使用已绑定的 UI 组件。
💿 安装
- 将此插件文件夹
kunpo-fgui放置到 Cocos Creator 项目的extensions目录下 - 重启 Cocos Creator 编辑器即可在 扩展 菜单中看到此插件
🎉 总结
kunpo-fgui 插件通过提供可视化的编辑器和拖拽绑定功能，彻底改变了传统 FairyGUI 组件管理的繁琐方式。无论是新手还是资深开发者，都能通过这个插件显著提升 UI 开发的效率和项目的可维护性。
让我们告别手写 UI 路径和硬编码的时代，拥抱更高效、更智能的 UI 开发方式！🚀