山东网站营销seo电话,网站建设包含哪些建设阶段,wordpress主题添加设置选项,三门峡河南网站建设在使用 Cocos Creator 开发项目的过程中#xff0c;为了提高开发效率我们开发了很多扩展插件#xff0c;本文介绍常用的几款#xff0c;抛砖引玉#xff0c;希望给大家带来帮助。腾讯开心鼠英语网页扩展#xff1a;运行时查看场景节点树Cocos Creator 本地项目通常会在 Ch… 在使用 Cocos Creator 开发项目的过程中为了提高开发效率我们开发了很多扩展插件本文介绍常用的几款抛砖引玉希望给大家带来帮助。腾讯开心鼠英语网页扩展运行时查看场景节点树Cocos Creator 本地项目通常会在 Chrome 上调试运行借助 Chrome 强大的开发者工具我们可以对网页的性能、网络、脚本逻辑等进行调试优化。然而对于游戏来说场景中的节点组件信息并没有办法直观的获取和修改无法快速定位问题。为了解决这个痛点我们可以修改 Cocos Creator 预览时的网页模版让其显示更多的场景信息。下面是修改过后的预览游戏界面扩展了如下功能场景节点树实时显示节点、组件属性实时显示更改可视化缓存资源标记场景中节点位置输出节点、组件引用到控制台源码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“ 来下载使用。下面是预览效果:js代码支持函数跳转js代码提示模块跳转源码https://github.com/potato47/vscode-cocos-creator-js编辑器扩展微信小游戏子包依赖检查得益于 Cocos Creator 优秀的跨平台能力我们的项目上线了 Android、iOS、Web 和微信小游戏平台。由于微信平台对代码包大小有限制在上线微信小游戏时我们使用了代码分包功能但是项目开发过程中有些模块互相耦合导致分包后主包与子包或者子包之间有依赖在被依赖包加载前就对其进行导入会导致程序出错。为了解决这个问题我们开发了一款 Creator 插件可以对子包依赖自动检测。效果如下:点击检查依赖按钮后插件会自动检查所有子包间的依赖并可视化的显示出来点击文件名定位到脚本位置根据修改建议修改即可。源码https://github.com/potato47/wx-subpackage-helper编辑器扩展快速打开场景在使用 Cocos Creator 编辑器过程中个人体验最不好的就是资源管理器里的搜索功能了在 1.x 版本搜索资源时每输入一个字母都会调用一次全局过滤资源的函数输入过程中就会感觉到持续的卡顿在 2.x 版本稍微优化了一下体验改为敲回车再执行过滤函数但在资源繁多的项目里搜索依然会卡顿。为了解决这个不大但影响心情的问题我们开发了一款搜索插件可以快速搜索打开场景或者预制体资源。无需等待无需鼠标。源码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(), 就可以查看当前场景的节点树结构了。上面的功能还很简陋经过扩展我们可以获得更多的功能每个节点后边会附带常见的几个属性和唯一id通过 cc.cat(id) 即可获得这个节点的引用提高调试效率。源码https://github.com/potato47/ccc-devtools/blob/master/libs/js/cc-console-utils.js适用于 Cocos 的 JSC 加解密工具Cocos Creator 在构建的时候支持对脚本进行加密和压缩。然而官方并没有提供一个解压和解密的工具。这给 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
