首个支持 Creator 2.x 及 3.x 的 Inspector 插件来了!技术实现思路大公开

COCOS

共 2138字,需浏览 5分钟

 ·

2021-08-07 12:23

Cocos Inspector 是一款 Cocos Creator 游戏的节点树实时预览工具,可用于查看运行时节点树、实时DrawCall分析、节点属性控制、组件搜索、组件属性过滤、节点引用定位、游戏控制、Cocos 常用变量查看与常用开关控制等等。Cocos Inspector 可以被使用者扩展强化,作者正持续维护优化、并不断提供更多扩展能力。


■  跨平台,支持 Mac/windows

■  支持 Cocos Creator 2.x、3.x

■ 推出 Cocos Inspector Lite 供开发者体验,支持 2.x

■ 插件地址:

https://store.cocos.com/app/detail/2940


>>Cocos Inspector 完整版界面


Cocos Inspector 插件作者 babyfaction 将和我们分享他的技术实现思路,希望可以给大家带来启发。




功能亮点


  • 实时 DrawCall 分析,细化到节点的 DrawCall 计数功能


  • 节点实时高亮演示


  • 扩展功能


  • 组件搜索和属性链接


  • 支持 Creator 2.x、3.x


技术实现思路


Cocos Inspector 使用到的技术主要有 electron、Node.js、Vue.js、html、CSS。整个项目的核心代码分为3部分, api.js、App.js、main.js:


  • main.js 负责主进程,与 Cocos Creator 通讯

  • App.js 渲染进程,使用 Vue.js 实现界面,同时通过 WebView 来与 Cocos Creator 游戏页面交互

  • api.js 实现 App.js 与游戏交互需要的所有 API(例如获取节点树数据、搜索组件等),在 WebView 页面加载完成时会被注入到 WebView 中


1

节点树实时刷新


目前是检测到节点的 Active/DeActive,remove/add 时会刷新节点树,并且每帧最多只会刷新一次,如果同一帧内节点有许多变化,也只会计算一次,所以节点树的性能感觉还可以,这个逻辑在 api.js 中实现。


然后如果关闭了自动刷新,就不做任何计算,只是通知渲染进程的 App.js :节点树可以刷新了, 然后会出现手动刷新按钮。


2

组件(cc.Component)细节


组件属性中可能会有一些属性引用其他组件或者节点,在 Cocos Inspector 会显示成蓝色文字, 单击可以定位到对应的节点,表现如同在 Cocos Creator 编辑器中;这个特性不得不自卖自夸一下,真的很实用,特别是一些组件互相之间有关联,但是绑定的节点比较深,可能还记不住名字的时候。


另外组件的一些枚举类型的属性值在运行时都是数字,现在大部分枚举类型,在 Cocos Inpsector 已经转换过,显示成对应的枚举类型名称了,更加直观,比如 Widget.alignMode 会显示成 ALWAYS。


3

WebView 与渲染进程页面通信


最开始我是使用 iframe 来嵌入游戏页面的,结果发现有许多跨域安全限制,后来发现了electron 有 WebView,然后我又把 WebView 当作 iframe 对待, 所以 api.js 和 App.js 之间使用 postMessage 来通讯,可惜根本没有效果,后来在 StackOverflow 查询后,使用 electron 的 ipcRenderer.sendToHost() 才得以实现。


4

旧版本 Cocos Creator 兼容


旧版本的 Cocos Creator 使用的 Electron 版本很旧,好像是 Electron 1.x,新版 Cocos Creator 使用 Electron 5.x,而旧版 Electron 的 CSS 和 JS 版本都很旧,很多新的特性无法使用,此时可以通过 process.versions.electron 判断一下,然后切换不同的 CSS 和 JS。




有任何问题或有什么期待实现的功能,欢迎移步 Cocos 官方论坛讨论贴一起交流探讨:

https://forum.cocos.org/t/topic/116855



放“价”

• 即日起至8月6日,Cocos Inspector Lite 限时优惠仅售1元,点击文末【阅读原文】跳转至 Cocos Store 即可购买;
• 截止8月9日12:00,C 姐将为评论区留言点赞数前3名送上 Cocos Inspector 完整版微店6折,赶快在评论区占个座儿吧。


往期精彩

浏览 148
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报