太难了?推荐一款实时「节点查看器」效率翻倍!这几个功能太好用了

本公众号由以下老铁赞助,感谢他们❗️

135cbce47808461c597c3bb892dfb6f8.png6fb331267db70a975a640cb9eb4bbfdb.png

480c8bb68d1bcbcfacf7aadbb5d65fb9.png4df92de2f78587c0b2a38c0e7a518f4d.jpeg

你有没有遇到过,创建的节点总是不显示?控制台没有任何异常或报错,你是不是怀疑引擎或系统哪里又 BUG 了?

126d55acb25fff6e72e060272a0d5e6c.jpeg

这绝对不是我的错!其实往往到最后,都是自己不小心犯了一些低级错误,却消耗了大量时间。相信做开发的朋友,都有过这种经历,写代码并不是最耗时间的,最耗时的是调试与测试。

本期晓衡介绍一款超人气 Inspector 插件,基本的节点树查看就不说了,它还支持运行时:节点调试、资源定位、DC调优、预制保存、UI设计模式、信息概览、本地存储查看等功能,可助你在游戏调试时效率飙升,一起来看看吧!

581acd93693dfd7932a80ff2a628a814.png

节点定位

在场景树中,滑过鼠标会高亮对应游戏场景中的节点(矩形外框),右侧属性窗口将展示出该节点的各组件属性。

07d9f0d188fe10b9630fce7b667082ae.gif
节点树滑动高亮选择

Cocos Inspector 的优点在于它的易用性,反相从游戏运行窗口中也可以定位到节点,跟我们在引擎编辑器中一样。开启这项功能,先要点击顶部工具栏【瞄准器】按钮。

811f9d96f68498fbd7715d09048a673f.png

这时在游戏中移动鼠标会命中所经过的节点,点击鼠标展开场景树节点与显示该节点属性。

22753e8bc14739d8746864c5d178bbc7.gif
游戏窗口中定位节点

3D节点的选择,需使用鼠标右键点击【瞄准】按钮来开启,注意它与选择2D节点是互斥的,同一时间只能使用一种方式。

bb31fb7780bbbd1044f28316fbbf6d6e.png
组件属性定位到资源管理器

在展开的组件属性窗口中,点击蓝色字体的属性值时,可定位到引擎资源管理器中,对于分析节点资源构成与路径非常方便。

节点搜索

除了点击定位节点,在 Cocos Inspector 节点树窗口底部,提供有强大的组件搜索能力,输入组件名称即可。

450a0f80079daec64a90335f438dd23f.png

你还可以指定在某一局部节点树上进行搜索,对于了解组件脚本如何挂点的,会非常方便。

8f66711b2f0745ed2bb50209c72d7236.png

搜索结果信息丰富包含有:节点数统计、节点路径显示、隐藏节点标注、点击定位等实用功能。

66d7f23fa1b3aba095780fc804081705.png

场景树窗口中,常见有三种字体颜色来标注不同节点,分别为:白、灰、绿加粗,分别代表可见节点、隐藏节点和预制体生成的节点。

8cb0e557189f947a83908ae5f8739caf.png

通过节点树窗口,鼠标右键菜单可以直接定位到引擎资源管理器 Prefab 文件上。

a1da0dda9b9805bfc1cb0c47084513a6.gif从场景树定位到预制体

如果节点为场景编辑器放置的话,你还可以直接定位到层级管理器上,是不是很方便呢?

属性过滤

除节点的搜索外,组件属性也支持搜索过滤功能,方便我们快速找到需要修改的属性值。

dc1bf88093dece082331881d4157165c.gif

Label组件属性过滤

属性窗口中大部分属性值都可以编辑,点击属性值会有对应的输入框、下拉框、颜色编辑等。

569a91d76b23775f674b5bb899e7e888.png

设计模式

你是不是还遇到过,游戏 UI 或精灵节点的位置总是不理想?经常需要在运行时与编辑器来回切换,反复进行微调,费时费力!

这时你可以祭出 Cocos Inspector ,它提供了一个设计模式功能,直接在游戏运行时拖拽节点。点击工具栏图标开启设计模式。

47961edde9acfda72eb826b46c521f56.png

开启设计模式后,在游戏运行时窗口拖拽节点到你想到的位置,再从属性窗口中将节点坐标位置同步到编辑器中,是不是很方便呢!

c7f9a5d89b0436bc6a5af4c1ea7c4bd5.gif
游戏窗口中拖拽节点

运行时拖拽任意节点不会被保存到工程,不怕将界面弄坏。

当我们拿到一个新项目,遇到复杂的场景时,结合 Inspector 的场景树分析项目UI结构是不是很 Easy 呢?

DrawCall 性能分析

在 Cocos Inspector 上还有一个测试性 DrawCall 分析功能,计算了由 Sprite 和 Label 组件产生的 DrawCall 值,并在节点上统计显示。

13faa5006977e21761fbcf5ce1203ae2.gif
节点树 DrawCall 分析

下图为作者提供的案例演示,开启节点 DrawCall 查看,在节点树窗口中拖动节点,直接实现优化 DrawCall 测试。

557b08dc4efbc7cf7989c3a2aed50acc.gif
拖动节点顺序优化DC

在一个 DrawCall 数量为4的节点下,拖动修改节点顺序、修改 Label 的 CacheMode 属性将 DrawCall 降到了0。

6e9d91d41a2ddadc40c349a868c0c849.gif
拖动节点顺序&修改Label属性优化DC

代码调试

Cocos Inspector 集成了 Google Chrome 浏览器 DevTools 调试器,使用方法、快捷键等完全一致功能强大,这里就不细说。

861dfe713e8eb254f0a2c9e7a3175f1d.png

其中比较有特色的是,通过右键菜单【在全局变量中存储节点】将会以【Temp+数字】命名,将节点放到全局变量中。

4f03694fdea01b199b1e9631aa7298b5.png

这时你可以通过 DevTools 的控制台查看节点内容,触发相关函数,这是很多老司机常用的调试手段。

4bc7b6436c169b9365bcb9740bd22499.png

另外,场景树右键菜单【设定断点】可为节点设置事件断点,当断点被触发时,可通过代码堆栈分析问题。

f95b27af72234a20f77866f81093eca6.png

项目信息与本地存储

Cocos 引擎内置有一些常量宏与当前运行时平台信息,通过 Cocos Inspector 的信息界面可以对这些信息进行概览,非常方便。

93c78a13053144d842df444dfefb05fd.png

在信息界面的下方【本地存储】栏目中,显示的是 localstorage 数据内容,目前支持删除功能。

6c9edd472ecbd40cebe7ece9c4e7e75d.gif
logalstroage与本地存储同步显

比如测试、调试账号登录注册这样的功能时,需要记录用户数据,反复删除测试时会非常方便。

结语

Cocos Inspector 功能实用且体验优良,支持 Cocos Creator 2.x\3.x 版本。

93988a60f78c2a8eee5b801a1a346d50.png

下载地址:https://store.cocos.com/app/detail/2940

插件发布3年多以来,已经更新上百个版本成为 Cocos Store 上最受欢迎的插件之一得到用户好评。

10dfb5e24e445e0cb24dfd76695d5d12.png

Cocos Inspector 还有更多隐藏功能,可关注作者在 Cocos 论坛的案例分享,链接如下:

  • DrawCall优化实时演示GIF
    https://forum.cocos.org/t/topic/126906

  • 分享一个Bug的神奇解决经历
    https://forum.cocos.org/t/topic/126947

  • 如何直接在场景中直接定位节点树
    https://forum.cocos.org/t/topic/123198

今天的分享就到这里,希望对你有所帮助或启发,感谢点赞再看!下期见!

游戏开发,副业变现

晓衡的愿景是助力 1000 位个人开发者

一年独立挣钱10W+

e36493de6f85780646504b85451a4e93.jpeg

欢迎加晓衡微信

5baf0162c3ea9cce69e0fee864fdd4c3.gif

81d9e614566e304cc38fd89212b8b83d.gif

IAA小游戏同质化,背包like成为流量密码?

国漫新坑,最新排行榜TOP10

一群看穿市场的开发者们!7月精品推荐

从入门到爆款?16套免费视频分享

看微信小游戏排行榜,用它太方便了!

6月微信小游戏排名!用户喜欢什么样的游戏?

吃透这2个指标!真正读懂微信「畅玩榜」

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值