uloop

This library provides a simple game loop implementation, based on this article.

The idea is to separate the update and render steps of the game loop, triggering updates at a fixed interval, but renders at the maximum possible frequency. On top of this, multiple updates may be dispatched before a single render, in order to allow for the game to catch up after a lag spike.

The library works in both browser and Node environments. In a browser, it uses requestAnimationFrame to trigger the loop. In Node, it uses setImmediate.

$3

``ts
import { loop } from "uloop"

// This starts the loop, triggering an update ~30 times a second,
// and triggering render as often as possible.
// The loop function returns a handle which may be used to stop the loop.
// After stopping a loop, it must be restarted by calling loop again.
let handle = loop(30,
// Run anything not directly related to rendering in the update function,
// everything else goes into the render function.
function update() {
updatePhysics(); // Update positions, rotations, ...
updateAI(); // AI pathing, decision trees, ...
if (winCondition()) {
showLeaderboard();
handle.stop();
}
},
function render(weight) {
// The idea is to use the weight, which is a value between 0 and 1,
// to interpolate between the previous and current game state.
// This creates the illusion of smooth movement, even if the
// movement updates only happen 30 times a second.
const state = interpolate(lastState, currentState, weight);
draw(state);
}
);
``