tile map collision bug

[peterlee-dev]

Sometimes, collision is not working

my code is here

import Phaser from 'phaser';
export default class MyScene extends Phaser.Scene {
    player!: Phaser.Physics.Arcade.Sprite;

    cursors!: Phaser.Types.Input.Keyboard.CursorKeys;

    constructor() {
        super('demo');
    }
    preload() {
        this.load.image('grass', 'assets/grass.png');
        this.load.image('background', 'assets/blue_desert.png');
        this.load.tilemapTiledJSON('map', 'assets/map01.json');

        this.load.atlas('player', 'assets/yellow_ailen.png', 'assets/yellow_ailen.json');
    }
    create() {
        const map = this.make.tilemap({ key: 'map' });

        const backgroundTileset = map.addTilesetImage('colored_land', 'background', 128, 128);
        const grassTileset = map.addTilesetImage('grass', 'grass', 128, 128);

        const backgroundLayer = map.createLayer('background', backgroundTileset, 0, 0);
        const grassLayer = map.createLayer('grass', grassTileset, 0, 0);

        grassLayer.setCollisionByExclusion([-1]);
        grassLayer.renderDebug(this.add.graphics(), {
            tileColor: null,
            collidingTileColor: new Phaser.Display.Color(244, 255, 36, 100), // Colliding tiles
            faceColor: new Phaser.Display.Color(255, 0, 0, 255) // Colliding face edges,
        });
        const spawnPoint = map.findObject('objects', obj => obj.name === 'spawn');

        this.cursors = this.input.keyboard.createCursorKeys();
        this.player = this.physics.add.sprite(spawnPoint.x!, spawnPoint.y!, 'player', 'alienYellow_front.png');
        this.player.setSize(90, 150);
        this.player.setOffset(20, 110);

        this.player.anims.create({
            key: 'walk',
            frameRate: 7,
            frames: this.anims.generateFrameNames('player', {
                prefix: 'alienYellow_walk',
                suffix: '.png',
                start: 0,
                end: 2,
                zeroPad: 1
            }),
            repeat: -1
        });

        grassLayer.layer.data.forEach(row => {
            row.forEach(tile => {
                if (tile.properties.collides) {
                    tile.setCollision(false, false, true, false);
                }
            });
        });

        this.physics.add.collider(this.player, grassLayer);
        this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

        const camera = this.cameras.main;
        camera.startFollow(this.player);
        camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
    }
    update(time: number, delta: number): void {
        if (this.cursors.left.isDown) {
            this.player.setVelocityX(-600);
        } else if (this.cursors.right.isDown) {
            this.player.setVelocityX(600);
        } else {
            this.player.setVelocityX(0);
        }

        if (this.cursors.up.isDown) {
            this.player.setVelocityY(-1250);
        }
    }
}