Skip navigation

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();

Parameters

properties

Object. Properties of the game loop.

properties.update

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.

Table of Contents

GameLoop​.isStopped

If the game loop is currently stopped.

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

GameLoop​.render(​)

Called every frame to render the game. Put all of your games render logic here.

GameLoop​.start(​)

Start the game loop.

GameLoop​.stop(​)

Stop the game loop.

GameLoop​.update(​dt)

Called every frame to update the game. Put all of your games update logic here.

Parameters

dt

Number. The fixed dt time of 1/60 of a frame.