PixiJS V5 教學 (36) - FPS | 是 Ray 不是 Array

前言

寶藏獵人我們也算是製作了一個段落，所以現在來講講 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 的話可以考慮使用以下

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';

以下為完整程式碼

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);

PixiJS V5 教學 (36) - FPS

前言

FPS

替寶藏獵人加入 FPS 檢測

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

FPS

替寶藏獵人加入 FPS 檢測

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

PixiJS V5 教學 (40) - 終章

PixiJS V5 教學 (39) - 音樂

PixiJS V5 教學 (38) - TexturePacker

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

分享這篇文章

留言