Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including collide-2d-tilemap with all npm packages installed. Try it out:

var collide2dTilemap = require("collide-2d-tilemap")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

collide-2d-tilemap v0.0.1

2d tilemap collisions made simple-ish


an api for user-defined collision-detection between aabb-2d objects and tilemaps.

here's a demo.

var my_tilemap = [
        0, 0, 0, 1
      , 1, 0, 0, 1
      , 1, 0, 0, 1
      , 1, 1, 1, 1

var collisions = require('collide-2d-tilemap')
  , collide

var player = aabb([0, 0], [16, 16])
  , vec = [0, 0]

// collisions(field, size of tile in pixels, [width, height])
collide = collisions(my_tilemap, 32)

my_game_event_loop(function(dt) {
  vec = get_player_input() * dt 

  collide(player, vec, function(axis, tile_data, coords, dir, diff) {
    if(tile) {
      vec[axis] = diff
      return true


the method used is borrowed from higherorderfun.

in short:

  1. for movement in each axis (x, y):
  2. we go from the tile coordinate of the leading edge of the movement to the tile coordinate of the destination of that edge.
  3. we go from the base tile coordinate of the opposite axis to the max tile coordinate of the opposite axis.
  4. for each of those tile coordinates <x> and <y>, we call the oncollision callback. if it returns true, we've hit something and we stop checking that axis for collisions.
  5. we apply the movement contained in vec[axis] to the box.

this lets you do things like add slopes, add effects that don't necessarily stop collision, etc, etc.


For best results, use integers. If you're using gl-matrix, you can simply swap out vec2.create with vec2.create = function() { return new Int32Array(2) }.


collision(field, tilesize[, dimensions]) -> collide function

Produces a collide(aabb, vec2, oncollide) function.

field may be a single-dimension array of integers (in which case dimensions can be inferred if not provided), or it may be a function in the form fn(tile_x_idx, tile_y_idx) -> tile data integer. if it's a function, dimensions is required.

tilesize is the pixel size of a tile.

dimensions is an array of integers [width, height]. if it is not provided it will attempt to set to [Math.sqrt(field.length), Math.sqrt(field.length)] (that is, it assumes a square tilemap).

collide(aabb, vec, oncollide) -> undefined

attempt to advance aabb by vec against the tilemap. destructive, it will actually call aabb.translate.

vec is assumed to be a gl-matrix-style vec2, or [x, y].

aabb is assumed to be a aabb-2d instance.

oncollide is a callback function, taking:

  • axis: an integer representing the axis of movement. 0 or 1.
  • tile: the tile data represented at this candidate coordinate.
  • coords: a two dimensional array of tile coordinates.
  • dir: 1 or -1, representing the direction of movement along this axis.
  • dX: the distance to the appropriate edge of this tile, if a collision is desired (such that you can write vec[axis] = dX if you'd like to collide with that tile).

If your callback returns true, it is assumed that you're done checking tiles along this access and it will move to the next axis if any.




RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free