cc.profiler除錯資訊模組-CocosCreator原始碼解析
阿新 • • 發佈：2021-02-11
技術標籤：CocosCreatorcocos-creatorjs原始碼
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;
}
樸實無華