Kontra​.tileEngine​(properties)

Basic Use#

Creating a tile map requires three things:

1. Dimensions of the tile map and a tile
2. At least one tileset with an image
3. At least one layer with data

To set up the tile engine, you'll need to pass it the width and height of a tile (in pixels) and the width and height of the map (in number of tiles).

You'll then need to add at least one tileset with an image as well as firstgid, or fist tile index of the tileset. The first tileset will always have a firstgid of 1 as 0 represents an empty tile.

Lastly, you'll need to add at least one named layer with data. A layer tells the tile engine which tiles from the tileset image to use at what position on the map.

Once all tileset images and all layers have been added, you can render the tile engine by calling its render() function.

Advance Use#

Adding all the tileset images and layers to a tile engine can be tedious, especially if you have multiple layers. If you want a simpler way to create a tile engine, Kontra has been written to work directly with the JSON output of the Tiled Map Editor.

The one requirement is that you must preload all of the tileset images and tileset sources using kontra.assets.load() before you create the tile engine.

Moving the Camera#

If your tilemap is larger than the canvas size, you can move the tilemap camera to change how the tilemap is drawn. Use the tile engines sx and sy properties to move the camera. Just like drawing an image, the cameras coordinates are the top left corner.

The sx and sy coordinates will never draw the tile map below 0 or beyond the last row or column of the tile map.

kontra.tileEngine​.context#

{CanvasRenderingContext2D}

The context the tile engine will draw to.

kontra.tileEngine​.height#

{number}

The height of the map in tiles.

kontra.tileEngine​.layerCollidesWith(name, object)#

name {string}

The name of the layer to check for collision.

object {object}

The object to check collision against.

Check if the object collides with the layer (shares a gird coordinate with any positive tile index in layers data). The object being checked must have the properties x, y, width, and height so that its position in the grid can be calculated. kontra.sprite defines these properties for you.

let tileEngine = kontra.tileEngine({
  tilewidth: 32,
  tileheight: 32,
  width: 4,
  height: 4,
  tilesets: [{/* ... */}],
  layers: [{
    name: 'collision',
    data: [ 0,0,0,0,
            0,1,4,0,
            0,2,5,0,
            0,0,0,0 ]
  }]
});

let sprite = kontra.sprite({
  x: 50,
  y: 20,
  width: 5,
  height: 5
});

tileEngine.layerCollidesWith('collision', sprite);  //=> false

sprite.y = 28;

tileEngine.layerCollidesWith('collision', sprite);  //=> true

kontra.tileEngine​.layers#

{object[]}

Array of all layers of the tile engine.

kontra.tileEngine​.mapheight#

{number}

The height of a tile map in pixels.

kontra.tileEngine​.mapwidth#

{number}

The width of a tile map in pixels.

kontra.tileEngine​.render()#

Render all visible layers.

kontra.tileEngine​.renderLayer(name)#

name {string}

Name of the layer.

Render a specific layer.

kontra.tileEngine​.sx#

{number}

X coordinate of the tile map camera.

kontra.tileEngine​.sy#

{number}

Y coordinate of the tile map camera.

kontra.tileEngine​.tileAtLayer(name, position)#

name {string}

Name of the layer.

position {object}

Position of the tile using either x and y or row and col.

Get the tile at the specified layer using either x and y coordinates or row and column coordinates.

let tileEngine = kontra.tileEngine({
  tilewidth: 32,
  tileheight: 32,
  width: 4,
  height: 4,
  tilesets: [{/* ... */}],
  layers: [{
    name: 'collision',
    data: [ 0,0,0,0,
            0,1,4,0,
            0,2,5,0,
            0,0,0,0 ]
  }]
});

tileEngine.tileAtLayer('collision', {x: 50, y: 50});  //=> 1
tileEngine.tileAtLayer('collision', {row: 2, col: 1});  //=> 2

kontra.tileEngine​.tileheight#

{number}

The height of a tile.

kontra.tileEngine​.tilesets#

{object[]}

Array of all tilesets of the tile engine.

kontra.tileEngine​.tilewidth#

{number}

The width of a tile.

kontra.tileEngine​.width#

{number}

The width of the map in tiles.