@oframe/tick

Install

npm i @oframe/tick

yarn add @oframe/tick

import { Tick } from './Tick.mjs';

Documentation

The @oframe/tick library includes a singleton, that consists of just one requestAnimationFrame and a queue of callbacks. Users can then add or remove callbacks from the queue. Having only one requestAnimationFrame in an application improves performance.

By default the library creates one global loop, exported under Tick, however users may instantiate multiple loops from the exported TickClass class using the new keyword.

Tick.add()

To attach a callback to the tick loop, use the Tick.add() method.

Syntax

void Tick.add(callback, [fps])

Params

callback

A Function callback to add to the queue. In the callback, the arguments delta and time are passed in by default, in that order. delta is the time since last frame in milliseconds. time is the default value passed with requestAnimationFrame, referring to time since site opened in milliseconds.

fps optional

An Integer that will limit how often the callback is called. The value is in frames per second, so a value of 12 will result in the callback being called a maximum of 12 times per second. Values higher than the current framerate (usually 60) will be clamped at the framerate.

Note that if an fps value is passed in, the argument passed to the callback are now frame (no longer delta and time), referring to the callback's frame count, starting from 0.

Return value

None.

Examples

Tick.add(update);

function update(delta, time) {
    seconds += delta * 0.001;
    float = Math.sin(time);
}

Tick.add(updateFrame, 12);

function updateFrame(frame) {
    const currentFrame = frame % frames.length;
    drawFrame(currentFrame);
}

Tick.remove()

To remove a callback, use the Tick.remove() method.

Syntax

void Tick.remove(callback)

Params

callback

A Function callback to be removed from the queue.

Return value

None.

Can detach tick from requestAnimationFrame by setting autoplay to false.

Tick.autoplay = false;

Then can manually step the desired delta value.

Tick.step(16);

Can also create new Tick instances using TickClass.

const newTick = new TickClass({ autoplay: false });