Skip navigation

Getting Started

Kontra is written for modern ES6 capable browsers. If you need to run it in an ES5 browser, you will have to transpile and polyfill needed ES6 features (Assets requires WeakMap and Promise, Quadtree requires Set).

Download

Load

There are a few different ways to load the library depending on how you are going to use it.

Global Object

Load the library by adding it as a script tag. This will add a global kontra object to the page with all Kontra functions and properties.

<script src="path/to/kontra.js"></script>

ES Module Import

Kontra also supports ES modules and exports all API functions, allowing you to import it into your code as well. Import the file kontra.mjs and either use the entire kontra object or just import the functions you need.

import kontra from 'path/to/kontra.mjs';

Module Bundler

If you're using a module bundler that supports npm dependency resolution (such as Webpack or Parcel), you can import the library directly from the module name. This is the recommended way to create custom builds of the library.

import kontra from 'kontra';

Web Maker

Want to get started without all the hassle? Web Maker has you covered! When you start a new project, select the Kontra Game Engine from the list of predefined templates and you're good to go. Learn more by reading the Web Maker and JS13k tutorial.

Initialize

Initialize the game by calling init() to create the drawing context. By default, it will use the first canvas element on the page, but you can also pass it the ID of the canvas or a Canvas element.

The init() function returns the canvas and context used for the game.

let { init } = kontra;

let { canvas, context } = init();

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

let { canvas, context } = init();

import { init } from 'kontra';

let { canvas, context } = init();

Create

After the game is initialize, you can create a simple Sprite and Game Loop in just a few lines of code

let { init, Sprite, GameLoop } = kontra

let { canvas } = init();

let sprite = Sprite({
  x: 100,        // starting x,y position of the sprite
  y: 80,
  color: 'red',  // fill color of the sprite rectangle
  width: 20,     // width and height of the sprite rectangle
  height: 40,
  dx: 2          // move the sprite 2px to the right every frame
});

let loop = GameLoop({  // create the main game loop
  update: function() { // update the game state
    sprite.update();

    // wrap the sprites position when it reaches
    // the edge of the screen
    if (sprite.x > canvas.width) {
      sprite.x = -sprite.width;
    }
  },
  render: function() { // render the game state
    sprite.render();
  }
});

loop.start();    // start the game
import { init, Sprite, GameLoop } from 'path/to/kontra.mjs'

let { canvas } = init();

let sprite = Sprite({
  x: 100,        // starting x,y position of the sprite
  y: 80,
  color: 'red',  // fill color of the sprite rectangle
  width: 20,     // width and height of the sprite rectangle
  height: 40,
  dx: 2          // move the sprite 2px to the right every frame
});

let loop = GameLoop({  // create the main game loop
  update: function() { // update the game state
    sprite.update();

    // wrap the sprites position when it reaches
    // the edge of the screen
    if (sprite.x > canvas.width) {
      sprite.x = -sprite.width;
    }
  },
  render: function() { // render the game state
    sprite.render();
  }
});

loop.start();    // start the game
import { init, Sprite, GameLoop } from 'kontra';

let { canvas } = init();

let sprite = Sprite({
  x: 100,        // starting x,y position of the sprite
  y: 80,
  color: 'red',  // fill color of the sprite rectangle
  width: 20,     // width and height of the sprite rectangle
  height: 40,
  dx: 2          // move the sprite 2px to the right every frame
});

let loop = GameLoop({  // create the main game loop
  update: function() { // update the game state
    sprite.update();

    // wrap the sprites position when it reaches
    // the edge of the screen
    if (sprite.x > canvas.width) {
      sprite.x = -sprite.width;
    }
  },
  render: function() { // render the game state
    sprite.render();
  }
});

loop.start();    // start the game