GameLoop(​properties)

The game loop updates and renders the game every frame. The game loop is stopped by default and will not start until the loops start() function is called.

The game loop uses a time-based animation with a fixed dt to avoid frame rate issues. Each update call is guaranteed to equal 1/60 of a second.

This means that you can avoid having to do time based calculations in your update functions and instead do fixed updates.

let { Sprite, GameLoop } = kontra;

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

let loop = GameLoop({
  update: function(dt) {
    // no need to determine how many pixels you want to
    // move every second and multiple by dt
    // sprite.x += 180 * dt;

    // instead just update by how many pixels you want
    // to move every frame and the loop will ensure 60FPS
    sprite.x += 3;
  },
  render: function() {
    sprite.render();
  }
});

loop.start();

import { Sprite, GameLoop } from 'path/to/kontra.mjs';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

let loop = GameLoop({
  update: function(dt) {
    // no need to determine how many pixels you want to
    // move every second and multiple by dt
    // sprite.x += 180 * dt;

    // instead just update by how many pixels you want
    // to move every frame and the loop will ensure 60FPS
    sprite.x += 3;
  },
  render: function() {
    sprite.render();
  }
});

loop.start();

import { Sprite, GameLoop } from 'kontra';

let sprite = Sprite({
  x: 100,
  y: 200,
  width: 20,
  height: 40,
  color: 'red'
});

let loop = GameLoop({
  update: function(dt) {
    // no need to determine how many pixels you want to
    // move every second and multiple by dt
    // sprite.x += 180 * dt;

    // instead just update by how many pixels you want
    // to move every frame and the loop will ensure 60FPS
    sprite.x += 3;
  },
  render: function() {
    sprite.render();
  }
});

loop.start();

GameLoop Parameters

properties

Object. Properties of the game loop.

properties.update Optional

Function. Function called every frame to update the game. Is passed the fixed dt as a parameter.

properties.render

Function. Function called every frame to render the game.

properties.fps Optional

Number. Desired frame rate. Defaults to 60.

properties.clearCanvas Optional

Boolean. Clear the canvas every frame before the render() function is called. Defaults to true.

properties.context Optional

CanvasRenderingContext2D. The context that should be cleared each frame if clearContext is not set to false. Defaults to core.getContext().

properties.blur Optional

Boolean. If the loop should still update and render if the page does not have focus. Defaults to false.

let { GameLoop } = kontra;

let loop = GameLoop({
  // ...
});
console.log(loop.isStopped);  //=> true

loop.start();
console.log(loop.isStopped);  //=> false

loop.stop();
console.log(loop.isStopped);  //=> true

import { GameLoop } from 'path/to/kontra.mjs';

let loop = GameLoop({
  // ...
});
console.log(loop.isStopped);  //=> true

loop.start();
console.log(loop.isStopped);  //=> false

loop.stop();
console.log(loop.isStopped);  //=> true

import { GameLoop } from 'kontra';

let loop = GameLoop({
  // ...
});
console.log(loop.isStopped);  //=> true

loop.start();
console.log(loop.isStopped);  //=> false

loop.stop();
console.log(loop.isStopped);  //=> true