腾讯在线教育为 Cocos Creator 开发的插件和工具

在使用 Cocos Creator 开发项目的过程中，为了提高开发效率我们开发了很多扩展插件，本文介绍常用的几款，抛砖引玉，希望给大家带来帮助。

腾讯开心鼠英语网页扩展：运行时查看场景节点树

Cocos Creator 本地项目通常会在 Chrome 上调试运行，借助 Chrome 强大的开发者工具，我们可以对网页的性能、网络、脚本逻辑等进行调试优化。然而对于游戏来说，场景中的节点组件信息并没有办法直观的获取和修改，无法快速定位问题。为了解决这个痛点，我们可以修改 Cocos Creator 预览时的网页模版，让其显示更多的场景信息。

下面是修改过后的预览游戏界面：

扩展了如下功能：

场景节点树实时显示，节点、组件属性实时显示更改

可视化缓存资源

标记场景中节点位置

输出节点、组件引用到控制台

源码：

https://github.com/potato47/ccc-devtools

此页面使用了 vue + vuetify 开发，对于单页面应用来说 vue 是非常好的选择，大家也可以基于这种方式来定制自己项目的预览界面。

Cocos 许彦峰：这款插件弥补了 Creator 在游戏运行时实时、动态修改、调试的短板，绝对是快速定位 BUG 的利器。基于这个思路，在社区中也能看到很多变种版本，相对而言，这款插件算是功能最丰富，体验最好的版本。

另外，该扩展基于 vue 开发，Creator 的插件开发也可以无缝使用 vue，墙裂安利！

感谢作者的慷慨开源，看到作者无私的花费精力时间造福大家，点赞！！！论坛帖子直达： https://forum.cocos.org/t/ccc-devtools/91496/54

VS Code 扩展：JavaScript 代码支持函数跳转

Cocos Creator 支持 JavaScript 和 TypeScript 两种语言，如果你是用 VS Code 来开发 Cocos Creator 的 js 项目，那你的编程体验应该不是很好，因为 Cocos Creator 的组件脚本是一套自定义的结构，

const mylog = require('mylog');

cc.Class({

properties: {

node1: cc.Node,

node2: cc.Node,

label1: cc.Label,

label2: cc.Label,

},

start: function() {

this.method1();

},

method1: function() {

console.log('method1');

},

method2: function() {

console.log('method2');

},

});

在这个结构下，VS Code 不能识别 this，当你在 start 方法里输入 this. 的时候无法准确的获得可以访问的属性和方法，也无法通过点击方法名或者模块名来跳转到定义位置。

好在 VS Code 有丰富的扩展 API，通过学习文档[1]，我们开发出了一款让 js 代码支持函数跳转，属性提示的插件。大家可以在 VS Code 插件商店里搜索 “Cocos Creator JS“ 来下载使用。

下面是预览效果:

js 代码支持函数跳转

js 代码提示

模块跳转

源码：

https://github.com/potato47/vscode-cocos-creator-js

Cocos 许彦峰：使用 VS Code 编写 Cocos Creator 游戏，标配！如果能再扩展下对 Prefab、Scene 等 Creator 编辑器之间的联动跳转，完美至极！整个生态和工具，JS 一门语言搞定，WebStorm党表示极度羡慕！

编辑器扩展：微信小游戏子包依赖检查

得益于 Cocos Creator 优秀的跨平台能力，我们的项目上线了 Android、iOS、Web 和微信小游戏平台。由于微信平台对代码包大小有限制，在上线微信小游戏时我们使用了代码分包功能，但是项目开发过程中有些模块互相耦合，导致分包后主包与子包或者子包之间有依赖，在被依赖包加载前就对其进行导入会导致程序出错。为了解决这个问题我们开发了一款 Creator 插件，可以对子包依赖自动检测。效果如下:

点击检查依赖按钮后，插件会自动检查所有子包间的依赖，并可视化的显示出来，点击文件名定位到脚本位置，根据修改建议修改即可。

源码：

https://github.com/potato47/wx-subpackage-helper

Cocos 许彦峰：纠错小助手，根据项目特殊需求定制。我能想象到因为编辑器对外接口有限，作者采用最原始的文件读取方式进行处理，一定很蓝瘦香菇吧，欢迎论坛反馈吐槽，一定虚心接受。

编辑器扩展：快速打开场景

在使用 Cocos Creator 编辑器过程中个人体验最不好的就是资源管理器里的搜索功能了，在 1.x 版本搜索资源时每输入一个字母都会调用一次全局过滤资源的函数，输入过程中就会感觉到持续的卡顿，在 2.x 版本稍微优化了一下体验，改为敲回车再执行过滤函数，但在资源繁多的项目里搜索依然会卡顿。

为了解决这个不大但影响心情的问题，我们开发了一款搜索插件，可以快速搜索打开场景或者预制体资源。无需等待，无需鼠标。

源码：

https://github.com/potato47/cocos-creator-quick-open-x

Cocos 许彦峰：小王子观察到，要正常使用该插件的功能，必须要打开那个附带说明的插件面板，如果能做到安装即可使用就更加完美了，可以考虑：

1. 使用 Electron 创建自己的 BrowserWindow 进行处理，可能需要自己处理好 IPC 消息；

2. 使用 Editor.Scene.callSceneScript 触发对应的逻辑，这样的话，逻辑就需要迁徙到 scene-script 中，期待本插件的后续更新！

控制台扩展：控制台查看节点树，节点属性

通过 Chrome 的开发者工具我们可以直接对原生平台中 Cocos Creator 的 JavaScript 代码进行远程调试，但一些 UI 相关问题依然不好定位，如果能在控制台里查看节点树就会方便很多。

首先介绍一下 console.group 和 console.groupEnd 这两个函数，它们可以组成一个可以折叠的标签，用于将输出信息分组，console.group 默认展开，相应的还有一个 console.groupCollapsed 默认折叠，显然我们可以用它们输出树形结构。

function tree(node = cc.director.getScene()) {

let style = `color: ${node.parent === null || node.activeInHierarchy ? 'green' : 'grey'};`;

if (node.childrenCount > 0) {

console.groupCollapsed(`%c${node.name}`, style);

node.children.forEach(child => tree(child));

console.groupEnd();

} else {

console.log(`%c${node.name}`, style);

}

}

将上述代码粘贴到控制台，然后输入 tree(), 就可以查看当前场景的节点树结构了。

上面的功能还很简陋，经过扩展我们可以获得更多的功能

每个节点后边会附带常见的几个属性和唯一id，通过 cc.cat(id) 即可获得这个节点的引用，提高调试效率。

源码：

https://github.com/potato47/ccc-devtools/blob/master/libs/js/cc-console-utils.js

Cocos 许彦峰：一个 console 都玩的这么 6，很实用的小功能！

适用于 Cocos 的 JSC 加解密工具

Cocos Creator 在构建的时候支持对脚本进行加密和压缩。

然而，官方并没有提供一个解压和解密的工具。这给 jsc 的二次修改和重用带来了不便。

本工具弥补了这个不足：提供了与 Cocos Creator 相同的加密、解密、压缩、解压的方法。可以很方便地对构建得到的 jsc 进行解密、解压得到 js ，也可以将 js 压缩、加密回 jsc 。

源码：

https://github.com/OEDx/cocos-jsc-endecryptor

Cocos 许彦峰：很棒的功能，注意保护好自己的加密密钥。

参考

Cocos Creator 扩展编辑器文档[2]

Cocos Creator 自定义网页预览文档[3]

VS Code 插件开发文档[4]

参考资料

[1]

文档:https://code.visualstudio.com/api/language-extensions/programmatic-language-features

[2]

Cocos Creator 扩展编辑器文档:https://docs.cocos.com/creator/manual/zh/extension/

[3]

Cocos Creator 自定义网页预览文档:https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-preview-template.html

[4]

VS Code 插件开发文档:https://code.visualstudio.com/api/get-started/your-first-extension

感谢腾讯在线教育技术带来的插件分享，作者 Next 在 Cocos 社区也非常活跃，经常帮助开发者解疑答惑。你的一句留言赞美就是对作者最大的鼓励，请不要吝啬您的赞美哟！