Simple Gameloop
A small library for running a simulation with a fixed update rate and a variable render rate.
The update function will be run at the set rate (times per second).
The render function is tied to requestAnimationFrame and so runs when the browser says it can.
The update function is called inside the requestAnimationFrame call, but only when enough time has passed (tracked via an accumulator) since the last time update was called. This ensures that the update function is called at a set rate, regardless of how frequently requestAnimationFrame runs.
See changelog.md for changes.
To Use
import * as simpleGameloop from 'simple-gameloop';
/**
* @param dt - time in seconds since last call to update function
*/
const update = function update(dt) {
// your update logic here
};
const render = function render() {
// your render logic here
};
simpleGameloop.createLoop({
update,
render,
});
Create Canvas
There is also a helper function for creating a canvas element of a given size that returns useful references.
const canvasObj = simpleGameloop.createCanvas({
containerSelector: '.canvasContainer',
class: 'canvas',
width: 500,
height: 500,
});
This will create a 500x500 canvas inside the .canvasContainer element with the class canvas (added via classList.add() hence not having a ..
canvasObj contains references to:
-
elementthe result of thedocument.createElement('canvas')call. -
contextthe canvas context (e.g.element.getContext('2d')). -
canvasa reference tocontext.canvas.
Loop Example
These files are included in the example directory in the repo.
Run them with npm run example.
index.html
<!doctype html>
<html>
<head>
<title>Simple Gameloop Example</title>
</head>
<body>
<canvas></canvas>
<script src="index.ts"></script>
</body>
</html>
index.ts
import simpleGameloop from 'simple-gameloop';
const ctx = document.querySelector('canvas').getContext('2d');
ctx.canvas.style.cssText = 'border: 1px solid black';
const square = {
x: 10,
y: 40,
width: 30,
height: 20,
};
/**
* Update the state of the scene.
*
* @param dt - time in seconds since last call to update function
*/
const update = function update(dt) {
// Move square right at 50 pixels per second.
square.x += 50 * dt;
// Wrap the square back to the left edge if it goes off the right edge.
square.x -= square.x > ctx.canvas.width ? ctx.canvas.width : 0;
};
/**
* Draw the scene.
*/
const render = function render() {
// Reset the canvas.
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// Draw square.
ctx.fillRect(square.x, square.y, square.width, square.height);
// Draw square again if it is transitioning from right edge to left edge.
if (square.x + square.width > ctx.canvas.width) {
ctx.fillRect(square.x - ctx.canvas.width, square.y, square.width, square.height);
}
};
const loop = simpleGameloop.createLoop({
update,
render,
});
To Do
createLoop should return an object with the following methods:
-
pauseto stop calling the update function. -
playto start calling the update function. -
setUpdateRateif you want to set how many times the update function is called per second. Default is 60. -
setSpeedallows you to set the speed of the simulation. Set below 1 for slow motion. Default is 1.