simple-gameloop

v2.1.0

Published

6 months ago

A simple canvas gameloop with a fixed update rate and dynamic render rate

Downloads

0High
0Medium
0Low

terrarum

canvas game loop gameloop

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',
    classes: 'canvas other-class',
    width: 500,
    height: 500,
});

This will create a 500x500 canvas inside the .canvasContainer element with the classes canvas and other-class.

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.

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 * as simpleGameloop from '../dist';

const ctx = document.querySelector('canvas')?.getContext('2d');
if (!ctx) {
  throw new Error('Canvas Missing');
}

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: number) {
  // 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);
  }
};

simpleGameloop.createLoop({
  update,
  render,
  // Optionally pass in the canvas context and `fps: true` to render the FPS on the canvas.
  ctx,
  fps: true,
});

To Do

createLoop should return an object with the following methods:

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme