Framesync

A high-performance frame-synced render loop for any JavaScript environment.

Features

• Tiny, ~1.5kb gzipped.
• Compatible with all browsers, Node and React Native environments.
• Unity-inspired discrete process steps.
• willRender method can provide unnecessary render calls.
• Automatically wakes and sleeps based on active processes.
• Lazy processes that run only when other processes are running.

Quick start

Install

npm install framesync --save

Use

import { Process } from 'framesync';

let frame = 0;

const process = new Process({
    update: () => frame++,
    render: () => console.log(frame)
});

process.start();

Render loop order of execution

This is the order of execution for Process steps, once per frame:

framesync will fire the framestart method of all active processes, then all the update methods and so on.

Each step is optional, and each function (if defined) is called with the arguments process, frameStamp, frameDuration, in the context of the Process itself.

If willRender is defined and returns false, the render methods will be skipped for that frame.

API

Methods

currentTime

Process

Create

import { Process } from 'framesync';

const process = new Process(steps, isLazy);

Arguments

• steps [object]
  • Object of step functions, each individually optional.
• isLazy [boolean] (optional)
  • If true, this Process will only fire when non-lazy Processes are also active.

Methods

.start()

Start the process on the next available frame.

.stop()

Stop the process after the next available frame.

.once()

Fire the process once on the next available frame.