Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Cocos Creator 编辑器扩展:Quick Finder

Cocos Creator 编辑器扩展:Quick Finder

作者头像
陈皮皮
发布于 2022-03-29 06:50:44
发布于 2022-03-29 06:50:44
1.1K00
代码可运行
举报
文章被收录于专栏:菜鸟小栈菜鸟小栈
运行总次数:0
代码可运行

前言

这一天,渣渣皮终于找回了他的帐户密码...

🎉 渣 皮 工 厂 再 次 营 业 !

渣皮这次给大家奉上的扩展是:Quick Finder

Quick Finder

🤠 这是一个不仅能够提升效率,更重要的是能够提升幸福感的扩展!

想找文件?按下 F1,只需输入模糊的关键字,相关文件即刻奉上,场景和预制体间切换更是来去自如!

轻轻一键,尽在掌握!

😎 老板再也不用担心我高血压啦!

渣皮剧场

🎬 情景再现

渣皮目前工作中的项目相比以前要大不少,项目的结构也比较复杂,整个项目 assets 目录下有近 9000 个文件(不包括 meta 文件)。

每当我想要打开某个场景和预制体,或者找某个文件,我都需要一层一层地翻文件夹。

万一我不知道文件的准确名称,又不知道在哪个文件夹,那是真不好找...(🌡️ 血压++)

🤖 不太对劲

这时就有头铁的小伙伴要说了:

“你个辣鸡瞎了吗!编辑器里不是自带一个搜索吗!”

自带的搜索确实能用,但是我小声表示拒绝。

能用,但是不完全能用~[手动狗头]

其实对于文件不多的项目来说,这个搜索没啥问题。

但是对于文件稍微多一些的项目,搜索就有点慢了,在配置不高的电脑上搜索还会卡顿一下...(🌡️ 血压++)

最重要的一点就是:自带的搜索不支持模糊搜索!你必须将文件的名字拼对才搜得出来!

😹 以上,就是我开发这个扩展的目的,也就是降血压(误)。


正文

📚 本文主要包含两大部分:

  1. 扩展介绍
  2. 技术解析

扩展介绍

简介

首先,Quick Finder 是一个 Cocos Creator 编辑器扩展。

主要用于快速搜索并打开项目中的场景和预制体,或者快速定位项目中的任意文件。

使用起来很简单,通过按下键盘快捷键(默认 F1)来呼出搜索栏,输入关键字即可(支持不连续模糊搜索)。

视频

截图

搜索栏

截图

下载 & 安装

扩展商店安装

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

在上方搜索栏中输入“Quick Finder”并搜索就可以找到本插件,点进去直接安装即可(建议安装到全局)。

Cocos 商店

Quick Finder:https://store.cocos.com/app/detail/2745

自行下载安装

在扩展仓库的发行版处下载最新的扩展压缩包。

发行版:https://gitee.com/ifaswind/ccc-quick-finder/releases

下载完成后将压缩包解压:

  • Windows:解压到 C:\Users\${你的用户名}\.CocosCreator\packages\ 目录下
  • macOS:解压到 ~/.CocosCreator/packages/ 目录下

以 Windows 为例,扩展的 main.js 文件在我的电脑上的完整目录为 C:\Users\Shaun\.CocosCreator\packages\ccc-quick-finder\main.js

使用说明

搜索
  1. 按下快捷键(默认为 F1)或者点击编辑器顶部菜单栏中的 扩展 -> Quick Finder -> 搜索 即可打开搜索栏。
  2. 在搜索栏中输入关键词就会得到符合条件的文件列表。
  3. 滑动鼠标滚轮可以滚动列表;按下键盘的上下箭头键可以选择文件;按下左右箭头键可以在编辑器内的资源管理器中定位当前选中的文件。
  4. 找到目标文件后,鼠标点击或者按下回车键即可快速打开(仅场景和预制体)或在资源管理器中定位文件。

搜索栏失焦后会自动关闭,点击搜索栏外的任意位置或者按下 Esc 按键也可以关闭搜索栏。

设置

点击编辑器顶部菜单栏中的 扩展 -> Quick Finder -> 设置 即可打开扩展的设置面板。

设置面板

在设置面板中你可以更换打开搜索栏的快捷键,也可以自定义一个自己喜欢的快捷键。

不过需要注意的是,并非所有的按键都可以使用,因为有些快捷键已被系统或 Cocos Creator 占用。

键盘快捷键参考:https://www.electronjs.org/docs/api/accelerator

技术解析

搜索栏

选择方案

🔎 关于搜索栏,我一开始的想法是做成和 macOS 的 Spotlight(聚焦)一样的样式。

聚焦

但是,Cocos Creator 编辑器提供的窗口限制太多了,功能上也有缺失,如没有无边框模式,无法设置透明度等...

🤪 这可不行!功能可以砍,档次不能低!

不过好消息是,我们可以在编辑器中直接使用 Electron 的接口来创建窗口。

👻 Cocos Creator 与 Electron 应该有许多小伙伴都知道,Cocos Creator 的编辑器就是基于 Electron 开发的。 所以我们可以直接在扩展中引入 Electron 并使用,不需要任何额外的操作。

😎 就这么办!

最终我选择了 [ Electron + Vue 2.x ] 的组合来制作这个搜索栏。

一顿打码之后,我们就拥有了这么一个搜索栏...

别笑!我自己感觉还挺满意的!

搜索栏

看起来和 Spotlight 不能说一模一样,只能说毫不相干哈哈哈哈哈~

😹 这可能是因为写着写着我有了自己的想法,肯定不是因为做不出来,信我!

给自己挖坑:关于搜索栏的开发我会单独写一篇文章来详细介绍,着急的小伙伴也可以直接翻源码。

两种窗口

这里给大家简单说一下编辑器提供的窗口和使用 Electron 创建的窗口之间的区别。

编辑器的窗口

首先,编辑器提供的窗口实际上也是使用 Electron 创建的,只不过编辑器内部对窗口进行了二次封装,并建立了自己的开发规范。

可以把窗口比喻成一个固定样式的画框,你需要按照一定的规范来进行作画。

  • 优点:集成了多种布局和样式,与编辑器交互较为方便,让我们可以快速开发出一个与编辑器风格相匹配的面板,并且面板可以嵌入到编辑器中。
  • 缺点:限制颇多,离不开“窗口”,调试起来比较麻烦,还有二次封装带来的一些“坑”,需要开发者对 Shadow DOM 有一定了解,无形中增加了不少开发成本。

还有就是,编辑器集成的 Vue 版本太旧了(大概是 0.x 的样子),渣皮建议自行下载并引入最新的 Vue 2.x 来进行开发。

Electron 窗口

如果直接使用 Electron 创建窗口,我们可以把扩展的页面完成当做一个 Web 前端项目来做,写起来舒服多了。

这种窗口也可以比喻成一个画框,边框的样式可以自定义,框中的内容可以随意发挥。

  • 优点:解锁各种窗口特性(无边框、透明等),自由度拉满,各种框架都能直接用,可以搞出各种花样。
  • 缺点:需要一定的 Web 前端知识,与编辑器交互较为麻烦,且不能嵌入到编辑器中。

搜索

搜索文件无非就是遍历项目中所有文件,并与输入的名称进行对比。

遍历项目文件

为了不遗漏任何文件,我们需要使用递归去遍历整个项目的文件,这个操作听起来有点不太聪明的样子,会不会很慢?

实际上,由于扩展只进行信息采集(名称,扩展名),并不读取文件内容,处理起来还是非常快的。项目里 8000+ 的文件也就是一下子的功夫,可以说是无感。

所以我选择在每次打开搜索栏之后进行文件信息的采集,且关闭搜索栏后也不会缓存本次的结果数据。

另外有一点就是,由于搜索栏失焦后就会自动关闭,所以也基本不会有新增文件而没有被采集到的情况。

编辑器自带的资源搜索慢的原因可能就是需要对文件做一些处理吧~

文件名称匹配

这一项任务主要是通过正则表达式中的非贪婪匹配来完成的。

非贪婪匹配 (懒惰匹配)

🧲 非贪婪匹配的特点是:在满足匹配时,匹配尽可能少的内容。

我们只需在输入的关键词的字与字之间插入表达式 .*? 即可。

这时不了解正则表达式的小伙伴懵了,这几个符号我都认识,但是连起来就看不懂了哈哈哈~

在正则表达式中,这三个符号的含义分别是:

  • .: 表示匹配除换行符(\n)外的任意单字符
  • *: 表示前一个字符 0 次或无数次
  • ?: 表示前面的内容出现 0 次或 1 次

.* 合体就变成了贪婪匹配(.*),而再加上 ? 就是非贪婪匹配(.*?)。

贪婪匹配的特点是:在满足匹配时,匹配尽可能多的内容。

📝 示例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const keyword = 'hoe';
// 插入表达式后变成:'h.*?o.*?e'
const pattern = keyword.split('').join('.*?');
const regExp = new RegExp(pattern, 'i');
const names = [
    'handsome', 'hello', 'hardware',
    'home', 'ohh', 'chrome', 'hour'
  ];
for (let i = 0; i < names.length; i++) {
  //匹配
  if (regExp.test(names[i])) {
    // 匹配成功
    // 'handsome'、'home'、'chrome'
  } else {
    // 匹配失败
    // 'hello'、'hardware'、'ohh'、'hour'
  }
}

这样一来,我们就可以瞬间从成千上万个文件中找出与关键词相匹配的文件了。

🤡 妙啊!真是妙蛙种子吃着妙脆角进了米奇妙妙屋,妙到家了!

排序

当名称匹配成功后,还需要保存匹配结果的长度,然后就可以根据这个长度来进行匹配度排序。

📝 示例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const names = [
    'handsome', 'hello', 'hardware',
    'home', 'ohh', 'chrome', 'hour'
  ];
const results = [];
for (let i = 0; i < names.length; i++) {
  // 匹配
  if (regExp.test(names[i])) {
    // 匹配到的字符串长度
    const similarity = names[i].match(regExp)[0].length;
    results.push({ name, similarity });
    // 匹配到的内容
    // 'handsome'、'home'、'hrome'
  }
}
// 排序(similarity 越小,匹配的长度越短,匹配度越高)
results.sort((a, b) => a.similarity - b.similarity);
// 排序后:'home'、'chrome'、'handsome'

经过排序之后,匹配度越高的文件排越前,这下更容易找到目标文件了。

🤩 非常的鹅妹子嘤啊!

渣皮感言

🐮🍺 不得不说,正则表达式真的很方便很强大(同时也相对吃性能)。

😫 但是正则表达式也真的太难了啊啊啊呜呜呜...

不得不佩服那些能够熟记正则的大佬。

菜鸟小栈

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

🎨 专注但不仅限于游戏开发和前端技术分享。

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

Input and output.

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-04-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 菜鸟小栈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Cocos Creator 编辑器扩展:一键查找资源引用
当你想要确定一个资源被哪些节点引用的时候,使用资源管理器的查找引用却只能精确到预制体或场景。
陈皮皮
2020/12/01
2.4K0
Cocos Creator 编辑器扩展:一键查找资源引用
Cocos Creator基础教程(9)—优化代码编辑器
Cocos Creator游戏开发主要是使用JavaScript语言,这里向大家推荐Visual Studio Code和Webstorm两款JavaScript神级编辑器。这两款编辑器的安装都很简单,这里主要介绍在Cocos Creator项目中如何调整编辑器配置,以提升开发效率。
张晓衡
2019/09/11
2K0
Cocos Creator基础教程(9)—优化代码编辑器
用 Cocos Creator 3.8.5 构建一个 HarmonyOS NEXT 应用
今天 Cocos Creator 3.8.5 发布,我们用 Cocos Creator 3.8.5 构建一个 HarmonyOS NEXT 应用。
徐建国
2024/11/21
2880
用 Cocos Creator 3.8.5 构建一个 HarmonyOS NEXT 应用
Cocos Creator基础教程—资源结构(5)
对于游戏开发来说,除了编辑游戏界面、制作游戏动画、编写代码这些具体的工作外,大家还需要对游戏资源结构要非常清楚。如果马虎上阵,等你把项目运作做起来后,一是工作效率不会太高,二是难以精确控制资源,最后甚至会因此陷入混乱。
张晓衡
2019/09/11
1.2K0
Cocos Creator基础教程—资源结构(5)
Cocos Creator 3D 正式开放公测,赶紧上车!
大家好,转眼距离上一篇公测版本发布的帖子已经过去两个月,Cocos Creator 3D 终于要正式面向所有开发者开放了!如果你已经迫不及待想要尝试,请直接拉到文章末尾,你会找到所有你需要的内容。
张晓衡
2019/09/11
1.8K0
Cocos Creator 3D 正式开放公测,赶紧上车!
Cocos Creator 制作第一个游戏
您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程,但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法,这一章将满足您的好奇心。完成本章教程之后,您应该能获得足够上手制作游戏的信息,不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。
bering
2019/12/02
2.1K1
[Cocos Creator] 一个开源的自动代码混淆插件
1.将插件文件夹放入到 ~/.CocosCreator/packages(Windows 用户为 C:\Users\${你的用户名}\.CocosCreator\packages),或者放入到${你的项目路径}/packages 文件夹下即可完成扩展包的安装。
陈皮皮
2020/07/10
3.5K1
[Cocos Creator] 一个开源的自动代码混淆插件
Cocos Creator基础教程(10)—预览调试
游戏预览是开发中的一个重要环节,Cocos Creator游戏引擎基于JavaScript语言有着丰富强大的预览调试能力,这次我们介绍预览调试相关的技术,了解一下这方面的知识相信对你也非常有帮助。
张晓衡
2019/09/11
3.1K0
Cocos Creator基础教程(10)—预览调试
Cocos Creator 源码解读:siblingIndex 与 zIndex
节点(cc.Node)作为 Cocos Creator 引擎中最基本的单位,所有组件都需要依附在节点上。
陈皮皮
2021/08/04
2.9K0
Cocos Creator 3D 物理模块介绍
为了让游戏开发更加简单、友好和高效,Cocos Creator 3D 在研习和摸索中设计了一套比较基础的物理组件,并且还在持续完善中。尽管当前的组件功能还十分有限,但是相信在有了之前的组件设计经验后,很快就可以有更多强大且易用的物理组件。
张晓衡
2019/10/22
2.4K0
Cocos Creator 3D 物理模块介绍
Cocos Creator基础教程(8)—加载预制件
我们上篇讲了场景切换并编写了LoadScene场景加组件,这次我们在场景里面创建独立的子界面或子窗口。在Cocos Creator中实现子界面的最好方案就是: 预制件。
张晓衡
2019/09/11
3.1K0
Cocos Creator基础教程(8)—加载预制件
Cocos论坛九问九答
今天周未,Shawn将之前在Cocos论坛中回答的问题,整理了部分继续我的分享之路!
张晓衡
2019/09/11
1.7K0
Cocos论坛九问九答
【QT】:QT(介绍、下载安装、认识 QT Creator)
所谓客户端就是直接和用户打交道的一端从程序,就比如 chrome,cctalk,……
IsLand1314
2024/12/20
10.5K0
【QT】:QT(介绍、下载安装、认识 QT Creator)
推荐几个实用Cocos Creator插件!看过的都说好
2021年过半,Cocos Store 上目前已超过 400+ 资源,出现了有不少实用而有趣的插件工具,推荐几个给大家把玩,希望本文能对大家的工作有所帮助或启发!
张晓衡
2021/07/08
3.8K0
Creator3D新版本震撼来袭
大噶猴,在预祝大噶中秋国庆双节快乐的同时,Cocos 也带来了 Creator 3D v1.2 介个船新版本,几需体验七天,里造会跟我一样,爱向这款引擎!
张晓衡
2020/10/10
1.2K0
Creator3D新版本震撼来袭
用 Cocos Creator 制作平台跳跃游戏
平台跳跃类游戏如《超级马里奥》《Celeste蔚蓝》等,非常考验玩家的操作和判断,有着非常本真的游戏乐趣。这类游戏乍一看,挺容易做的,但是要做好却不太容易。今天,我将使用 Cocos Creator v2.1.2 演示如何灵活快速地使用 Cocos Creator 来制作这类经典的横版平台跳跃类游戏,主要目的是帮助大家熟悉组件的用法,横版游戏实现方法很多,这里不做讨论!
一枚小工
2020/03/02
2.5K0
Cocos 引擎 UI 全新升级:进一步提升编辑器体验
Cocos Creator 3D 全面公测已有一段时间,距离正式发布已经不远了。为了迎接即将发布的 Cocos Creator 3D,我们对 Cocos Creator 的图标进行了全新升级,力求在满足多元化需求的同时,保持 Cocos 品牌的统一性。为了进一步提升产品的视觉体验,我们对 Cocos Creator 编辑器 UI 也进行了诸多改进。
张晓衡
2019/10/10
7480
Cocos 引擎 UI 全新升级:进一步提升编辑器体验
Cocos游戏开发入门最佳实践
因为公司的业务需求,近期学习了CocosCreator这款游戏引擎的开发,也基于此上线了一款游戏,因此写这系列文章记录一下我从入门到项目发布的学习过程。
异名
2020/06/09
1.4K0
JS基础 | Cocos Creator 开发环境搭建
编程并不只是简单地写代码,而是要将编写的代码运行在指定平台环境上,在此之前我们还需要搭建生产代码的环境。
张晓衡
2019/09/11
2.6K0
JS基础 | Cocos Creator 开发环境搭建
Cocos Creator之脚本语言讲解
在资源管理器窗口中点击鼠标右键,显示菜单中点击新建,选择新建的脚本类型,这里举例就选择菜单中的JavaScript,或者如下图点击创建按钮也可。
李小白是一只喵
2021/04/27
1.4K0
Cocos Creator之脚本语言讲解
相关推荐
Cocos Creator 编辑器扩展:一键查找资源引用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验