Phaser 3定时器控制文本切换场景失效问题求助

问题根源 #

1. jobQuestion变量冲突：你在点击事件末尾才将jobQuestion设为false，如果代码中存在update函数或其他逻辑，会在jobQuestion为true时强制把query文本重置为初始问题，直接覆盖点击按钮后设置的第一行文本，导致后续文本切换无法显示。
2. 并行时间事件不可靠：当前所有time.addEvent同时启动计时，虽设置了不同延迟，但游戏帧率波动或事件队列阻塞时，可能导致文本切换顺序混乱或被跳过。
3. 未禁用按钮交互：点击按钮后未禁用按钮，误触多次会重复触发事件，进一步打乱流程。

修复方案 #

步骤1：调整变量设置时机 #

在点击事件最开头就将jobQuestion设为false，避免其他逻辑重置文本：

unemployed.on('pointerdown', function (pointer) {
    jobQuestion = false; // 立即设置，防止文本被强制重置
    this.query.setText('Thats a lie. He did have a job.');
    // ... 后续事件
}, this);

步骤2：改用串行时间事件（更稳定） #

通过嵌套time.delayedCall实现串行触发，避免并行计时的不确定性：

unemployed.on('pointerdown', function (pointer) {
    jobQuestion = false;
    this.query.setText('Thats a lie. He did have a job.');

    // 串行触发后续文本切换
    this.time.delayedCall(2500, () => {
        this.query.setText('He was a police officer. He never was a security guard.');
        this.time.delayedCall(2500, () => {
            this.query.setText('He never lost his job or struggled with money.');
            this.time.delayedCall(2500, () => {
                this.query.setText('He had gone to visit a fellow officer that day.');
                this.time.delayedCall(2500, () => {
                    this.query.setText('He was shocked to find the window smashed and his friend dead.');
                    this.time.delayedCall(1, () => this.scene.start('menu'), [], this);
                }, [], this);
            }, [], this);
        }, [], this);
    }, [], this);

    // 禁用按钮，防止重复点击
    unemployed.disableInteractive();
    cop.disableInteractive();
}, this);

步骤3：禁用按钮交互 #

点击按钮后立即禁用两个按钮的交互，确保流程只执行一次，避免重复触发事件。

完整修复代码 #

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) {
    jobQuestion = false;
    this.query.setText('Thats a lie. He did have a job.');

    this.time.delayedCall(2500, () => {
        this.query.setText('He was a police officer. He never was a security guard.');
        this.time.delayedCall(2500, () => {
            this.query.setText('He never lost his job or struggled with money.');
            this.time.delayedCall(2500, () => {
                this.query.setText('He had gone to visit a fellow officer that day.');
                this.time.delayedCall(2500, () => {
                    this.query.setText('He was shocked to find the window smashed and his friend dead.');
                    this.time.delayedCall(1, () => this.scene.start('menu'), [], this);
                }, [], this);
            }, [], this);
        }, [], this);
    }, [], this);

    unemployed.disableInteractive();
    cop.disableInteractive();
}, this);

cop.on('pointerdown', function (pointer) {
    jobQuestion = false;
    this.query.setText('Yes, hes was a police officer.');

    this.time.delayedCall(2500, () => {
        this.query.setText('He never lost his job, nor was he ever security guard.');
        this.time.delayedCall(2500, () => {
            this.query.setText('That part was a lie to make him look like a criminal.');
            this.time.delayedCall(2500, () => {
                this.query.setText('He had gone to visit a fellow officer that day.');
                this.time.delayedCall(2500, () => {
                    this.query.setText('He was shocked to find the window smashed and his friend dead.');
                    this.time.delayedCall(1, () => this.scene.start('menu'), [], this);
                }, [], this);
            }, [], this);
        }, [], this);
    }, [], this);

    unemployed.disableInteractive();
    cop.disableInteractive();
}, this);

额外优化建议 #

将文本内容提取到数组中，通过循环生成串行事件，减少重复代码：

const texts = [
    'Thats a lie. He did have a job.',
    'He was a police officer. He never was a security guard.',
    'He never lost his job or struggled with money.',
    'He had gone to visit a fellow officer that day.',
    'He was shocked to find the window smashed and his friend dead.'
];
let index = 0;
const showNextText = () => {
    if (index >= texts.length) {
        this.scene.start('menu');
        return;
    }
    this.query.setText(texts[index]);
    index++;
    this.time.delayedCall(2500, showNextText, [], this);
};
showNextText();

内容的提问来源于stack exchange，提问作者EmptyStone