小白记录: 分享一下如何更改左下角的fps样式


效果图点上面的蓝字[image]查看

学习自论坛的皮皮大佬 听说这些大佬都转u3d去了大呼可惜 大佬的分享就是小白学习进步的动力呀

下面贴下我的代码 使用方式复制到自己的DebugUtils工具脚本里就好了 hh是我的框架命名空间

    /**
     * 设置分析面板方法
     * @description 首次调用更改样式, 重复调用隐藏/显示面板
     */
    export function setProfiler() {
        //获取分析面板节点
        let profiler = cc.find('PROFILER-NODE');
        //打开或关闭面板
        if (hh.tools.setProfiler['#enable'] === true) {
            hh.tools.setProfiler['#enable'] = profiler.active = false;
            return;
        }
        if (hh.tools.setProfiler['#enable'] === false) {
            hh.tools.setProfiler['#enable'] = profiler.active = true;
            return;
        }
        //设置面板开启
        hh.tools.setProfiler['#enable'] = true;
        //设置面板位置和大小
        profiler.setPosition(20, 10);
        profiler.setContentSize(profiler.getBoundingBoxToWorld().size);
        //设置面板文字颜色
        profiler.children.forEach(child => child.color = cc.Color.BLUE);
        //获取画笔组件
        let context = profiler.getComponent(cc.Graphics) ?? profiler.addComponent(cc.Graphics);
        context.clear();
        //创建矩形路径
        context.lineWidth = 3;
        context.lineJoin = cc.Graphics.LineJoin.ROUND;
        context.rect(-5, 10, profiler.width + 10, profiler.height - 5);
        //绘制矩形路径
        context.strokeColor = cc.Color.BLUE;
        context.stroke();
        //填充矩形路径
        context.fillColor = cc.Color.GREEN;
        context.fill();
    }

论坛里也有过好几个帖子了 不过自己重新实现一下还是有必要的 既能锻炼一下代码组织能力 又能顺带学习一波cc.Graphics组件的使用

我调整了一下面板的位置和大小 加了个重复调用打开或关闭 因为f12调试的时候上面那排showFPS按钮不见了 所以在控制台用代码重复调用来控制显隐

赞!怎么老是有这么聪明的人