How to remove text

Hello,

I have created a condition to pause the game by hitting the spacebar & resume the game when hitting the shift key.

When the game is paused, a message saying “Game Paused is added”. However, I dont find a way to remove it when game is resumed.

This is my code:

    function update ()
    {
      // Pause game by pressing spacebar & resume by pressing shift
      if(cursors.space.isDown){
        this.physics.pause();
        pauseGameText = this.add.text(200, 200, 'Game Paused', { font: "bold 40px Aria", fill: "#fff"});
      } else if (cursors.shift.isDown){
        this.physics.resume();
        pauseGameText.destroy();
      }

Any help will be appreciate it! Thanks in advance!

Create the text once, in create(), the toggle it with .setVisible(true) or .setVisible(false).

from @samme’s explanation,

function create() {
    pauseGameText = this.add.text(
        100, 200, 'Game Paused', 
        { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }
    )
    .setVisible(false);
}

function update() {
    if(cursors.space.isDown){
        //... Your pause code
        pauseGameText.setVisible(true);
    }
    else if (cursors.shift.isDown){
        //... Your pause code
        pauseGameText.setVisible(false);
    }

}

Thanks, I am able to add it but it doesn’t remove once is displayed in the game. Any thoughts?

Maybe you can just use an else statment to make it invisible ? like this:

function update() {
    if(cursors.space.isDown){
        //... Your pause code
        pauseGameText.setVisible(true);
    }
    else {
        //... Your pause code
        pauseGameText.setVisible(false);
    }
}

Possibly when u press space it’s adding it maybe more then 100 time and that’s why u never saw it’s removing.
As far as i think it should be work fine when u do it like @samme said.

function create ()
{
  pauseGameText = this.add.text(200, 200, 'Game Paused',{ fontFamily: 'Arial', fontSize: 64, color: '#00ff00'}).setVisible(false);
}

function update ()
{
  // Pause game by pressing spacebar & resume by pressing shift
  if(cursors.space.isDown){
    this.physics.pause();
    pauseGameText.setVisible(true);
  } else if (cursors.shift.isDown){
    this.physics.resume();
    pauseGameText.setVisible(false);
  }
}

I tried this example like you guys advised me but I don’t get the desire effect so far. I am able to add the text but it doesn’t away after. I could try do this with a button instead but I would like to be a text if possible.

Hello again @Manuel-Suarez-Abasca
I couldn’t understand what is the problem actually, like i tried this code with out pausing anything and seting false and true toggle’s the visibility.

Can you create a fiddle maybe to show us what’s not working ? :slight_smile:

I woudn’t suggest listening to this input in your update loop. It means you will pause or un-pause the game in EVERY frame!

I assume what you want is to just pause the game 1x and then stay in pause mode until you un-pause the game again. In other words, you want to listen to the “Pause-Input” 1x and not in every frame 60 times per second.

So I think listening to the ‘keyup’ event on the keyboard could solve your problem:

function create ()
{
    let pauseGameText = this.add.text(200, 200, 'Game Paused',{ fontFamily: 'Arial', fontSize: 64, color: '#00ff00'}).setVisible(false);

	function handleKeyUp (e)
	{
		switch (e.code)
		{
			case 'Space':
				this.physics.pause();
				pauseGameText.setVisible(true);
				break;
			case 'ShiftLeft':
			case 'ShiftRight':
				this.physics.resume();
				pauseGameText.setVisible(false);
				break;
		}
	}
	
	this.input.keyboard.on('keyup', handleKeyUp, this);
}

Hello @hcakar , @jamespierce , @samme

I just figure it out. I was just missing setting the text to pauseGameText.setDepth(1);

So finally my code ended like this:

function create ()
{
// Set text to pause game & hide it
pauseGameText = this.add.text(200, 200, ‘Game Paused’,{ fontFamily: ‘Arial’, fontSize: 64, color: ‘#fff’}).setVisible(false);

// Set the depth to 1
pauseGameText.setDepth(1);
}

function update ()
{
// Pause game by pressing spacebar & resume by pressing shift
if(cursors.space.isDown){
this.physics.pause();
pauseGameText.setVisible(true);
} else if (cursors.shift.isDown){
this.physics.resume();
pauseGameText.setVisible(false);
}
}

And it works perfectly! :slight_smile:

2 Likes

Great! :blush::+1:

1 Like

Probably quite late but unless you want to always re-use the same text object you could also destroy it with pauseGameText.destroy(), and not need to change visibility.