How to make a sprite collide with tiles using matter physics

Phaser 3
1

I have a maze game in which I need the player (a sprite which uses matter physics) to collide with the walls of the maze. I have tried using collision categories but its not working. It logs an error which says “layer.setCollisionCategory is not a function”. Where am I going wrong please? Thanks in advance.

import Level from './Level.js';
class MazeLevel extends Level {
constructor (config)
{
    super((config) ? config : { key: 'mazelevel' });
    this.prefabShardWidth = 384;
    this.prefabShardHeight = 384;
    this.prefabMapWidth = 0;
    this.prefabMapHeight = 0;
    
}

create() {
   super.create();

    // Add the player (see Level.js)
     this.addPlayer({ x: this.startPosition.x, y: this.startPosition.y });

    // generate the maze (see MazePlugin.js)
    let maze = this.maze.generate(32, 8); //original is 32, and 8 so this stays the same

    // make the topLeft and bottomRight of the maze open so we can add exits
    this.maze.openTopLeft();
    this.maze.openBottomRight();

    // calculate total size in pixels
    this.prefabMapWidth = this.prefabShardWidth * this.maze.gridWidth;
    this.prefabMapHeight = this.prefabShardHeight * this.maze.gridHeight;

    this.cameras.main.setBounds(24, 0, this.prefabMapWidth - 32, this.prefabMapHeight);
    this.matter.world.setBounds(0, 0, this.prefabMapWidth, this.prefabMapHeight);

    // get the merged tile data
    let tiledata = this.maze.createMapData({ key: 'map', shardW: 4, shardH: 4});

    // create the map
    let map = this.make.tilemap({ data: tiledata, tileWidth: 96, tileHeight:96}); 
    let tiles = map.addTilesetImage('tiles', 'tiles', 96, 96, 0, 0); 
    let layer = map.createStaticLayer(0, tiles, 0, 0);

    var cat1 = this.matter.world.nextCategory();
    var cat2 = this.matter.world.nextCategory();

    layer.setCollisionCategory(cat1);
    this.player.setCollisionCategory(cat2);
   
    this.player.setCollidesWith(cat1);
 
    this.postCreate();
   }

     update(time, delta) {
     this.player.update(this.controls, time, delta);
    }
   }
export default MazeLevel;
2

Please note I have already tried the following, and it works, but it makes the game really slow. I really need another way to implement collisions.

   map.setCollisionBetween(0, 6); 
   map.setCollisionByProperty({ collides: true });
   this.matter.world.convertTilemapLayer(layer);
3

I have just realized the problem. I had debug enabled which slowed the game to a crawl. Didn’t realize debug had that effect on the speed. All working now, I stuck with this solution:

map.setCollisionBetween(0, 6); 
map.setCollisionByProperty({ collides: true });
this.matter.world.convertTilemapLayer(layer);
1 Like