FPS统计信息加个描边

统计信息在浅色底很难看得清，引擎大佬们为啥不加个描边呢？
这里提供一个修改web下的显示：
修改文件：scripting\engine\cocos\profiler\profiler.ts

    public generateStats () {
        if (this._statsDone || !this._ctx || !this._canvas) {
            return;
        }

        this._stats = null;
        const now = performance.now();

        this._ctx.textAlign = 'left';
        let i = 0;
        for (const id in _profileInfo) {
            const element = _profileInfo[id];
            this._ctx.strokeText(element.desc, 0, i * this._lineHeight + 2);
            this._ctx.strokeText(element.desc, 0, i * this._lineHeight - 2);
            this._ctx.strokeText(element.desc, -2, i * this._lineHeight);
            this._ctx.strokeText(element.desc, 2, i * this._lineHeight);
            this._ctx.fillText(element.desc, 0, i * this._lineHeight);
            element.counter = new PerfCounter(id, element, now);
            i++;
        }
        this._totalLines = i;
        this._wordHeight = this._totalLines * this._lineHeight / this._canvas.height;
        for (let j = 0; j < _characters.length; ++j) {
            const offset = this._ctx.measureText(_characters[j]).width;
            this._eachNumWidth = Math.max(this._eachNumWidth, offset);
        }
        for (let j = 0; j < _characters.length; ++j) {
            this._ctx.strokeText(_characters[j], j * this._eachNumWidth, this._totalLines * this._lineHeight + 2);
            this._ctx.strokeText(_characters[j], j * this._eachNumWidth, this._totalLines * this._lineHeight - 2);
            this._ctx.strokeText(_characters[j], j * this._eachNumWidth + 2, this._totalLines * this._lineHeight);
            this._ctx.strokeText(_characters[j], j * this._eachNumWidth - 2, this._totalLines * this._lineHeight);
            this._ctx.fillText(_characters[j], j * this._eachNumWidth, this._totalLines * this._lineHeight);
        }
        this._eachNumWidth /= this._canvas.width;

        this._stats = _profileInfo as IProfilerState;
        this._canvasArr[0] = this._canvas;
        this._device!.copyTexImagesToTexture(this._canvasArr, this._texture!, this._regionArr);
    }

效果如下，不是很好。将就用一用吧。

学会了, 记录一个看着顺眼的款式

profiler = cc.find('PROFILER-NODE');
profiler.children.forEach(node => {
    lbl = node.getComponent(cc.Label);
    lbl.fontSize = 30;
    lbl.lineHeight = 30;
    node.scale = 0.5;
    ol = node.getComponent(cc.LabelOutline) || node.addComponent(cc.LabelOutline);
    ol.color = cc.Color.BLACK_R;
    ol.width = 3;
    node.opacity = 192;
});

请问下，3.x可以这么用吗？找不到label组件

感谢分享，收藏先

应该得按1楼的用法, 研究了下, 如果不想改引擎的话, 可以这样:

ctx = cc.profiler._ctx;
ctx.font = `23px Arial`;
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
ctx.lineWidth = 2.5;
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, 280, 280);
cc.profiler._statsDone = false;
cc.profiler.generateStats();
//删除并重建节点. 如果改了字体尺寸, 则需要重建节点
cc.profiler._rootNode.destroy();
cc.profiler._rootNode = null;
cc.profiler.generateNode();

那还是我的好看点

image615×891 99.4 KB

这个挺好的。