Game Component: Frame Timer

Calculate FPS and elapsed time for browser games.

Installation

npm install @basementuniverse/frame-timer

For direct browser usage, include the UMD build with a script tag:

<script src="build/index.js"></script>

The build exposes the package's main class as the BasementUniverseFrameTimer browser global. It does not add each export directly to window.

How to use

import FrameTimer from '@basementuniverse/frame-timer';

const timer = new FrameTimer(); // pass options if needed

function gameLoop() {
  timer.update();
  console.log(`Elapsed time: ${timer.elapsedTime}s, FPS: ${timer.frameRate}`);
  requestAnimationFrame(gameLoop);
}

gameLoop();

Options

type FrameTimerOptions = {
  /**
   * If FPS drops below this value, the timer will clamp the elapsed time to
   * prevent large jumps in game logic.
   *
   * This is useful for maintaining consistent gameplay even when performance
   * drops.
   *
   * The default value is 30 FPS (0.1 seconds per frame).
   */
  minFPS: number;
};

When using the library directly from a browser script, use the BasementUniverseFrameTimer global:

<script src="build/index.js"></script>
<script>
  const timer = new BasementUniverseFrameTimer();

  timer.update();
  console.log(timer.elapsedTime, timer.frameRate);
</script>