@armniko/ticker

Ticker

Javascript/typescript library for running app loop with separate logical/drawing ticks and FPS limitation.

Installation

npm install @armniko/ticker

Usage

import {Ticker} from '@armniko/ticker';

const ticker: Ticker = new Ticker({
    onLogicTick: (): void => {
        // update logic
    },
    onDrawTick: (): void => {
        // draw
    },
});
ticker.start();

Ticker constructor accepts options object with attributes:

• minFps (default: 0) - defines value at which onLowFps callback will be called.
• maxFps (default: 60) - defines drawing FPS limit.
• expectedFps (default: 60) - defines expected logical and drawing FPS at which app should work in normal conditions.
• onLogicTick (default: undefined) - callback for update app logic.
• onDrawTick (default: undefined) - callback for update app screen.
• onLowFps (default: undefined) - callback that will be called when reached minFps.

To compensate missed ticks, use msBetweenTicks() and ticksMissed() Ticker methods when calculate logic.

// frames based animation
let x: number = 0;
const pxPerTick: number = 3;
const ticker: Ticker = new Ticker({
    onLogicTick: (): void => {
        x += pxPerTick * ticker.ticksMissed();
    }
});

// time based animation
let x: number = 0;
const animationDurationMs: number = 2000;
const distancePx: number = 500;
const pxPerMs: number = distancePx / animationDurationMs;
const ticker: Ticker = new Ticker({
    onLogicTick: (): void => {
        x += pxPerMs * ticker.msBetweenTicks();
    }
});

Under the hood Ticker collects draw metrics and calculate current FPS. This value can be retrieved from Ticker:

const ticker = new Ticker({
    onDrawTick: (): void => {
        console.log(ticker.fps());
    }
});