Phaser timer controlled text trouble

Question

I'm trying to have some text that shows one line at a time then change scenes, using events. I'm having trouble though. Here is the code I'm using:

this.query.setText('What was his job?');
var unemployed = this.add.sprite(600, 600, 'unemployedButton').setInteractive();
var cop = this.add.sprite(1080, 600, 'copButton').setInteractive();

unemployed.on('pointerdown', function (pointer) {

    this.query.setText('Thats a lie. He did have a job.');
    this.time.addEvent({
        delay: 2500,
        callback: () => this.query.setText('He was a police officer. He never was a security guard.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 5000,
        callback: () => this.query.setText('He never lost his job or struggled with money.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 7500,
        callback: () => this.query.setText('He had gone to visit a fellow officer that day.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 10000,
        callback: () => this.query.setText('He was shocked to find the window smashed and his friend dead.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12500,
        callback: () => jobQuestion = false,
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12501,
        callback: () => this.scene.start('menu'),
        callbackScope: this,
    });

}, this);

cop.on('pointerdown', function (pointer) {

    this.query.setText('Yes, hes was a police officer.');
    this.time.addEvent({
        delay: 2500,
        callback: () => this.query.setText('He never lost his job, nor was he ever security guard.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 5000,
        callback: () => this.query.setText('That part was a lie to make him look like a criminal.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 7500,
        callback: () => this.query.setText('He had gone to visit a fellow officer that day.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 10000,
        callback: () => this.query.setText('He was shocked to find the window smashed and his friend dead.'),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12500,
        callback: () => jobQuestion = false,
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12501,
        callback: () => this.scene.start('menu'),
        callbackScope: this,
    });
}, this);

The code is supposed to show one of two series of lines based on a button that the player clicked on. But as it is now, when the player clicks a button, it just shows, the first the initial question (the first thing this.query is set to) for a while and then goes to the menu scene.

I'm not sure what I did wrong. I swear it was working earlier, before I added the parts with the boolean and the scene change. Can someone tell me where I messed up and how do I fix it?

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

Answer 1

Update: If the code is really in the update functio, this is the cause of the error, since eventlisteners will be call on each update function is call (~ 60 times per minute). Move this to the create function, as in my demo code, and the problem should be fixed.

The problem must be somewhere else, or you are clicking multiple times, because the code should work.

Here a demo:

document.body.style = 'margin:0;';

var boolVariable = false

class FirstScene extends Phaser.Scene {
    constructor() {
        super('FirstScene')
    }

    create() {
        this.label1 = this.add.text(50, 80, '')
            .setScale(2)
            .setOrigin(0)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });

        let button = this.add.rectangle(10, 10, 200, 50, 0xffffff)
            .setOrigin(0)
            .setInteractive();

        let buttonText = this.add.text(0, 0, 'Press me')
            .setScale(1.5)
            .setColor('#000000')
            .setOrigin(0.5)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });

        Phaser.Display.Align.In.Center(buttonText, button);

        button.on('pointerdown', function (pointer) {
            console.info(1)
            this.label1.setText('Initial Text');
            this.time.addEvent({
                delay: 1000,
                callback: () => this.label1.setText(`Text 1 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 2000,
                callback: () => this.label1.setText(`Text 2 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 2500,
                callback: () => boolVariable = true,
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 3000,
                callback: () => this.label1.setText(`Text 3 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });


            this.time.addEvent({
                delay: 4000,
                callback: () => this.scene.start('menu'),
                callbackScope: this,
            });

        }, this);
    }
}


class SecondScene extends Phaser.Scene {
    constructor() {
        super('menu')
    }

    create() {
        this.label1 = this.add.text(50, 50, 'MENU SCENE')
            .setScale(2.5)
            .setOrigin(0)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: [FirstScene, SecondScene]
};

new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>