Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

Phaser 3
1

Hello there,
I’m making a platformer game, suddenly I got this error and I don’t know what exactly caused the problem.

image

Here’s the code I have (sorry about the comments in portuguese)

var CenaLoad = new Phaser.Class({
Extends: Phaser.Scene,

initialize:

    function CenaLoad() {
        Phaser.Scene.call(this, { key: 'CenaLoad' });
    },

preload: function () {

    //load dos assets

    //load do personagem
    this.load.spritesheet('player', 'assets/Player.png', { frameWidth: 16, frameHeight: 16 });

    //os tiles do mapa
    this.load.image('tiles', 'assets/Mapa/Mapa_com_items.png');

    //o mapa do jogo em formato json
    this.load.tilemapTiledJSON('tilemap', 'assets/Mapa/MapaApocalogico.json');


},

create() {

    const map = this.make.tilemap({ key: 'tilemap' });
    const tileset = map.addTilesetImage('Mapa_com_items', 'tiles');

    this.cameras.main.scrollY = -250;

    const ground = map.createLayer('Ground', tileset);
    ground.setCollisionByProperty({ collides: true });

    this.matter.world.convertTilemapLayer(ground);

    //definir limites do mundo
    this.matter.world.bounds.width = map.widthInPixels;
    this.matter.world.bounds.height = map.heightInPixels;

    map.createLayer('Extras', tileset);

    //adição do player (frame 0, imagem 0 na sprite)
    this.player = this.matter.add.sprite(50, 100, 'player', 0);

    //INPUT baseado no teclado
    this.cursors = this.input.keyboard.createCursorKeys();

    this.anims.create({
        key: 'idle',
        frameRate: 10,
        frames: this.anims.generateFrameNumbers('player', { frames: [0, 1, 2, 3] }),
        repeat: -1
    });

    this.anims.create({
        key: 'walk',
        frameRate: 10,
        frames: this.anims.generateFrameNumbers('player', { frames: [6, 7, 8, 9, 10, 11] }),
        repeat: -1
    });

    this.anims.create({
        key: 'jump',
        frameRate: 10,
        frames: this.anims.generateFrameNumbers('player', { frames: [12, 13, 14] }),
        repeat: -1
    });

},

update() {

    this.player.body.setVelocity(0);

    //movimento vertical do player
    if (this.cursors.up.isDown) {
        this.player.body.setVelocityY(-80);
    }

    //movimento horizontal do player
    if (this.cursors.left.isDown) {
        this.player.body.setVelocityX(-80);
    } else if (this.cursors.right.isDown) {
        this.player.body.setVelocityX(80);
    }


    //animação do layer
    if (this.cursors.left.isDown) {
        this.player.anims.play('walk', true);
        this.player.flipX = true;
    } else if (this.cursors.right.isDown) {
        this.player.anims.play('walk', true);
        this.player.flipX = false;
    } else if (this.cursors.up.isDown) {
        this.player.anims.play('jump', true);
    } else {
        this.player.anims.stop();
    }
}

});

Besides this class I only have a "game.js with the config and the index.html calling the Javascript.

var config = {
type: Phaser.AUTO,
width: 650,
height: 300,
zoom : 2,
pixelArt: true,
physics: {
default: ‘matter’,
matter: {
debug : true
}
},
scene:[
CenaLoad
]
};

var game = new Phaser.Game(config);

I believe the problem is in the “cenaload.js”, but I don’t know what’s causing it.

2

I would guess it’s a problem with MapaApocalogico.json. Is it a Tiled JSON map?

You could switch to the phaser.js script, break on error, and look at what’s happening in the debugger.

1 Like
3

It was indeed a problem with the JSON map, I made a mistake exporting it after changing some blocks collisions, thanks. :slight_smile: