0%

Cocos Creator 编辑器扩展:一键查找资源引用

前言

嗐,不知道你有没有过这样的烦恼。

当你想要确定一个资源被哪些节点引用的时候,使用资源管理器的查找引用却只能精确到预制体或场景。

对于预制体还好说,里面的节点一般不会很多,找起来还是比较快的。

但是场景里面的节点这么多,节点还可能是关闭着的,那找起来可太麻烦了。

那咋办嘛?

于是我又写了个编辑器扩展。

是的,这篇文章就给大家介绍一下我的新扩展:引用查找器


正文

📚 本文主要包含两部分:

  1. 扩展介绍
  2. 原理解析

让我们开始吧!

引用查找器

简介

这个扩展的用处很简单,就是让你可以一键快速查找资源的所有引用,对于预制体或场景的引用还可以精确到节点上的组件和属性。

注意:本插件无法查找脚本代码中的动态引用(动态加载资源)。

开源

本扩展项目完全开源,仓库地址:https://gitee.com/ifaswind/ccc-references-finder

如果你觉得这个项目还不错,请不要忘记点个 ⭐Star

截图

截图 1

截图 2

查找面板

设置面板

下载

本扩展已上架扩展商店,点击 Cocos Creator 编辑器顶部菜单栏中的 [扩展] -> [扩展商店] 即可打开扩展商店。

在商店页面上方的搜索框中输入“引用查找器”并搜索就可以找到本扩展,点进去直接安装即可(建议安装到全局)。

或者

到码云仓库里自行下载安装~

使用说明

安装扩展后,点击 Cocos Creator 编辑器顶部菜单栏中的 [扩展] -> [引用查找器] -> [设置] 即可打开扩展的设置面板。

有以下 3 个选项:

  • 自动展开查找结果:切换不同的结果展示方式(自动展开或手动展开)
  • 结果精确到节点:结果精确到预制体或场景中的节点上的组件和属性(有的话)
  • 查找快捷键:在资源管理器中选择资源后按下快捷键即可查找资源的引用(默认为 F6)

原理解析

虽然项目已经开源,源码随便看随便改,不过还是在这里给大家稍微解释下扩展的工作原理吧~

查找场景和预制体中的引用

💡 预制体的数据结构和场景大致相同,这里只拿场景举例。

没有专门研究过场景文件数据结构的小伙伴,可能会觉得里面的数据应该是树形结构,就像层级管理器中展示出来的那样,节点与子节点一层一层地嵌套着。

实则不然,场景文件的数据其实是扁平结构的。不理解?那听我娓娓道来~

💿 扁平化

树形结构就好像一个多维数组,不同纬度间不断嵌套,像这样:

[0, 1, [2, 3, 4], 5, [6, [7, 8]], 9]

当我们调用数组的 flat() 函数将这个多维数组扁平化,数组就会变成:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

这就是降维打击!

🌰 举个栗子

以新建项目的 helloworld 场景为例,其节点层级是这样的:

场景的层级管理器

helloworld.fire 的文件内容是这样的(为了更直观地展示数据结构我去除了文件中大部分不相关内容):

场景的数据结构

我们可以发现,在场景中所有节点和组件都是一个个独立的对象,且这些对象都处于同一个一维数组中。

  • 每个节点对象中都储存了该节点的父节点 id,子节点 id 和身上的组件 id 等信息。
  • 每个组件对象中都储存了该组件所属的节点 id 和组件的一些数据。

而这些 id(__id__)其实就是对象在数组中的下标

比如 background 节点的父节点 id 为 2,那么就是数组中的第 3 个对象,即 _nameCanvas 的节点对象;又如 Main Camera 节点上有一个组件的 id 为 4,那就是数组中的第 4 个对象:cc.Camera 对象。

生成节点树

想要判断场景是否引用了某个资源,只需要检查场景的数据中是否包含资源的 uuid 即可。

但是,如果想要获取具体引用的节点和组件,而扁平化的数据结构是非常不利于查找的。

所以在正式开始查找之前,先将场景的数据转为树形结构(节点树),且只留下节点和组件对象中一些有用的属性,如 _name__type____uuid__,还要将节点的完整路径保存起来。

📄 具体生成节点树的代码在这里(代码太长,就不贴了):

传送门:https://gitee.com/ifaswind/ccc-references-finder/blob/v1.1.0/main.js#L362

🎄 转换后的场景数据结构就像这样:

转换后的节点树

至此,我们就拥有了场景的节点树,查找引用的任务已经变得无比简单,只需在节点树中查询目标 uuid 即可获取场景中的所有引用(包括节点路径、组件和属性信息)。

🔍 而判断对象中是否包含 uuid 则是用简单的递归实现的:

containsValue(object, value) {
let result = false;
const search = (_object) => {
if (Object.prototype.toString.call(_object) === '[object Object]') {
for (const key in _object) {
if (_object[key] === value) {
result = true;
return;
}
search(_object[key]);
}
} else if (Array.isArray(_object)) {
for (let i = 0; i < _object.length; i++) {
search(_object[i]);
}
}
}
search(object);
return result;
}
加点魔法

为了加快查询速度,每个场景和预制体的节点树都只会生成一次,所以只有第一次查找会稍微慢一点点(其实也很快)。

另外扩展内部监听了项目中场景和预制体的修改,以便及时更新对应的节点树。

// 监听资源更新事件
'asset-db:asset-changed'(event, info) {
// 只处理场景和预制体
if (info.type === 'scene' || info.type === 'prefab') {
// 获取资源的路径
const path = Editor.assetdb.uuidToFspath(info.uuid);
// 更新节点树
this.updateNodeTree(path);
}
}

查找其它资源中的引用

对于动画片段、材质和字体等资源,只需简单判断资源数据中是否包含目标 uuid 即可。

📄 就像这样:

// 动画片段资源(扩展名为 .anim)
if (extname === '.anim') {
const data = JSON.parse(Fs.readFileSync(filePath));
// 截取有效数据
const curveData = data['curveData'];
// 数据中是否包含目标 uuid
const contains = ObjectUtil.containsValue(curveData, uuid);
if (contains) {
// 获取文件路径
const fileUrl = Editor.assetdb.fspathToUrl(filePath);
// 保存结果
results.push({ type: typeMap[extname], fileUrl: fileUrl });
}
}

夹带私货

我的其他扩展

如果你觉得这些项目也都还不错,请不要忘记也点个 ⭐Star~

自动压缩 PNG 资源

项目构建完成后自动压缩 PNG 资源。

源码仓库:https://gitee.com/ifaswind/ccc-png-auto-compress

Cocos 商店:http://store.cocos.com/#/resources/detail/2419

混淆代码工具

项目构建完成后自动混淆项目代码。

源码仓库:https://gitee.com/ifaswind/ccc-obfuscated-code

Cocos 商店:http://store.cocos.com/#/resources/detail/2317

猝不及防

📢 插播一条小广告:

皮皮创建了一个游戏开发交流微信群,供开发者小伙伴们进行问题求助以及交流开发经验。

现在群里面已经有 150+ 位大佬啦,感兴趣的小伙伴可以扫描下面的二维码加入群聊(广告勿扰):

或者添加我的微信号 im_chenpipi 也是可以的~


传送门

微信推文版本

个人博客:菜鸟小栈

开源主页:陈皮皮

Eazax-CCC 游戏开发脚手架

Eazax-CCC 示例在线预览


更多分享

《为什么选择使用 TypeScript ?》

《高斯模糊 Shader》

《一文看懂 YAML》

《Cocos Creator 性能优化:DrawCall》

《互联网运营术语扫盲》

《在 Cocos Creator 里画个炫酷的雷达图》

《用 Shader 写个完美的波浪》

《在 Cocos Creator 中优雅且高效地管理弹窗》

《Cocos Creator 源码解读:引擎启动与主循环》


公众号

菜鸟小栈

😺我是陈皮皮,一个还在不断学习的游戏开发者,一个热爱分享的 Cocos Star Writer。

🎨这是我的个人公众号,专注但不仅限于游戏开发和前端技术分享。

💖每一篇原创都非常用心,你的关注就是我原创的动力!

Input and output.

欢迎关注我的其它发布渠道