【工具】Cocos 修改左下角调试信息(字体和背景的大小颜色，包含2.x和3.x)

参考：

cocos论坛-怎么修改左下角调试信息 （2.x）

FPS统计信息加个描边 - Creator 3.x - Cocos中文社区  (3.x)

 

目录：

一 2.x修改调试信息

二 3.x修改调试信息

 

 一 2.x修改调试信息

未设置情况下chrome浏览器下的调试信息，看不清楚

 

调整后，放大后清晰了

 

 

代码如下

    /**
    * 更改统计面板的文本颜色
    * @param scale      放大倍数 (支持1-2倍，再放大>2倍需要微调rightPanel和背景大小等数值)
    * @param font       文本颜色
    * @param backgournd 背景颜色
    */
    public setStatsColor(scale: number = 2, font: cc.Color = cc.Color.WHITE, background: cc.Color = cc.color(0, 0, 0, 200),) {
        const profiler = cc.find("PROFILER-NODE");
        if (!profiler) return cc.warn("未找到统计面板节点！");
        //右面板
        const rightPanel = profiler.getChildByName('RIGHT-PANEL');
        if (rightPanel) {
            rightPanel.x += 70 * scale;
        }
        // 文字
        profiler.children.forEach((node) => { node.color = font; node.scale = scale });
        // 背景
        let node = profiler.getChildByName('BACKGROUND');
        if (!node) {
            node = new cc.Node('BACKGROUND');
            node.scale = Math.max(1, scale / 1.8);
            profiler.addChild(node, cc.macro.MIN_ZINDEX);
            node.setContentSize(profiler.getBoundingBoxToWorld());
            node.setPosition(0, 0);
        }
        const graphics = node.getComponent(cc.Graphics) || node.addComponent(cc.Graphics);
        graphics.clear();
        graphics.rect(-5, 12.5, node.width + 10, node.height - 10);
        graphics.fillColor = background;
        graphics.fill();
    }

　　

方法思路主要通过根据节点名获取调试面板，然后找到背景+左面板+右面板，给他们设置大小和颜色。

 

调试面板源码：2.4.13\resources\engine\cocos2d\core\utils\profiler\CCProfiler.js

 

二 3.x修改调试信息

调试信息源码：profiler.ts

 

ComTool_Fun.ts：

/**
     * 设置调试信息的字体颜色
     * @param fillStyle    字体颜色
     * @param strokeStyle  描边颜色
     * @param fontSize     字体大小
     */
    public setProfilerColor(fillStyle: string = "#ffffff", strokeStyle: string = "#000000", fontSize: number = null) {
        let ctx = profiler['_ctx'];
        if (fontSize) {
            ctx.font = `${fontSize}px Arial`;
        }
        ctx.fillStyle = fillStyle;
        ctx.strokeStyle = strokeStyle;
        ctx.lineWidth = 2.5;
        let originFillText = CanvasRenderingContext2D.prototype.fillText;
        ctx.fillText = (text, x, y, maxWidth) => {
            ctx.strokeText(text, x, y);
            originFillText.call(ctx, text, x, y);
        };
        //清空canvas, 重新绘制贴图
        ctx.clearRect(0, 0, profiler["_region"].texExtent.width, profiler["_region"].texExtent.height);
        profiler['_statsDone'] = false;
        profiler.generateStats();
        //删除并重建节点. 如果改了字体尺寸, 则需要重建节点
        if (fontSize) {
            profiler['_rootNode'].destroy();
            profiler['_rootNode'] = null;
            profiler.generateNode();
        }
    }

　　

设置前

 

设置后

 

想增加一个背景色

效仿2.x写一个背景，但是放置于profiler_node下，会看不见，放置于canvas下则可以看见。不明所以。

ComTool_fun.ts :

        const profilerNode = find("PROFILER_NODE");
        if (profilerNode == null) {
            return console.warn("未找到统计面板节点！");
        }

        // 背景
        let backGround = profilerNode.getChildByName('BACKGROUND');
        if (!backGround) {
            backGround = new Node('BACKGROUND');
            //node.scale = Math.max(1, scale / 1.8);
            profilerNode.addChild(backGround);
            backGround.getComponent(UITransform) || backGround.addComponent(UITransform);
            backGround.getComponent(UITransform).setContentSize(500, 500);
            backGround.setPosition(0, 0);
        }
        const graphics = backGround.getComponent(Graphics) || backGround.addComponent(Graphics);
        graphics.clear();
        graphics.rect(0, 0, 500, 500);
        graphics.fillColor = new Color().fromHEX("#ff0000ff");
        graphics.fill();