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

發表於 2020-10-21 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

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

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

是 Ray 不是 Array