how can i change text when pausing / resuming phaser game?

Question

I'm trying to toggle between 'Pause' and 'Resume' text when pausing and resuming, i tried the following in create:

gameState.playPauseText = this.add.text(660, 547, 'Pause', { fontFamily: 'Roboto Mono, monospace', fontSize: '20px',  fill: '#FFFFFF' });

then tried changing that inside a callback function:

gameState.playPauseArea.on('pointerdown', () => {
        if(!gameState.isPaused) {
            gameState.playPauseText.setText('Resume');
            game.loop.sleep();
            gameState.isPaused = true;

        }
        else {
            gameState.playPauseText.setText('Pause');
            game.loop.wake();
            gameState.isPaused = false;
           
        }
    });

then i tried same, but changed .setText to .text =. The best i got from all above is to change text to 'Resume' after 2 clicks, but never back to 'Pause'.

I also tried the following in update:

if(gameState.isPaused) {
        gameState.pauseText.setText('Resume')
        

    } else {
        gameState.pauseText.setText('Pause');
       
    }

that didn't do anything.

I also tried creating two separate texts and hiding one with setVisible(false) and tried all of the above toggling both 'Resume' and 'Pause' between setVisible(true) and setVisible(false).

also nothing.

I use .setText() somewhere in my code, to change score text and it works fine.

Answer 1

The problem is, that you are stopping the game loop, so nothing is going to be painted/updated any more. You could call the game.loop.sleep() with abit of delay, so that a repaint, will still be triggert.

...
setTimeout( () => game.loop.sleep(), 50);
...

Or with the Phaser delayedCall function:

...    
this.time.delayedCall(50, game.loop.sleep, null, game.loop);
...

here a short demo:

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

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    },
    banner: false
}; 

function create () {
   let text = this.add.text(30, 90, 'Click me to start');
   let pause = false;
   
   this.input.on('pointerdown', () => {
    if(!pause) {
            text.setText('Click me to Resume');
            setTimeout( _ => game.loop.sleep(), 50);
            pause = true;

        }
        else {
            text.setText('Click me to Pause');
            game.loop.wake();
            pause = false;
           
        }
   })
}

let game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>