PixiJS V5 教學 (36) - FPS
前言
寶藏獵人我們也算是製作了一個段落,所以現在來講講 PIXI 一直在講的東西,也就是 FPS 吧。
FPS
首先 FPS 是遊戲中非常重要的元素,你也可以在影片中看到該術語,簡單講起來就是每秒他會播放多少影格,當影格速度每秒達到一定之後就會感覺好像是活的,你會誤以為他是連貫性的,這在專業術語上又稱之為視覺暫留,所以你可以發現早期電影其實都是一格一格的電影膠片,透過高速的播放達到讓你覺得影像是連貫的。
但是並不是影格率若太高,其實也會導致畫面有撕裂感唷。
至於這部分更詳細的說明可以直接參考 維基百科 會有更完善的說明。
替寶藏獵人加入 FPS 檢測
接下來我們要替我們前面製作的遊戲增加一個 FPS 檢測器,而這邊將會使用一個套件叫做 stats.js
這個套件的使用方法其實並不困難,只需要將官方所提供的程式碼加入就可以了
1 | var stats = new Stats(); |
如果你找不到 CDN 的話可以考慮使用以下
1 | https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js |
但是這邊要注意 appendChild
的部分不是 stats.dom
而是 stats.domElement
,那麼這樣子就可以正常引入囉~
但是這邊應該會注意到 stats 會在下方,所以這邊要額外替 stats 加入一些 CSS 樣式
1 | stats.domElement.style.position = 'absolute'; |
以下為完整程式碼
1 | const stats = new Stats(); |