首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
zookeeper curator使用caches实现各种监听
1、篇首语 curator是zookeeper的一个高级api开发包。封装了zookeeper众多的recipes,并且实现了一些新的recipes原语,最重要的是基于zookeeper提供的各种机制实现了更健壮的连接和异常处理。 本文将其中比较常用的一种recipe,就是cache。 2、各种Caches cache是一种缓存机制,可以借助cache实现监听。 简单来说,cache在客户端缓存了znode的各种状态,当感知到zk集群的znode状态变化,会触发event事件,注册的监听器会处理这些事件。是
用户1225216
2018/03/05
2.3K0
zookeeper curator处理会话过期session expired
本文介绍在使用curator框架的时候如何handle session expire。 1、什么是zookeeper的会话过期?  一般来说,我们使用zookeeper是集群形式,如下图,client
用户1225216
2018/03/05
4.2K0
zookeeper curator处理会话过期session expired
浅谈基于 Zookeeper 实现分布式锁对 Maxwell 完成高可用
1. 背景 ❝麦斯威尔CDC框架使用方法,但后来声称基于筏子的框架实现了很高的可用性,存在MySQL协议进行相关测试试验发现上的问题,然后还是通过性克隆这个框架,通过Zookeeper框架,完成对Maxwell的高可用。 ❞ 2.原理 2.1.文字介绍 ❝分布式服务通过在代码里约定的路径向动物园管理员中注册自己,注意这里注册需要「临时有序」的子节点,分布式服务根据自己注册完成的子节点的先后顺序,依次监听自己前置位的子等,当 1.「变成子节点的时候」消失,且 2. 自己为当前的 Zookeeper 路径
857技术社区
2022/05/17
7700
浅谈基于 Zookeeper 实现分布式锁对 Maxwell 完成高可用
SpringBoot3集成Zookeeper
ZooKeeper是一个集中的服务,用于维护配置信息、命名、提供分布式同步、提供组服务。分布式应用程序以某种形式使用所有这些类型的服务。
知了一笑
2024/01/29
2550
SpringBoot3集成Zookeeper
【Zookeeper技术系列】「Curator」给大家介绍Zookeeper的”开发伴侣”(基础篇)
CuratorFramework是Netflix公司开源的一套Zookeeper客户端框架,它作为一款优秀的ZooKeeper客户端开源工具,主要提供了对客户端到服务的连接管理和连接重试机制,以及一些扩展功能,它解决了很多ZooKeeper客户端非常底层的细节开发工作。
码界西柚
2022/01/12
1.1K0
【Zookeeper技术系列】「Curator」给大家介绍Zookeeper的”开发伴侣”(基础篇)
进阶分布式系统架构系列(十四):Zookeeper 开源客户端工具
前面介绍了 Zookeeper 集群 ZAB 协议、配置中心、注册中心、数据与存储、会话与事务管理、分布式锁等相关的知识点,今天我将详细的为大家介绍 zookeeper 开源客户端相关知识,希望大家能够从中收获多多!如有帮助,请点在看、转发支持一波!!!
民工哥
2023/09/09
3150
Zookeeper开源客户端Curator之基本功能讲解
程序新视界
2018/01/08
1.7K0
Zookeeper开源客户端Curator之基本功能讲解
ZooKeeper 客户端之 Curator
ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,它是集群的管理者,监视着集群中各个节点的状态根据节点提交的反馈进行下一步合理操作。最终,将简单易用的接口和性能高效、功能稳定的系统提供给用户。
磊叔的技术博客
2025/06/07
1450
ZooKeeper 客户端之 Curator
zk分布式任务管理
在我们的系统开发过程 中不可避免的会使用到定时任务的功能,而当我们在生产环境部署的服务超过1台时,就需要考虑任务调度的问题,防止两台或多台服务器上执行同一个任务,这个问题今天咱们就用zookeeper来解决。
写代码的猿
2019/05/07
1.4K0
zk分布式任务管理
ZooKeeper入门(二):ZooKeeper常用命令介绍及使用Curator客户端实现分布式配置中心
在上一篇文章中ZooKeeper入门一给大家介绍了分布式协调中间件ZooKeeper的下载安装以及集群的搭建,那么本篇文章我们就来继续介绍一下ZooKeeper的一些需要补充的重要概念、客户端的常用命令以及业界操作ZooKeeper的高度封装的客户端CuratorFramework,并使用它实现一个自定义的分布式配置中心。下面进入正文。
用户3587585
2022/09/21
2.7K0
ZooKeeper入门(二):ZooKeeper常用命令介绍及使用Curator客户端实现分布式配置中心
zookeeper源码分析(9)-Curator相关介绍
zookeeper常用的Java客户端有三种:zookeeper原生的、Apache Curator、开源的zkclient。Curator官网上这么说
Monica2333
2020/06/22
2.4K0
SpringBoot2 整合 Zookeeper组件,管理架构中服务协调
一、Zookeeper基础简介 1、概念简介 Zookeeper是一个Apache开源的分布式的应用,为系统架构提供协调服务。从设计模式角度来审视:该组件是一个基于观察者模式设计的框架,负责存储和管理数据,接受观察者的注册,一旦数据的状态发生变化,Zookeeper就将负责通知已经在Zookeeper上注册的观察者做出相应的反应,从而实现集群中类似Master/Slave管理模式。ZooKeeper的目标就是封装好复杂易出错的关键服务,将简单易用的接口和性能高效、功能稳定的系统提供给用户。 2、基本理论 数
知了一笑
2020/01/13
5230
SpringBoot2 整合 Zookeeper组件,管理架构中服务协调
【Zookeeper】Apach Curator 框架源码分析:初始化过程
Curator是netflix公司开源的一套zookeeper客户端,目前是Apache的顶级项目。和ZK的原生客户端相比,Curator的抽象层次要更高,同时简化了ZK的常用功能开发量,比如Curator自带连接重试、反复注册Watcher、NodeExistsException 异常处理等等。
阿东
2023/07/10
1.5K0
【Zookeeper】Apach Curator 框架源码分析:初始化过程
【Zookeeper】Apach Curator 框架源码分析:初始化过程(一)【Ver 4.3.0】
Curator是netflix公司开源的一套zookeeper客户端,目前是Apache的顶级项目。
阿东
2023/09/02
6970
【Zookeeper】Apach Curator 框架源码分析:初始化过程(一)【Ver 4.3.0】
Zookeeper开源客户端Curator之事件监听详解
程序新视界
2018/01/08
2K0
Zookeeper开源客户端Curator之Master/Leader选举
本文介绍了如何使用Curator实现分布式协调,包括Leader选举、分布式锁和分布式队列。首先介绍了Leader选举的原理和常用算法,然后通过实例展示了如何使用Curator实现分布式协调。最后,总结了Curator在分布式协调中的应用场景和注意事项。
程序新视界
2018/01/08
2.2K0
Apache ZooKeeper - 使用Apache Curator操作ZK
Curator是netflix公司开源的一套zookeeper客户端,Apache的顶级项目
小小工匠
2021/08/17
1.7K0
zk基础—5.Curator的使用与剖析一
Guava is to Java what Curator is to ZooKeeper,引入依赖如下:
东阳马生架构
2025/06/28
560
Apache Curator操作zookeeper的API使用
配置完依赖后,我们就可以来写一个简单的demo测试与zookeeper服务端的连接。代码如下:
端碗吹水
2020/09/23
1.1K0
Apache Curator操作zookeeper的API使用
zookeeper使用
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
suveng
2019/09/18
5830
推荐阅读
相关推荐
zookeeper curator使用caches实现各种监听
更多 >
交个朋友
加入腾讯云技术交流站
洞悉AI新动向 Get大咖技术交流群
加入HAI高性能应用服务器交流群
探索HAI应用新境界 共享实践心得
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验