PixiJS V5 教學 (37) - 加入 stats.js
前言
接下來針對 stats.js 介紹一下,順便換一個範本作為參考會比較好,因為寶藏獵人其實所需要的效能問題看不太出來。
範例程式碼
這邊範例程式碼將會使用這一篇
加入 Stats.js
其中會選擇這個程式碼的原因在於我有加入 dat.GUI 可以比較方便操作,接下來就直接加入 Stats.js 過程我就不額外介紹直接加入。
只是這一段程式碼我會移除一個地方刻意製造 LAG,也就是這一段
1 | function removeContainer(item) { |
接下來再將 speedVy 拉到最高,我想如果你電腦沒有很好的話,應該很快就會開始看到 FPS 低落 + 電腦風扇狂轉。
(謎之聲:因為電腦太好所以其實感受不太出來 QQ)
stats.js 介紹
基本上 stats.js 有四種模式可以看,相信在前面章節聰明的你應該有注意到
1 | stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom |
而這四種模式一次只能出現一種,這是比較可惜的地方,在官方文件中其實就有介紹每一種的圖表說明
1 | FPS Frames rendered in the last second. The higher the number the better. |
因為都是英文,所以我稍微翻一下
- FPS(影格率),FPS 在最後一秒渲染的影格率,其中數字越高越好(以 Pixi 來講建議是在 60)。
- MS(毫秒),渲染 FPS 所需要的秒數,數字越低越好。
- MB(內存),已經分配的內存,是使用 Chrome –enable-precise-memory-info 的,如果你是使用 Chrome 之外的瀏覽器會無法看到。
- custom,這一個我就不清楚了?不知道要自定義什麼。