@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, Time} from '@armniko/ticker';

const element: { position: { x: number, y: number } } = {position: {x: 0, y: 0}};
const animation: { durationMs: number, distancePx: number } = {
    durationMs: 2000,
    distancePx: 500,
}
const ticker: Ticker = new Ticker();
ticker.addLogicTask((time: Time): void => {
    const pxPerMs: number = animation.distancePx / animation.durationMs;
    element.position.x += pxPerMs * time.deltaMs;
});
ticker.addDrawTask((): void => {
    // draw
});

Ticker instance methods:

• start() - starts ticker.
• stop() - stops ticker.
• isStarted() - checks if ticker is started.
• setFps(options: { min?: number; max?: number; expected?: number }) - set min, max or expected FPS
  • min (default: 0) - defines value at which lowFps task callbacks will be called.
  • max (default: 60) - defines drawing FPS limit.
  • expected (default: 60) - defines expected logical and drawing FPS at which app should work in normal conditions.
• addLogicTask(callback) - register callback for update app logic. Returns TickerTaskId.
• addDrawTask(callback) - register callback for update app screen. Returns TickerTaskId.
• addLowFpsTask(callback) - register callback that will be called when reached min FPS. Returns TickerTaskId.
• remove(taskId: TickerTaskId) - removes provided task.
• fps() - current FPS at which app operate.

Migration

v1 -> v2

Before (v1):

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

const element: { position: { x: number, y: number } } = {position: {x: 0, y: 0}};
const animation: { durationMs: number, distancePx: number } = {
    durationMs: 2000,
    distancePx: 500,
}
const ticker: Ticker = new Ticker({
    onLogicTick: (): void => {
        const pxPerMs: number = distancePx / animationDurationMs;
        element.position.x += pxPerMs * ticker.msBetweenTicks();
    },
    onDrawTick: (): void => {
        // draw element
    },
});
ticker.start();

After (v2):

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

const element: { position: { x: number, y: number } } = {position: {x: 0, y: 0}};
const animation: { durationMs: number, distancePx: number } = {
    durationMs: 2000,
    distancePx: 500,
}
const ticker: Ticker = new Ticker();
ticker.addLogicTask((time: Time): void => {
    const pxPerMs: number = distancePx / animationDurationMs;
    element.position.x += pxPerMs * time.deltaMs;
});
ticker.addDrawTask((): void => {
    // draw element
});
ticker.start();

Changelog

v2.1.1	Update packages.
v2.1.0	Added option to provide Time for TickerMock. Migrated from webpack to vite.
v2.0.0	Multiple tick callbacks support. Added TickerMock for testing. Deprecated: constructor options, msBetweenTicks(), ticksMissed(). (See migration v1 -> v2)
v1.1.0	Precompile UMD and ESM.
v1.0.0	Initial version.