javascriptswitch-statementphaser-frameworkscene

Phaser just added a scene, but the game freezes when switching to it


I recently added a new scene to my game and I was testing going to it from previously made scenes. But while I can switch between the 3 scenes I made before just fine, when I switch to the new scene, the game gets an error and freezes.

Here is the code from a previously made scene. The code involved in scene switching makes it so the game switches to the adjacent when the player moves to an invisible sprite on one of the sides of the scene.

 class DiningRoom extends Phaser.Scene {
    constructor() {
        super('diningRoom');
    }

    preload() {

        this.load.image('diningRoom', "assets/diningRoom.png");
        this.load.image('testGround', "assets/testGround.png");
        this.load.image('chairSeatSide', "assets/chairSeatSide.png");
        this.load.image('tableSurface', "assets/tableSurface.png");
        this.load.image('needle', "assets/needle.png");
        this.load.image('ropeCoil', "assets/ropeCoil.png");
        this.load.image('stool', "assets/stool.png");
        this.load.spritesheet('PeefSide', "assets/PeefSide.png", { frameWidth: 50, frameHeight: 60 });
        this.load.image('clearDoor', "assets/clearDoor.png");

    }

    create() {

        let width = config.width;
        let height = config.height;
        this.physics.world.gravity.y = 1000;

        this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
        this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
        this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
        this.keyT = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.T);
        this.keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
        this.keyV = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.V);

        this.bg = this.add.tileSprite(0, 0, game.config.width, game.config.height, 'diningRoom').setOrigin(0, 0);

        this.ground = this.physics.add.sprite(800, 864, 'testGround');
        this.ground.body.immovable = true;
        this.ground.body.allowGravity = false;

        this.platforms = this.add.group();

        this.farLeftChair = this.physics.add.sprite(140, 488, 'chairSeatSide');
        this.farLeftChair.body.immovable = true;
        this.farLeftChair.body.allowGravity = false;
        this.platforms.add(this.farLeftChair);

        this.farRightChair = this.physics.add.sprite(1480, 488, 'chairSeatSide');
        this.farRightChair.body.immovable = true;
        this.farRightChair.body.allowGravity = false;
        this.platforms.add(this.farRightChair);

        this.tableTop = this.physics.add.sprite(816, 322, 'tableSurface');
        this.tableTop.body.immovable = true;
        this.tableTop.body.allowGravity = false;
        this.platforms.add(this.tableTop);

        this.needleOne = this.physics.add.sprite(300, 270, 'needle');

        this.rope = this.physics.add.sprite(130, 430, 'ropeCoil');

        this.doorLeft = this.physics.add.sprite(14.5, 735, 'clearDoor');
        this.doorLeft.body.immovable = true;
        this.doorLeft.body.allowGravity = false;

        this.doorRight = this.physics.add.sprite(1585, 735, 'clearDoor');
        this.doorRight.body.immovable = true;
        this.doorRight.body.allowGravity = false;

        this.p1 = this.physics.add.sprite(1535, 730, 'PeefSide');
        this.p1.setCollideWorldBounds(true);
        this.p1.setFlip(true, false);

        this.stool = this.physics.add.sprite(1350, 730, 'stool');
        this.stool.body.immovable = true;
        this.stool.body.allowGravity = false;

        this.physics.add.collider(this.p1, this.ground);
        this.physics.add.collider(this.p1, this.platforms);
        this.physics.add.collider(this.p1, this.stool);
        this.physics.add.collider(this.needleOne, this.platforms);
        this.physics.add.collider(this.rope, this.platforms);

        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('PeefSide', { start: 0, end: 7, first: 0 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'idle',
            frames: [{ key: 'PeefSide', frame: 0 }],
        });

    }

    update() {

        if (this.keyA.isDown) {
            this.p1.setVelocityX(-200);
            this.p1.setFlip(true, false);
            this.p1.anims.play('walk', true);
        }
        else if (this.keyD.isDown) {
            this.p1.setVelocityX(200);
            this.p1.resetFlip();
            this.p1.anims.play('walk', true);
        }
        else {
            this.p1.setVelocityX(0);
            this.p1.anims.play('idle', true);
        }

        if (this.checkCollision(this.p1, this.farLeftChair) && Phaser.Input.Keyboard.JustDown(this.keyW)) {
            this.p1.body.setVelocityY(-650);
            console.log(this.p1.velocityY);
            console.log("1");
        }

        if (this.checkCollision(this.p1, this.farRightChair) && Phaser.Input.Keyboard.JustDown(this.keyW)) {
            this.p1.body.setVelocityY(-650);
            console.log(this.p1.velocityY);
            console.log("2");
        }

        if (this.checkCollision(this.p1, this.stool) && this.p1.y <= this.stool.y && Phaser.Input.Keyboard.JustDown(this.keyW)) {
            this.p1.body.setVelocityY(-800);
            console.log(this.p1.velocityY);
            console.log("3");
        }

        if (this.p1.body.touching.down && Phaser.Input.Keyboard.JustDown(this.keyW)) {
            this.p1.body.setVelocityY(-500);
            console.log(this.p1.velocityY);
            console.log("4");
        }

        if (this.checkCollision(this.p1, this.doorLeft)) {
            this.p1.x = 55;
            this.scene.switch('stairRoom');
        }

        if (this.checkCollision(this.p1, this.doorRight)) {
            this.p1.x = 1535;
            this.scene.switch('livingRoom');
        }

        if (this.checkCollision(this.p1, this.needleOne) && Phaser.Input.Keyboard.JustDown(this.keyT)) {
            inventory.push("needleOne");
            this.needleOne.destroy();
        }

        if (this.checkCollision(this.p1, this.rope) && Phaser.Input.Keyboard.JustDown(this.keyT)) {
            inventory.push("rope");
            this.rope.destroy();
        }

        //if (Phaser.Input.Keyboard.JustDown(this.keyV)){
        //    inventory.splice(inventory.indexOf("neeldeOne"));
        //}

    }

    checkCollision(a, b) {
        // simple AABB checking
        if ((a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.height + a.y > b.y)) {
            return true;
        }
        else {
            return false;
        }
    }

    has(item) {
        this.space = 0;
        this.result = false
        while (this.space < inventory.length) {
            if (inventory[this.space] == item) {
                this.result = true;
                break;
            }
            else {
                this.space += 1;
            }
        }
        return this.result;
    }

} 

And here is the code from the new scene I added.

class TVRoom extends Phaser.Scene {
    constructor() {
        super('tvRoom');
    }

    preload() {

        this.load.image('tvRoom', "assets/tvRoom.png");
        this.load.image('testGround', "assets/testGround.png");
        this.load.image('couchCushion', "assets/couchCushion.png");
        this.load.spritesheet('PeefSide', "assets/PeefSide.png", { frameWidth: 50, frameHeight: 60, startFrame: 0, endFrame: 7 });
        this.load.image('clearDoor', "assets/clearDoor.png");
        this.load.image('testItem', "assets/testItem.png");

    }

    create() {

        let width = config.width;
        let height = config.height;
        this.physics.world.gravity.y = 1000;

        this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
        this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
        this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
        this.keyT = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.T);
        this.keyG = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
        this.keyV = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.V);

        this.bg = this.add.tileSprite(0, 0, game.config.width, game.config.height, 'tvRoom').setOrigin(0, 0);

        this.ground = this.physics.add.sprite(800, 864, 'testGround');
        this.ground.body.immovable = true;
        this.ground.body.allowGravity = false;

        this.platforms = this.add.group();

        this.doorLeft = this.physics.add.sprite(14.5, 735, 'clearDoor');
        this.doorLeft.body.immovable = true;
        this.doorLeft.body.allowGravity = false;

        this.doorRight = this.physics.add.sprite(1585, 735, 'clearDoor');
        this.doorRight.body.immovable = true;
        this.doorRight.body.allowGravity = false;

        //this.hammer = this.physics.add.sprite(700, 735, 'testItem');

        //this.stiches = this.physics.add.sprite(1400, 730, 'stiches');

        //this.goodLamb = this.physics.add.sprite(1460, 730, 'goodLamb');
        //this.goodLamb.setFlip(true, false);

        this.p1 = this.physics.add.sprite(55, 730, 'PeefSide');
        this.p1.setCollideWorldBounds(true);

        this.physics.add.collider(this.p1, this.ground);
        this.physics.add.collider(this.stiches, this.ground);
        this.physics.add.collider(this.goodLamb, this.ground);
        this.physics.add.collider(this.p1, this.platforms);
        this.physics.add.collider(this.spool, this.platforms);

        this.line1 = this.add.text(880, 790, ' ', { font: '20px Futura', fill: '#FFFFFF' }).setOrigin(0.5);
        this.line2 = this.add.text(880, 840, ' ', { font: '20px Futura', fill: '#FFFFFF' }).setOrigin(0.5);

        this.talking = false;

        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('PeefSide', { start: 0, end: 7, first: 0 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'idle',
            frames: [{ key: 'PeefSide', frame: 0 }],
        });

    }

    update() {

        if (this.keyA.isDown && this.talking == false) {
            this.p1.setVelocityX(-200);
            this.p1.setFlip(true, false);
            this.p1.anims.play('walk', true);
        }
        else if (this.keyD.isDown && this.talking == false) {
            this.p1.setVelocityX(200);
            this.p1.resetFlip();
            this.p1.anims.play('walk', true);
        }
        else {
            this.p1.setVelocityX(0);
            this.p1.anims.play('idle', true);
        }

        if (this.p1.body.touching.down && Phaser.Input.Keyboard.JustDown(this.keyW) && this.talking == false) {
            this.p1.body.setVelocityY(-500);
        }

        if (this.checkCollision(this.p1, this.doorLeft)) {
            this.p1.x = 55;
            this.scene.switch('livingRoom');
        }

        //if (this.checkCollision(this.p1, this.doorRight)){
        //    this.p1.x = 1535;
        //    this.scene.switch('livingRoom');
        //}

        /*if (this.checkCollision(this.p1, this.ropeSpot) && Phaser.Input.Keyboard.JustDown(this.keyT)){
            if (this.has("rope")){
                this.takeOut("rope");
                this.ropeSpot.destroy();
                this.rope = this.physics.add.sprite(628, 420, 'ropeClimb');
                this.rope.body.immovable = true;
                this.rope.body.allowGravity = false;
            }
            
        }*/



        if (Phaser.Input.Keyboard.JustDown(this.keyG)) {
            console.log(this.talking);

        }

        //if (Phaser.Input.Keyboard.JustDown(this.keyV)){
        //    inventory.splice(inventory.indexOf("spool"));
        //}

        //if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && Phaser.Input.Keyboard.JustDown(this.keyT)) {
        //    this.talking = !this.talking;
        //}

        /*if (this.talking == true){
            if (this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) {
                if (this.has("spool") && this.has("needleOne") && this.has("needleTwo")){
                    this.line1.setText('Good Lamb: Oh, thanks Peef! Now we can fix Stiches!');
                    this.line2.setText('Peef: Glad to help. I know how painful rips are.');
                }
                else if (!(this.has("spool")) || !(this.has("needleOne")) || !(this.has("needleTwo"))) {
                    this.line1.setText('Good Lamb: Help! Stiches ripped herself again! Can you get the sewing supplies?');
                    this.line2.setText('Peef: Oh gosh! Sit tight Stiches. Ill be back soon!');
                }
            }

            if (this.keyA.isDown || this.keyD.isDown) {
                this.p1.setVelocityX(0);
            }
            if(this.p1.body.touching.down && Phaser.Input.Keyboard.JustDown(this.keyW)) {
                this.p1.body.setVelocityY(0);
            }

            
        }*/

        if (this.talking == false) {
            this.line1.setText('');
            this.line2.setText('');
        }

    }

    checkCollision(a, b) {
        // simple AABB checking
        if ((a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.height + a.y > b.y)) {
            return true;
        }
        else {
            return false;
        }
    }

    collect(item) {
        this.space = 0;
        while (this.space < 10) {
            if (inventory[this.space] == null) {
                inventory[this.space] == item;
                break;
            }
            else {
                this.space += 1;
            }
        }
    }

    has(item) {
        this.space = 0;
        this.result = false
        while (this.space < inventory.length) {
            if (inventory[this.space] == item) {
                this.result = true;
                break;
            }
            else {
                this.space += 1;
            }
        }
        return this.result;
    }

    takeOut(item) {
        this.space = 0;
        while (this.space < 10) {
            if (inventory[this.space] == item) {
                inventory[this.space] == null;
                break;
            }
            else {
                this.space += 1;
            }
        }
    }

}

And finally, here is the error message I'm getting when I switch to the new scene

Uncaught TypeError: Cannot read properties of undefined (reading 'isParent')
at World.collideObjects (phaser.js:126291:21)
at Collider.update (phaser.js:129644:20)
at World.update (phaser.js:125511:30)
at EventEmitter.emit (phaser.js:1928:33)
at Systems.step (phaser.js:49066:16)
at SceneManager.update (phaser.js:100289:21)
at Game.step (phaser.js:162805:20)
at TimeStep.step (phaser.js:89366:14)
at step (phaser.js:89613:19)

I have no idea what this error means and I don't have the time to figure it out. Some of the error's language points me to the scene constructor, but I copied it from another scene and only changed the scene name within it.

I do plan to add more scenes and I can't risk going through this every time I add a new one. How the heck do I fix this?

If it helps, I'm using Phaser 3 in VSCode employing arcade physics.


Solution

  • The Error has clearly to do with the phaser physics System. I assume if you remove atleast these lines:

    this.physics.add.collider(this.stiches, this.ground);
    this.physics.add.collider(this.goodLamb, this.ground);
    this.physics.add.collider(this.spool, this.platforms);
    

    the mentioned error will disappear, since adding a collider with an undefined value will cause this error.

    Tipp: on Stackoverflow, if the code you commented out is not relevant for the problem, delete it. Always best to try to follow this Guide How to create a Minimal, Reproducible Example.