How Do You Restart the Game Fresh?

Phaser 3
1

I am struggling to overcome the issue of coming back from a browser tab because I’m using async calls and recursive functions to call a blockchain. The only solution I have found after more than a week is to restart the game fresh and nuke absolutely everything. The only thing is I can’t figure out how to do that either.

Here is the documentation:

https://photonstorm.github.io/phaser3-docs/Phaser.Scenes.Systems.html#start__anchor

Pause is bad because it saves the state when you trigger it on visibility change. Shutdown is bad for the same reasons. It doesn’t clear the pending sounds or tweens. Start works, but not in the expected way. You cannot restart, so if you destroy the game, then you cannot then start it again. The best solution I have now is to destroy things, and have a listener put a banner that the user needs to hard refresh the page.

2

There’s isn’t really a whole game restart. You can either

  • Restart every scene
  • Remove (destroy) every scene and recreate
  • Destroy the game and create a new one
3

Can you show an example of these strategies? I’m not having any luck for days now. The sounds and tweens still play!

This doesn’t work:

document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible"){
        game.scene.start("default");
    }
    if (document.visibilityState === "hidden"){
        game.scene.stop("default");
    }
    console.log(document.visibilityState);
});

The game stops, but when started, all of the pending events play at once.

When using shutdown:

game.js:123 Uncaught TypeError: game.scene.shutdown is not a function
    at HTMLDocument.document.addEventListener (game.js:123)

When using destroy:

phaser.min.js:1 Uncaught TypeError: Cannot read property 'emit' of null
    at initialize.start (phaser.min.js:1)
    at initialize.start (phaser.min.js:1)
    at HTMLDocument.document.addEventListener (game.js:120)
start @ phaser.min.js:1
start @ phaser.min.js:1
document.addEventListener @ game.js:120

08:07:33.257 game.js:125 hidden

08:07:33.843 phaser.min.js:1 Uncaught TypeError: Cannot read property 'emit' of null
    at initialize.start (phaser.min.js:1)
    at initialize.start (phaser.min.js:1)
    at HTMLDocument.document.addEventListener (game.js:120)
start @ phaser.min.js:1
start @ phaser.min.js:1
document.addEventListener @ game.js:120

08:07:38.691 phaser.min.js:1 Uncaught TypeError: Cannot read property 'width' of null
    at initialize.updateUVs (phaser.min.js:1)
    at initialize.setSize (phaser.min.js:1)
    at initialize.updateText (phaser.min.js:1)
    at initialize.setText (phaser.min.js:1)
    at initialize.set [as text] (phaser.min.js:1)
    at countdown (game.js:596)
updateUVs @ phaser.min.js:1
setSize @ phaser.min.js:1
updateText @ phaser.min.js:1
setText @ phaser.min.js:1
set @ phaser.min.js:1
countdown @ game.js:596
setInterval (async)
create @ game.js:620
create @ phaser.min.js:1
loadComplete @ phaser.min.js:1
h.emit @ phaser.min.js:1
loadComplete @ phaser.min.js:1
fileProcessComplete @ phaser.min.js:1
onProcessComplete @ phaser.min.js:1
config.context @ phaser.min.js:1
4

It’s been a couple weeks, and I haven’t been able to progress with Phaser as I haven’t figured out how to refresh the scene. I am having audio and tweens backup when tabbed away, but I cannot figure out how remove them from the queue, so the only solution left is to restart the game.

It’s very frustrating to have browsers behave irregularly and to not have examples anywhere as well. :frowning: IF anyone could help here it would be greatly appreciated.

This thread wasn’t helpful: http://www.html5gamedevs.com/topic/40137-how-do-i-restart-scene/

this.scene.restart("default");
this.scene.restart();
sceneName.scene.restart("default");
sceneName.scene.restart();

None of the above work. The above event listener is at the top of everything, and also spits the same error when put in create().

Edit: It appears you need to put in create() and not use restart, rather stop and start. I’m not sure why restart introduces so many errors.

/////CREATE FUNCTION/////
function create() {

    document.addEventListener("visibilitychange", () => {
        if (document.visibilityState === "visible"){
            this.scene.start();
        }
        if (document.visibilityState === "hidden"){
            this.scene.stop();
        }
        console.log(document.visibilityState);
    });
2 Likes
5

I’m running into the same problems with v3.24.1. Monitor my WIP with dynamic scenes interactions.

See how I’m solving this at http://makingbrowsergames.com/starterkits/rpg/_arrp-phaser/p3/. Use the console to watch internal game operations.

6

Either

this.scene.start()

or

this.scene.restart();

restarts the calling scene, this. Used this way, start() and restart() are identical.

To restart a different scene, use

this.scene.launch('other');

Restarting the whole game would depend on how it started first, but one way would be

// Stop all scenes
for (const scene of this.scene.manager.getScenes(false)) {
    scene.scene.stop();
}

// Restart first scene
this.scene.start('boot');
7

For anyone else visiting this post, looking for an answer; you can simply call “location.reload();” to reload the game (it basically works like the Refresh button).

8

Just to review:

  • Stopping a scene clears all of its game objects and tweens.
  • Stopping a scene doesn’t affect sound playback, which is global.
  • Use only restart() (with no argument) or launch('key') to restart a scene.