cc.profiler调试信息模块-CocosCreator源码解析

最新推荐文章于 2025-03-13 10:05:51 发布

Bool Chen

最新推荐文章于 2025-03-13 10:05:51 发布

阅读量1.7k

点赞数 1

分类专栏： CocosCreator 文章标签： cocos-creator js 源码

本文链接：https://blog.youkuaiyun.com/weixin_47879201/article/details/113786095

版权

本文详细解析了CocosCreator的cc.profiler模块，包括其作用、涉及的文件结构、类关系和方法。通过源码分析，揭示了调试信息如fps、drawcall的统计原理，以及事件监听和计数器在其中的作用。同时探讨了PerfCounter和Counter类的功能，并提出了关于代码优化的一些思考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cc.profiler调试信息模块

写在前面

开个头

使用Cocos Creator开发项目的时候，经常可以看到左下角有一个小方块，里面显示了fps、drawcall等信息。最近研究源码，上次写cc.debug模块的时候有提到cc.profiler，也是好奇，想知道是怎么实现统计fps、渲染耗时这些数据的，刚好年前几天有点时间，就有了这篇文章…

一些话

我是个即将毕业的应届生，受水平所限，难免有些地方写的不是很好，但不动手的话，也不会进步，就指望大家多多包涵啦，有错误的地方也劳烦大家伙们指正。
代码中，注释以 //_ 开头的是引用了官方注释

词语释义表

这个…为了避免本人理解/表达上的偏差。

词	释义
计数器	指 PerfCounter / Counter
取样	对sample方法的翻译

运行环境

Cocos Creator 2.4
Chrome 88

模块概要

模块作用

显示效果

显示效果在开发环境中使用模拟器/浏览器预览项目的时候，默认会打开调试信息的显示，其中包含了六项数据。

项目名	含义	补充
Frame time (ms)	每帧耗时(毫秒)	=逻辑耗时+渲染耗时
Framerate (FPS)	帧数
Draw Call	绘制调用	参考：Draw Call是什么？
Game Logic (ms)	逻辑耗时(毫秒)
Renderer (ms)	渲染耗时(毫秒)
WebGL / Canvas	渲染模式	没有值，根据渲染模式的不同会显示

涉及文件目录结构

目录位于cocos2d\core\utils\profiler

定义

cc.profiler 定义于 CCProfiler.js
PerfCounter 定义于 perf-counter.js
Counter定义于 counter.js

类关系

PerfCounter继承于Counter，两者都是使用cc.Class定义
cc.profiler中持有若干个PerfCounter。

模块方法

方法名	参数列表	返回值	作用
isShowingStats	无	true / false	当前是否显示调试信息界面
hideStats	无	无	隐藏调试信息
showStats	无	无	显示调试信息

使用范例

// HelloWorld.js
start(){
   
  cc.log(cc.profiler.isShowingStats());
  setTimeout(()=>{
   
    cc.profiler.hideStats();
    cc.log(cc.profiler.isShowingStats());
  }, 3 * 1000);
}

运行结果

由于默认显示调试信息，故第一次调用isShowingStats()输出为true。
三秒后，调用hideStats()，调试信息界面隐藏，第二次调用isShowingStats()输出为false。

模块源码解析

属性

/**当前是否显示调试信息 */
let _showFPS = false;
/**字体大小 */
let _fontSize = 15;

/**调试信息相关状态, generateStats()中初始化 */
let _stats = null;
/**调试信息节点, generateNode()中初始化 */
let _rootNode = null;
/**两边的label, generateNode()中初始化 */
let _label = null;

方法

暴露方法

isShowingStats

/**当前是否显示调试信息界面 */
isShowingStats () {
   
  return _showFPS;
}

朴实无华👍

showStats

/**显示调试信息 */
showStats () {
   
  if (!_showFPS) {
   
    // 生成调试信息数据
    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;
  }
}

hideStats

/**隐藏调试信息 */
hideStats () {
   
  if (_showFPS) {
   
    // 隐藏节点
    if (_rootNode) {
   
      _rootNode.active = false;
    }

    // 取消监听
    cc.director.off(cc.Director.EVENT_BEFORE_UPDATE, beforeUpdate);
    cc.director.off(cc.Director.EVENT_AFTER_UPDATE</

最低0.47元/天解锁文章