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

前言

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

範例程式碼

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

加入 Stats.js

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

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

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 有四種模式可以看，相信在前面章節聰明的你應該有注意到

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

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

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，這一個我就不清楚了?不知道要自定義什麼。

參考文獻

• stats.js
• 效能評估工具