@armniko/ticker
v1.1.0
Published
Javascript/typescript library for running app loop with separate logical/drawing ticks and FPS limitation.
Downloads
251
Readme
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());
}
});