Cocos Creator 初探：修改Engine來調整FPS信息顯示

Cocos Creator 剛用上，感覺這不就是Unity的孿生兄弟嘛，簡單看完example，然后翻了翻手冊，開始上手第一個小項目。

創建了一個TypeScript項目，剛畫了個背景，調整了一下大小為1920*1080（為了適應手機屏），選擇長寬自適應，然后選擇在Chrome內預覽：

發現左下角的FPS調試信息小的看不清，看了半天文檔也沒發現哪里能調整FPS字體的大小，在QQ群里咨詢半天也沒人鳥我，終於有人來了一句：改引擎啊。

為了這點小事就改引擎，那日子還過不過了？

求人不如求己，按F12啟動開發者工具，查看前端代碼，首先看能不能通過修改Css的方式來調整字體，然而事情並沒有這么簡單，FPS信息居然是直接在Canvas上繪制出來的，並不能直接修改Css，看來只能另辟蹊徑。

由於FPS信息是由一個ShowFPS的Btn組件控制是否顯示的，順着這個線索往下走，查看它調用的js：

<button id="btn-show-fps" class="checked">Show FPS</button> ，id為btn-show-fps，搜索了一下：

 var btnShowFPS = document.getElementById('btn-show-fps');
 btnShowFPS.addEventListener('click', function () {
            var show = !cc.debug.isDisplayStats();
            cc.debug.setDisplayStats(show);
            setCSSChecked(btnShowFPS, show);
            setCookie('showFPS', show.toString());
        });

 查找API手冊：setDisplayStats：設置是否在左下角顯示 FPS：定位於cocos2d/core/CCDebug.js:365，繼續走：

setDisplayStats: function (displayStats) {
        if (cc.profiler) {
            displayStats ? cc.profiler.showStats() : cc.profiler.hideStats();
            cc.game.config.showFPS = !!displayStats;
        }
    }

    showStats () {
        if (!_showFPS) {
            generateAtlas(); generateStats(); if (_rootNode) {
                _rootNode.active = true;
            }

            cc.director.on(cc.Director.EVENT_BEFORE_UPDATE, beforeUpdate);
            cc.director.on(cc.Director.EVENT_AFTER_UPDATE, afterUpdate);
            cc.director.on(cc.Director.EVENT_AFTER_DRAW, afterDraw);
            _showFPS = true;
        }
    }

//  CCProfiler.js

function generateAtlas () {
    if (_atlas) return;

    let textureWidth = 256,
        textureHeight = 256;

    let canvas = document.createElement("canvas");
    canvas.style.width = canvas.width = textureWidth;
    canvas.style.height = canvas.height = textureHeight;

    // comment out this to show atlas
    // document.body.appendChild(canvas)

    let ctx = canvas.getContext('2d');
    ctx.font = `${_fontSize}px Arial`;
    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.fillStyle = '#fff';
    
    let space = 2;
    let x = space;
    let y = space;
    let lineHeight = _fontSize;

    _atlas = new cc.LabelAtlas();
    _atlas._fntConfig = {
        atlasName: 'profiler-arial',
        commonHeight: lineHeight,
        fontSize: _fontSize,
        kerningDict: {},
        fontDefDictionary: {}
    };

    _atlas._name = 'profiler-arial';
    _atlas.fontSize = _fontSize;

    let dict = _atlas._fntConfig.fontDefDictionary;
    
    for (let i = 32; i <= 126; i++) {
        let char = String.fromCharCode(i);
        let width = ctx.measureText(char).width;
    
        if ((x + width) >= textureWidth) {
            x = space;
            y += lineHeight + space;
        }
        ctx.fillText(char, x, y);

        dict[i] = {
            xAdvance: width,
            xOffset: 0,
            yOffset: 0,
            rect: {
                x: x,
                y: y,
                width: width,
                height: lineHeight
            }
        }

        x += width + space;
    }

    let texture = new cc.Texture2D();
    texture.initWithElement(canvas);

    let spriteFrame = new cc.SpriteFrame();
    spriteFrame.setTexture(texture);

    _atlas.spriteFrame = spriteFrame;
}

可以看到，這個CCProfiler.js文件里面設置的就是繪制Canvas中調試信息的各種參數，進行修改以后，重新編譯代碼即可。

修改其中幾個參數：

let _fontSize = 30;  //字體大小

let textureWidth = 512,  //canvas的長寬

textureHeight = 512;

ctx.fillStyle = '#000';  //字體顏色

right.x = 400; //右側信息的x坐標，這個如果不修改，會導致左右重疊在一起

 

查看官方文檔中有關定制引擎的內容：https://docs.cocos.com/creator/manual/zh/advanced-topics/engine-customization.html

只需要安裝nodejs，npm，gulp，再在engine目錄下調用gulp指令進行編譯即可。

當然編譯過程也是曲折的，缺少了很多包，逐個裝上以后，終於編譯通過，反復修改編譯的時候，頻繁出現這個堆內存溢出的錯誤：

....Ineffective mark-compacts near heap limit Allocation failed....

這個錯誤暫時沒有發現好的解決方案，只能通過給node進程分配更多的內存來解決。不解決也可以，多編譯幾次就過了。

最終效果圖：

可以看到在沒有修改Camera以及其他參數的情況下：FPS信息清晰顯示在了左下角，顏色修改為黑色。

原來還真得改引擎啊！