Have ideas to improve npm?Join in the discussion! »

simple-gameloopTypeScript icon, indicating that this package has built-in type declarations

2.0.0-alpha • Public • Published

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.

I wrote it in TypeScript without doing much research so I've probably done it poorly but here we are.

See changelog.md for changes.

To Use

import 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
};

const loop = simpleGameloop.createLoop({
  update,
  render,
});

The returned loop object has the following functions:

  • pause to stop calling the update function.
  • play to start calling the update function.
  • setUpdateRate if you want to set how many times the update function is called per second. Default is 60.
  • setSpeed allows you to set the speed of the simulation. Set below 1 for slow motion. Default is 1.

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:

  • element the result of the document.createElement('canvas') call.
  • context the canvas context (e.g. element.getContext('2d')).
  • canvas a reference to context.canvas.

Loop Example

These files are included in the example directory in the repo.

index.html

<!doctype html>
<html>
<head>
  <title>Simple Gameloop Example</title>
</head>
<body>
  <canvas></canvas>
  <script src="index.js"></script>
</body>
</html>

index.js

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,
});

Install

npm i simple-gameloop

DownloadsWeekly Downloads

2

Version

2.0.0-alpha

License

MIT

Unpacked Size

16.1 kB

Total Files

17

Last publish

Collaborators

  • avatar