【教程】修改FPS面板颜色

Creator 2.x
#1

cocos creator FPS面板颜色默认是白色，很多时候白色背景图显示会看不清楚，
改成黑色或其他颜色显示，需要修改引擎代码，并且需要编译，按照如下步骤进行修改
1、安装nodejs，并且可以执行npm
2、 安装 gulp 构建工具
#> npm install -g gulp
3、打开引擎IDE目录
a1

a2
a2797×288 15.3 KB

4、使用vscode，或者cmd、shell面板打开 引擎路径 …/resources/.editors/Creator/2.4.6/resources/engine

5、执行命令下载依赖包：#> npm install

a3
a3772×597 24.4 KB

6、打开CCProfiler.js文件，路径：…/resources/.editors/Creator/2.4.6/resources/enginecocos2d、core/utils/profiler，如下图添加FPS面板颜色，我改成黑色，大家可以按需添加

a4
a41295×582 43.2 KB

7、最后执行 #> gulp build-dev

a5
a51279×323 14.6 KB

8、重启IDE，再运行就可以看到FPS变成了黑色
a6

3赞
#2

前排，热乎的mark

#3

image image 没必要改引擎吧 :4:

#4

大佬，牛啊！ :+1: :+1: :+1:

#5

迷惑，几行代码就能改了唉，怎么还要引入个库哈哈哈

https://gitee.com/ifaswind/eazax-ccc/blob/master/utils/DebugUtil.ts#L49

/**
 * 更改统计面板的文本颜色
 * @param font 文本颜色
 * @param background 背景颜色
 */
public static setStatsColor(font: cc.Color = cc.Color.WHITE, background: cc.Color = cc.color(0, 0, 0, 150)) {
    const profiler = cc.find('PROFILER-NODE');
    if (!profiler) return cc.warn('未找到统计面板节点！');

    // 文字
    profiler.children.forEach(node => node.color = font);

    // 背景
    let node = profiler.getChildByName('BACKGROUND');
    if (!node) {
        node = new cc.Node('BACKGROUND');
        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();
}
1赞
FPS统计信息加个描边
#6

还是皮皮佬强 :14:

#7

nonono，我只会一点点

#8

可以但没必要

#9

卷的太厉害了！

#10

改颜色这个都不是很好 加描边才是最清晰的

#11

这个能用吗？
https://store.cocos.com/app/detail/3356

#12

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。