PixiJS V5 教學 (36) - FPS

前言

寶藏獵人我們也算是製作了一個段落，所以現在來講講 PIXI 一直在講的東西，也就是 FPS 吧。

FPS

首先 FPS 是遊戲中非常重要的元素，你也可以在影片中看到該術語，簡單講起來就是每秒他會播放多少影格，當影格速度每秒達到一定之後就會感覺好像是活的，你會誤以為他是連貫性的，這在專業術語上又稱之為視覺暫留，所以你可以發現早期電影其實都是一格一格的電影膠片，透過高速的播放達到讓你覺得影像是連貫的。

但是並不是影格率若太高，其實也會導致畫面有撕裂感唷。

至於這部分更詳細的說明可以直接參考 維基百科 會有更完善的說明。

替寶藏獵人加入 FPS 檢測

接下來我們要替我們前面製作的遊戲增加一個 FPS 檢測器，而這邊將會使用一個套件叫做 stats.js

這個套件的使用方法其實並不困難，只需要將官方所提供的程式碼加入就可以了

var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);

function animate() {
  stats.begin();
  // monitored code goes here
  stats.end();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

如果你找不到 CDN 的話可以考慮使用以下

https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js

但是這邊要注意 appendChild 的部分不是 stats.dom 而是 stats.domElement，那麼這樣子就可以正常引入囉~

但是這邊應該會注意到 stats 會在下方，所以這邊要額外替 stats 加入一些 CSS 樣式

stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '0px';
stats.domElement.style.top = '0px';

以下為完整程式碼

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
function animate() {
  stats.begin();
  // monitored code goes here
  stats.end();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

參考文獻

• stats.js
• 效能評估工具