PixiJS V5 教學 (37) - 加入 stats.js

前言

接下來針對 stats.js 介紹一下,順便換一個範本作為參考會比較好,因為寶藏獵人其實所需要的效能問題看不太出來。

範例程式碼

這邊範例程式碼將會使用這一篇

加入 Stats.js

其中會選擇這個程式碼的原因在於我有加入 dat.GUI 可以比較方便操作,接下來就直接加入 Stats.js 過程我就不額外介紹直接加入。

只是這一段程式碼我會移除一個地方刻意製造 LAG,也就是這一段

1
2
3
4
5
6
7
8
9
function removeContainer(item) {
const s = setInterval(() => {
item.alpha -= datGuiTools.alpha;
},100);
setTimeout(() => {
clearInterval(s);
app.stage.removeChild(item);
},10000);
}

接下來再將 speedVy 拉到最高,我想如果你電腦沒有很好的話,應該很快就會開始看到 FPS 低落 + 電腦風扇狂轉。

(謎之聲:因為電腦太好所以其實感受不太出來 QQ)

stats.js 介紹

基本上 stats.js 有四種模式可以看,相信在前面章節聰明的你應該有注意到

1
stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom

而這四種模式一次只能出現一種,這是比較可惜的地方,在官方文件中其實就有介紹每一種的圖表說明

1
2
3
4
FPS Frames rendered in the last second. The higher the number the better.
MS Milliseconds needed to render a frame. The lower the number the better.
MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
CUSTOM User-defined panel support.

因為都是英文,所以我稍微翻一下

  • FPS(影格率),FPS 在最後一秒渲染的影格率,其中數字越高越好(以 Pixi 來講建議是在 60)。
  • MS(毫秒),渲染 FPS 所需要的秒數,數字越低越好。
  • MB(內存),已經分配的內存,是使用 Chrome –enable-precise-memory-info 的,如果你是使用 Chrome 之外的瀏覽器會無法看到。
  • custom,這一個我就不清楚了?不知道要自定義什麼。

參考文獻