臥槽!骨瘦如柴陳皮皮又出新插件了,還免費開源!
前言
嗐，不知道你有沒有過這樣的煩惱。
當你想要確定一個資源被哪些節(jié)點引用的時候，使用資源管理器的查找引用卻只能精確到預制體或場景。
對于預制體還好說，里面的節(jié)點一般不會很多，找起來還是比較快的。
但是場景里面的節(jié)點這么多，節(jié)點還可能是關閉著的，那找起來可太麻煩了。
那咋辦嘛？
于是我又寫了個編輯器擴展。
是的，這篇文章就給大家介紹一下我的新擴展：引用查找器。
正文
? 本文主要包含兩部分：
- 擴展介紹
- 原理解析
讓我們開始吧！
引用查找器
簡介
這個擴展的用處很簡單，就是讓你可以一鍵快速查找資源的所有引用，對于預制體或場景的引用還可以精確到節(jié)點上的組件和屬性。
注意：本插件無法查找腳本代碼中的動態(tài)引用（動態(tài)加載資源）。
開源
本擴展項目完全開源，倉庫地址：https://gitee.com/ifaswind/ccc-references-finder
如果你覺得這個項目還不錯，請不要忘記點個 ?Star！
截圖
截圖 1
截圖 2
查找面板
設置面板下載
本擴展已上架擴展商店，點擊 Cocos Creator 編輯器頂部菜單欄中的 [擴展] -> [擴展商店] 即可打開擴展商店。
在商店頁面上方的搜索框中輸入“引用查找器”并搜索就可以找到本擴展，點進去直接安裝即可（建議安裝到全局）。
或者
到碼云倉庫里自行下載安裝~
使用說明
安裝擴展后，點擊 Cocos Creator 編輯器頂部菜單欄中的 [擴展] -> [引用查找器] -> [設置] 即可打開擴展的設置面板。
有以下 3 個選項：
- 自動展開查找結(jié)果：切換不同的結(jié)果展示方式（自動展開或手動展開）
- 結(jié)果精確到節(jié)點：結(jié)果精確到預制體或場景中的節(jié)點上的組件和屬性（有的話）
- 查找快捷鍵：在資源管理器中選擇資源后按下快捷鍵即可查找資源的引用（默認為 F6）
原理解析
雖然項目已經(jīng)開源，源碼隨便看隨便改，不過還是在這里給大家稍微解釋下擴展的工作原理吧~
查找場景和預制體中的引用
? 預制體的數(shù)據(jù)結(jié)構(gòu)和場景大致相同，這里只拿場景舉例。
沒有專門研究過場景文件數(shù)據(jù)結(jié)構(gòu)的小伙伴，可能會覺得里面的數(shù)據(jù)應該是樹形結(jié)構(gòu)，就像層級管理器中展示出來的那樣，節(jié)點與子節(jié)點一層一層地嵌套著。
實則不然，場景文件的數(shù)據(jù)其實是扁平結(jié)構(gòu)的。不理解？那聽我娓娓道來~
? 扁平化
樹形結(jié)構(gòu)就好像一個多維數(shù)組，不同緯度間不斷嵌套，像這樣：
[0, 1, [2, 3, 4], 5, [6, [7, 8]], 9]當我們調(diào)用數(shù)組的
flat()函數(shù)將這個多維數(shù)組扁平化，數(shù)組就會變成：
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]這就是降維打擊！
? 舉個栗子
以新建項目的 helloworld 場景為例，其節(jié)點層級是這樣的：
場景的層級管理器而 helloworld.fire 的文件內(nèi)容是這樣的（為了更直觀地展示數(shù)據(jù)結(jié)構(gòu)我去除了文件中大部分不相關內(nèi)容）:
場景的數(shù)據(jù)結(jié)構(gòu)我們可以發(fā)現(xiàn)，在場景中所有節(jié)點和組件都是一個個獨立的對象，且這些對象都處于同一個一維數(shù)組中。
- 每個節(jié)點對象中都儲存了該節(jié)點的父節(jié)點 id，子節(jié)點 id 和身上的組件 id 等信息。
- 每個組件對象中都儲存了該組件所屬的節(jié)點 id 和組件的一些數(shù)據(jù)。
而這些 id（__id__）其實就是對象在數(shù)組中的下標。
比如 background 節(jié)點的父節(jié)點 id 為 2，那么就是數(shù)組中的第 3 個對象，即 _name 為 Canvas 的節(jié)點對象；又如 Main Camera 節(jié)點上有一個組件的 id 為 4，那就是數(shù)組中的第 4 個對象：cc.Camera 對象。
生成節(jié)點樹
想要判斷場景是否引用了某個資源，只需要檢查場景的數(shù)據(jù)中是否包含資源的 uuid 即可。
但是，如果想要獲取具體引用的節(jié)點和組件，而扁平化的數(shù)據(jù)結(jié)構(gòu)是非常不利于查找的。
所以在正式開始查找之前，先將場景的數(shù)據(jù)轉(zhuǎn)為樹形結(jié)構(gòu)（節(jié)點樹），且只留下節(jié)點和組件對象中一些有用的屬性，如 _name、__type__ 和 __uuid__，還要將節(jié)點的完整路徑保存起來。
? 具體生成節(jié)點樹的代碼在這里（代碼太長，就不貼了）：
傳送門：https://gitee.com/ifaswind/ccc-references-finder/blob/v1.1.0/main.js#L362
? 轉(zhuǎn)換后的場景數(shù)據(jù)結(jié)構(gòu)就像這樣：
轉(zhuǎn)換后的節(jié)點樹至此，我們就擁有了場景的節(jié)點樹，查找引用的任務已經(jīng)變得無比簡單，只需在節(jié)點樹中查詢目標 uuid 即可獲取場景中的所有引用（包括節(jié)點路徑、組件和屬性信息）。
? 而判斷對象中是否包含 uuid 則是用簡單的遞歸實現(xiàn)的：
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?????????????????search(_object[i]);
????????????}
????????}
????}
????search(object);
????return?result;
}
加點魔法
為了加快查詢速度，每個場景和預制體的節(jié)點樹都只會生成一次，所以只有第一次查找會稍微慢一點點（其實也很快）。
另外擴展內(nèi)部監(jiān)聽了項目中場景和預制體的修改，以便及時更新對應的節(jié)點樹。
//?監(jiān)聽資源更新事件
'asset-db:asset-changed'(event,?info)?{
????//?只處理場景和預制體
????if?(info.type?===?'scene'?||?info.type?===?'prefab')?{
????????//?獲取資源的路徑
????????const?path?=?Editor.assetdb.uuidToFspath(info.uuid);
????????//?更新節(jié)點樹
????????this.updateNodeTree(path);
????}
}
查找其它資源中的引用
對于動畫片段、材質(zhì)和字體等資源，只需簡單判斷資源數(shù)據(jù)中是否包含目標 uuid 即可。
? 就像這樣：
//?動畫片段資源（擴展名為?.anim）
if?(extname?===?'.anim')?{
????const?data?=?JSON.parse(Fs.readFileSync(filePath));
????//?截取有效數(shù)據(jù)
????const?curveData?=?data['curveData'];
????//?數(shù)據(jù)中是否包含目標?uuid
????const?contains?=?ObjectUtil.containsValue(curveData,?uuid);
????if?(contains)?{
????????//?獲取文件路徑
????????const?fileUrl?=?Editor.assetdb.fspathToUrl(filePath);
????????//?保存結(jié)果
????????results.push({?type:?typeMap[extname],?fileUrl:?fileUrl?});
????}
}菜鳥小棧
?我是陳皮皮，一個還在不斷學習（如何脫單）的游戲開發(fā)者
一個熱愛分享的 Cocos Star Writer。
?這是我的個人公眾號，專注但不僅限于游戲開發(fā)和前端技術分享。
?每一篇原創(chuàng)都非常用心，你的關注就是我原創(chuàng)的動力！