phaser collision

phaser.ts

import Phaser from 'phaser';

class MainScene extends Phaser.Scene {
  _player: Phaser.GameObjects.Sprite | null;
  _cursors: Phaser.Types.Input.Keyboard.CursorKeys | null;
  _layer: Phaser.Tilemaps.StaticTilemapLayer | null;

  constructor() {
    super({
      key: 'MainScene',
    });
    this._player = null;
    this._cursors = null;
    this._layer = null;
  }

  get player(): Phaser.GameObjects.Sprite {
    if (!this._player) {
      throw new Error('Player not initialized');
    }
    return this._player;
  }

  get layer(): Phaser.Tilemaps.StaticTilemapLayer {
    if (!this._layer) {
      throw new Error('Layer not initialized');
    }
    return this._layer;
  }

  get cursors(): Phaser.Types.Input.Keyboard.CursorKeys {
    if (!this._cursors) {
      throw new Error('Cursors not initialized');
    }
    return this._cursors;
  }

  preload() {
    this.load.tilemapTiledJSON('map', '/assets/levels/tiles/map.json');
    this.load.image('link', '/assets/levels/tiles/main.png');
    this.load.image('player', '/assets/levels/images/downloads/chest.png');
  }

  create() {
    const map = this.add.tilemap('map');
    const tileset = map.addTilesetImage('link', 'link');
    this._layer = map.createStaticLayer('ground', tileset, 0, 0);
    this._layer.setCollisionByProperty({ collides: true });

    const debugGraphics = this.add.graphics().setAlpha(0.45);
    this._layer.renderDebug(debugGraphics, {
      tileColor: new Phaser.Display.Color(40, 255, 48, 255), // Color of non-colliding tiles
      collidingTileColor: new Phaser.Display.Color(243, 134, 48, 255), // Color of colliding tiles
      faceColor: new Phaser.Display.Color(40, 39, 37, 255), // Color of colliding face edges
    });
    this._player = this.add.sprite(100, 100, 'player');
    this._cursors = this.input.keyboard.createCursorKeys();
    this.physics.add.collider(this._player, this._layer, () => {
      console.log('HIT');
    });

    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
    this.cameras.main.startFollow(this.player, false);
  }

  update(time: number, delta: number) {
    const { left, right, down, up } = this.cursors;
    if (left && left.isDown) {
      this.player.x -= 5;
    }
    if (right && right.isDown) {
      this.player.x += 5;
    }
    if (down && down.isDown) {
      this.player.y += 5;
    }
    if (up && up.isDown) {
      this.player.y -= 5;
    }
  }
}

const game = new Phaser.Game({
  width: 800,
  height: 600,
  parent: 'app',
  type: Phaser.AUTO,
  physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      gravity: { y: 0 }, // Top down game, so no gravity
    },
  },
  scene: [MainScene],
});
console.log(game);