用内置的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