用内置的UI组件做一个调试面板是又慢又丑，而且不好批量添加和维护
二喵开源了一个自己自用的调试面板
体验地址： http://learncocos.com/menu
GayHub 求个Star！: https://github.com/iwae/easyMenu
支持批量添加菜单组件，优雅，快捷，方便维护，可以像tween一样使用，添加多个项目。
下面分享下内置的调试模块：
Overdraw
Overdraw 代表同一个像素点有多次渲染，常常是层级混乱或者逻辑错误导致的。
如这个banner 其实被下毒了
下面隐藏了很多小猫
我们可以通过代码把精灵的材质批量替换了
testOverdraw() {
this.overdrawMode = !this.overdrawMode;
const children = this.canvasNode.children;
children.forEach((child) => {
if (child == this.menu.node) return;
const sprites = child.getComponentsInChildren(Sprite);
const material: Material = this.overdrawMode ? this.overdrawMat : this.defaultMaterial;
sprites.forEach((sprite) => {
if (!this.defaultMaterial) {
this.defaultMaterial = new Material();
this.defaultMaterial.copy(sprite.material)
}
if (sprite.node.name !== this.node.name) {
sprite.material = material;
}
})
})
}
shader 也比较简单
重叠的区域越多，红色越深。
针对overdraw 较多的页面，我们可以隐藏背景中不渲染的涂层，或者调整图片尺寸，删除不需要的透明区域。
图片内存开销
通过历遍assets内所有的图片资源，并按照尺寸排序，来定位那个图片内存开销最高, 结果会自动复制到剪切板内，也可以把uuid换成url 来获取图片的路径。
getImageMemory(): string {
const assets = assetManager.assets;
let images: ImageAsset[] = [];
assets.forEach((asset) => {
if (asset instanceof ImageAsset) {
images.push(asset);
}
})
images.sort(function (a, b) {
return b.height * b.width - a.height * a.width;
});
let output = "";
let total = 0;
/* get all imagessets mem */
images.forEach((image, i) => {
const self = image;
const native = self._native;
const uuid = self.uuid;
const num = Math.floor((self.width * self.height * (native.indexOf('jpg') > 0 ? 3 : 4) / 1024 / 1024) * 10000) / 10000;
total += num;
output = output + "\n" + uuid + native + "...." + num + "M";
})
total = Math.floor(total * 10000) / 10000;
output = "Total Image Mem...." + total + "M" + output;
console.log("Image Mem==", output)
try {
navigator.clipboard.writeText(output);
console.log('Output copied to clipboard');
} catch (err) {
console.log('Failed to copy: ', err);
}
return output;
}
Time Scale
通过Overwrite 引擎的tick，可以放慢全局速度，方便动画调试
@ccclass('TimeScale')
export class TimeScale extends Component {
static scale = 1
start () {
const originalTick = director.tick;
director.tick = (dt: number) => {
dt *= TimeScale.scale;
originalTick.call(director, dt);
}
}
}
设置FPS
针对game.frameRate 分别设置30/60FPS 来测试性能，30FPS 开销和发热会更好，但是流畅度会降低
统计FPS
统计1S内Frame次数
支持自定义数量，可以打印并粘贴到剪切板
也可以用来统计小兵数量，特效数量等
环境变量
通过获取 director.getScene()，可以设置大部分环境变量
好了！都看到这里了记得Star下，二喵会持续分享游戏开发调试的功能。
Github: https://github.com/iwae/easyMenu
EasyPanel 也可以用于快速添加菜单组件，内置了按钮，list，editbox，slider 等多种组件，具体教程详细见github
