Source: Frontend/game/fps-counter.js

  1. /* global PIXI */
  2. /** @module FpsCounter */
  3. let ml = window.ml || (window.ml = {});
  5. ml.FPS_BUFFER_SIZE = 25;
  7. /**
  8.  * A basic fps counter
  9.  */
  10. export default class FpsCounter {
  11.   constructor() {
  12.     this._avgBuf = [];
  13.     this._lastFrame = 0;
  14.     
  15.     this._textStyle = new PIXI.TextStyle({
  16.       fill: "#fff",
  17.       fontSize: 17
  18.     });
  20.     this.sprite = new PIXI.Text("Loading", this._textStyle);
  21.   }
  23.   /**
  24.    * Update and render the fps counter (should be called every frame)
  25.    */
  26.   update() {
  27.     let now = Date.now();
  28.     
  29.     if(this._lastFrame > 0) {
  30.       this._avgBuf.push(now - this._lastFrame);
  31.     }
  33.     this._lastFrame = now;
  35.     while(this._avgBuf.length > ml.FPS_BUFFER_SIZE) {
  36.       this._avgBuf.shift();
  37.     }
  39.     /* eslint-disable arrow-body-style */
  40.     let frameTime = Math.round(this._avgBuf.reduce((a, b) => a + b, 0) / this._avgBuf.length);
  41.     /* eslint-enable arrow-body-style */
  43.     let text = `${frameTime}ms (${Math.round(1000 / frameTime)}fps)`;
  44.     this.sprite.setText(text);
  46.     let metrics = PIXI.TextMetrics.measureText(text, this._textStyle);
  47.     this.sprite.position.set(innerWidth - 10 - metrics.width, 10);
  48.   }
  49. }