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中调试信息的各种参数，进行修改以后，重新编译代码即可。
修改其中几个参数：
查看官方文档中有关定制引擎的内容：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信息清晰显示在了左下角，颜色修改为黑色。
原来还真得改引擎啊！