Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    collide-2d-tilemappublic

    collide-2d-tilemap

    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.

    Warning

    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) }.

    API

    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.

    License

    MIT

    Keywords

    none

    install

    npm i collide-2d-tilemap

    Downloadsweekly downloads

    6

    version

    0.0.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar