PixiJS V5 教學 (36) - FPS

前言

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

FPS

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

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

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

替寶藏獵人加入 FPS 檢測

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

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

1
2
3
4
5
6
7
8
9
10
11
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 的話可以考慮使用以下

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

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

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

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

以下為完整程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
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);

參考文獻