Tile colliders are not working

[pdrhlik]

Hi everyone,

I'm building a maze game using a TileMap. I extended a Scene that creates a TileMap and assigns a graphic to each tile based on some conditions. That itself works very well. To create the maze though, I will have to build walls. I thought that I could do this with EdgeColliders attached to tiles that shouldn't be crossed.

That's the part that is not working for me. When I set the tile to solid = true, the player can't cross these tiles and it's working. Whole tiles as walls are unfortunately too wide for my taste. I tried attaching different colliders to tiles but it never worked.

Here is a rough example of the code I'm using to generate the map:

// Creates a spritesheet
const tilesheet = SpriteSheet.fromImageSource({
  image: new ImageSource("path/to/source"),
  grid: {
    rows: 17,
    columns: 20,
    spriteHeight: 32,
    spriteWidth: 32
  },
});

// Initializes an empty tilemap
const tilemap = new TileMap({
  columns: 30,
  rows: 30,
  tileHeight: 32,
  tileWidth: 32
});

// Sets properties and graphic to each tile
tilemap.tiles.forEach(tile => {
  if (tile.x === 1) {
    // Graphic symbolizing a path
    tile.addGraphic(tilesheet.getSprite(4, 1));
    // This works right but copies bounds of the tile
    // tile.solid = true;

    // This part doesn't work
    tile.addCollider(new EdgeCollider({
      begin: new Vector(tile.bounds.left, tile.bounds.top),
      end: new Vector(tile.bounds.left, tile.bounds.bottom)
    }));
  } else {
    // Random graphic with no colliders
    tile.addGraphic(tilesheet.getSprite(Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)));
  }
});

// This refers to a Scene
this.add(tilemap);

Does anyone have any ideas how to solve this? I might just be missing something. Any help is appreciated :-)

Thanks a lot,
Patrik

[eonarheim]

Hi @pdrhlik thanks for posting!

I did a little digging and it looks like EdgeCollider doesn't behave properly when included in the TileMap's CompositeCollider, but as a workaround a standalone actor with an edge collider seems to behave correctly.

var edge = new ex.Actor({
  pos: ex.vec(100, 200),
  collisionType: ex.CollisionType.Fixed
});

edge.collider.useEdgeCollider(ex.vec(0, 0), ex.vec(0, 100));
game.add(edge);

I've made a bug so we can get this fixed #2353, I suspect the offset isn't being calculated right. I'll have some time later to investigate more.

[pdrhlik]

Awesome, thanks a lot @eonarheim!

I ended up going with those solid blocks in the end. I'm building a game for my children and I think it will help them orient in the maze better. Anyway, I'm glad I stumbled upon this so it can be fixed :-)

[eonarheim]

That's so cool, if you're comfortable we'd love to see the game!

[pdrhlik]

Sure thing, once it's playable, I'll show you :-) Should be in a week or so.