在使用 Cocos Creator 开发项目的过程中,为了提高开发效率我们开发了很多扩展插件,本文介绍常用的几款,抛砖引玉,希望给大家带来帮助。
![32cdfd103e36d60e7f67ebe6a26e6e71.png](https://i-blog.csdnimg.cn/blog_migrate/a78e63e0ffe9a80b9246af77039448e8.png)
网页扩展:运行时查看场景节点树
Cocos Creator 本地项目通常会在 Chrome 上调试运行,借助 Chrome 强大的开发者工具,我们可以对网页的性能、网络、脚本逻辑等进行调试优化。然而对于游戏来说,场景中的节点组件信息并没有办法直观的获取和修改,无法快速定位问题。为了解决这个痛点,我们可以修改 Cocos Creator 预览时的网页模版,让其显示更多的场景信息。
下面是修改过后的预览游戏界面
![97e655a1cf0f152a8a43b32015d90a0d.gif](https://i-blog.csdnimg.cn/blog_migrate/b60ebe9175c73240d30ffaa3144ee97f.gif)
扩展了如下功能:
- 场景节点树实时显示,节点、组件属性实时显示更改
- 可视化缓存资源
- 标记场景中节点位置
- 输出节点、组件引用到控制台
源码:
https://github.com/potato47/ccc-devtools
此页面使用了 vue + vuetify 开发,对于单页面应用来说 vue 是非常好的选择,大家也可以基于这种方式来定制自己项目的预览界面。
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“ 来下载使用。
![96a0eb69a8c3d52e2a0a052691b908da.png](https://i-blog.csdnimg.cn/blog_migrate/5cb4c4d45cff843fa0005be72a232eef.png)
下面是预览效果:
- js代码支持函数跳转
![21957e31561e95a84de004ae74b34300.gif](https://i-blog.csdnimg.cn/blog_migrate/e0cb53d81467ee88198d1413bcaf01d8.gif)
- js代码提示
![654f64f5754091c801f6d059cc58f6ba.gif](https://i-blog.csdnimg.cn/blog_migrate/3ba1a91febe259cdf2d1e4cc55678c34.gif)
- 模块跳转
![f84570f386c97936691e3a844e7f067f.gif](https://i-blog.csdnimg.cn/blog_migrate/7b833614631f115c4a53e23848a4d91b.gif)
源码:
https://github.com/potato47/vscode-cocos-creator-js
编辑器扩展:微信小游戏子包依赖检查
得益于 Cocos Creator 优秀的跨平台能力,我们的项目上线了 Android、iOS、Web 和微信小游戏平台。由于微信平台对代码包大小有限制,在上线微信小游戏时我们使用了代码分包功能,但是项目开发过程中有些模块互相耦合,导致分包后主包与子包或者子包之间有依赖,在被依赖包加载前就对其进行导入会导致程序出错。为了解决这个问题我们开发了一款 Creator 插件,可以对子包依赖自动检测。效果如下:
![8eb48a552cc781fef1190d957532f396.png](https://i-blog.csdnimg.cn/blog_migrate/4f84f36ac4c5533724972f73e6a36f67.png)
点击检查依赖按钮后,插件会自动检查所有子包间的依赖,并可视化的显示出来,点击文件名定位到脚本位置,根据修改建议修改即可。
源码:
https://github.com/potato47/wx-subpackage-helper
编辑器扩展:快速打开场景
在使用 Cocos Creator 编辑器过程中个人体验最不好的就是资源管理器里的搜索功能了,在 1.x 版本搜索资源时每输入一个字母都会调用一次全局过滤资源的函数,输入过程中就会感觉到持续的卡顿,在 2.x 版本稍微优化了一下体验,改为敲回车再执行过滤函数,但在资源繁多的项目里搜索依然会卡顿。为了解决这个不大但影响心情的问题,我们开发了一款搜索插件,可以快速搜索打开场景或者预制体资源。无需等待,无需鼠标。
![4620d1dc534b11439f0b77d5f5e5df02.gif](https://i-blog.csdnimg.cn/blog_migrate/b63c7f252bd8384d6b4c977e47e65855.gif)
源码:
https://github.com/potato47/cocos-creator-quick-open-x
控制台扩展:控制台查看节点树,节点属性
通过 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()
, 就可以查看当前场景的节点树结构了。
![c91fad1fb7704b0e105ca989bf9f1fe7.png](https://i-blog.csdnimg.cn/blog_migrate/6ec0cc418b1f4a8f33fa6cc6f92fd757.jpeg)
上面的功能还很简陋,经过扩展我们可以获得更多的功能
![9fd4d600fc922d7afcd6d224f5d32a35.png](https://i-blog.csdnimg.cn/blog_migrate/2e45f01a3dcb7cf97a0227ec38191e44.png)
每个节点后边会附带常见的几个属性和唯一id,通过 cc.cat(id)
即可获得这个节点的引用,提高调试效率。
源码:
https://github.com/potato47/ccc-devtools/blob/master/libs/js/cc-console-utils.js
适用于 Cocos 的 JSC 加解密工具
Cocos Creator 在构建的时候支持对脚本进行加密和压缩。
![4ed27e0180c058b92568ae6661c0b1f3.png](https://i-blog.csdnimg.cn/blog_migrate/f82d411b18072145f9021d7764b5c6b0.jpeg)
然而,官方并没有提供一个解压和解密的工具。这给 jsc 的二次修改和重用带来了不便。
本工具弥补了这个不足:提供了与 Cocos Creator 相同的加密、解密、压缩、解压的方法。可以很方便地对构建得到的 jsc 进行解密、解压得到 js ,也可以将 js 压缩、加密回 jsc 。
源码:
https://github.com/OEDx/cocos-jsc-endecryptor
参考
- 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