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，搜索了一下：
1var btnShowFPS = document.getElementById('btn-show-fps'); 2 btnShowFPS.addEventListener('click', function () { 3 var show = !cc.debug.isDisplayStats(); 4 cc.debug.setDisplayStats(show); 5 setCSSChecked(btnShowFPS, show); 6 setCookie('showFPS', show.toString()); 7 });
查找API手册：setDisplayStats：设置是否在左下角显示 FPS：定位于cocos2d/core/CCDebug.js:365，继续走：
1setDisplayStats: function (displayStats) { 2 if (cc.profiler) { 3 displayStats ? cc.profiler.showStats() : cc.profiler.hideStats(); 4 cc.game.config.showFPS = !!displayStats; 5 } 6 } 7 8 showStats () { 9 if (!_showFPS) { 10 generateAtlas(); 11 generateStats(); 12 13 if (_rootNode) { 14 _rootNode.active = true; 15 } 16 17 cc.director.on(cc.Director.EVENT_BEFORE_UPDATE, beforeUpdate); 18 cc.director.on(cc.Director.EVENT_AFTER_UPDATE, afterUpdate); 19 cc.director.on(cc.Director.EVENT_AFTER_DRAW, afterDraw); 20 _showFPS = true; 21 } 22 } 23 24// CCProfiler.jsfunction generateAtlas () { 25 if (_atlas) return; 26 27 let textureWidth = 256, 28 textureHeight = 256; 29 30 let canvas = document.createElement("canvas"); 31 canvas.style.width = canvas.width = textureWidth; 32 canvas.style.height = canvas.height = textureHeight; 33 34 // comment out this to show atlas 35 // document.body.appendChild(canvas) 36 37 let ctx = canvas.getContext('2d'); 38 ctx.font = `${_fontSize}px Arial`; 39 ctx.textBaseline = 'top'; 40 ctx.textAlign = 'left'; 41 ctx.fillStyle = '#fff'; 42 43 let space = 2; 44 let x = space; 45 let y = space; 46 let lineHeight = _fontSize; 47 48 _atlas = new cc.LabelAtlas(); 49 _atlas._fntConfig = { 50 atlasName: 'profiler-arial', 51 commonHeight: lineHeight, 52 fontSize: _fontSize, 53 kerningDict: {}, 54 fontDefDictionary: {} 55 }; 56 57 _atlas._name = 'profiler-arial'; 58 _atlas.fontSize = _fontSize; 59 60 let dict = _atlas._fntConfig.fontDefDictionary; 61 62 for (let i = 32; i <= 126; i++) { 63 let char = String.fromCharCode(i); 64 let width = ctx.measureText(char).width; 65 66 if ((x + width) >= textureWidth) { 67 x = space; 68 y += lineHeight + space; 69 } 70 ctx.fillText(char, x, y); 71 72 dict[i] = { 73 xAdvance: width, 74 xOffset: 0, 75 yOffset: 0, 76 rect: { 77 x: x, 78 y: y, 79 width: width, 80 height: lineHeight 81 } 82 } 83 84 x += width + space; 85 } 86 87 let texture = new cc.Texture2D(); 88 texture.initWithElement(canvas); 89 90 let spriteFrame = new cc.SpriteFrame(); 91 spriteFrame.setTexture(texture); 92 93 _atlas.spriteFrame = spriteFrame; 94}
可以看到，这个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信息清晰显示在了左下角，颜色修改为黑色。
原来还真得改引擎啊！