遊戲效能評估方式
FPS是指影格速率，是用於測量顯示張數的量度。測量單位為「每秒顯示張數」（Frame per Second，FPS）或「赫茲」，一般來說FPS用於描述影片、電子繪圖或遊戲每秒播放多少影格。一般說來，顯示器的張數為60Hz，因此，若超過60的fps容易會有畫面撕裂的狀況產生。而60FPS的遊戲體驗會相較30FPS的遊戲體驗來得更順暢。
PixiJS的ticker的預設FPS為60，可以自行藉由ticker.speed的值來調整遊戲的FPS。
// Scales ticker.deltaTime to what would be
// the equivalent of approximately 120 FPS
ticker.speed = 2;
顯示遊戲現在的fps數值
這邊介紹兩款不同的畫面fps顯示工具，FPSMeter和stats.js
FPSMeter
官網：http://darsa.in/fpsmeter/
使用樣子：
使用方法：
//anchor指要把fps顯示的方框放在那邊，如果沒有傳值進去，則會放至document.body
//options是指相關的設定（請參見：https://github.com/darsain/fpsmeter/wiki/Options）
var meter = new FPSMeter([ anchor ] [, options ]);
若一個遊戲有多個不同的fps設定，則可以在該ticker去設定要顯示的fps是那一個ticker的
// Function that renders one frame
function render() {
// ... rendering happens here ...
meter.tick();
}
若要知道每一次render圖像時要花的時間，則使用下列方法：
// Function that renders one frame
function render() {
meter.tickStart();
// ... rendering happens here ...
meter.tick();
}
stats.js
官網：https://github.com/mrdoob/stats.js/
使用樣子：
使用方法：
var stats = new Stats();
stats.showPanel( 1 ); // 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 );
這個工具可以同時顯示較多的數值，我們初始顯示的數值雖然只能四選一（0: fps, 1: ms, 2: mb, 3+: custom）
但是只要在顯示fps的方塊用滑鼠點擊，亦可以切換顯示不同的panel。
Chrome Debug Tool
在電腦上測試時最好的效能監測工具還是屬Chrome Debug Tool，切到Performance頁籤，在要監測時按下左上方的錄影按鈕，在結束時按下停止，就會看到如下的畫面：
我們可以看到，最上方有fps的部份，以上圖為例，我們可以觀察到，在遊戲重新loading時的fps最低，這的同時，也是cpu最高的時期，在frame的部份，還可以看到遊戲在每個時間點時的遊戲畫面截圖，幫助我們更了解這個時間軸的每個時刻遊戲畫面是如何呈現。
在2500ms的地方，有一條紅色的線，代表當時是被debug tool判定效能較差的時刻。我們點一下上方的時間軸，可以選擇下方要顯示的資料的範圍。
這時候我們可以看到最上方有一條Timer Fired的任務花費最多時間，這時候大家可能會想什麼ansync.js根本不是我寫的呀，但是其實這個工具上面顯示的名稱是只會顯示一整串序列最初被呼叫的函數名稱。例如在pixi裡的event handler是循序被執行並不會同步執行的，這時如果有許多listener監聽某個事件，其中有一個在聽到該事件後會執行一個很耗效能的動作，在這個performace工具裡會顯示的名稱為該動作emit事件的動作。
因此我們較難直接從這個列表得知造成效能低落的原因，這時，我們可以點選某列我們感興趣的執行動作，這時下方會出現一個面板，我們可以從這個面板得知這個工作項目的細節。
由上圖可得知，這個耗效能的動作，是由於GameScene.draw要繪製整個遊戲場景所造成的。
除了Call-Tree可以讓我們看到這整個工作項目是怎麼被呼叫的，Summary裡可以看到這個動作較花效能的是script、painting還是rendering
參考資料
