Switching between scenes in Phaser3

Question

So I have two scenes in my Phaser3 (version in package.json is 3.21.0) app and I would like to switch between those without having any side-effect. The first scene is for handling the menu with high score and the second is the game itself.

Related code

The app.ts file looks like the following:

const config = {
    title: '<game-name>',
    width: 800,
    height: 600,
    parent: 'game',
    scene: [MenuScene, GameScene],
};

export class GameName extends Phaser.Game {
    constructor(config: any) {
        super(config);
    }
}

window.onload = () => new GameName(config);

The MenuScene.ts - removed the inapplicable part:

class MenuScene extends Phaser.Scene {
    constructor() { super({key: 'MenuScene'}); }

    create():void {
       console.log('create menuscreen');
       const enter = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER);
       enter.on('down', () => { this.scene.start('GameScene'); }
    }
}

The GameScene.ts - also removed the unrelated code snippets:

class GameScene extends Phaser.Scene {
    constructor() { super({key: 'GameScene'}); }

    create = ():void => {
       console.log('create gamescreen');
       const esc = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ESC);
       esc.on('down', () => { this.scene.start('MenuScene'); }
    }
}

The issue and my question

So once I press Enter and Esc repetitively just to switch with the provided solution, it does not seems to be cleaning up the scenes in the background. On the console I see the following after switching few times (in the below example 6 times):

I have already tried calling this.scene.stop() before this.scene.start('<scene-key>') but still the same issue. I was reading the Phaser3 Scenes transitions question already and it does not seem to answer my question. There has been told the start() should clean up or shut down the not used one.

So how should I switch between scenes properly or cleaning up the currently not used scene?

Thank you!

Answer 1

This is how i am doing it

1.- Scene over game for pause

The scene scene_pause will be over the game_scene because the last scene will be the top scene

isPaused = this.scene.isPaused('scene_game');
if (false === isPaused) {
    this.scene.pause('scene_game');
}
const isNull = this.scene.get('scene_pause');
if (null === isNull) {
    this.scene.add('pause_scene', PauseScene, true);
}

And then when y resume the game

isActive = this.scene.isActive('scene_pause');
if (true === isActive) {
    this.scene.remove('scene_pause');
}
isPaused = this.scene.isPaused('scene_game');
if (true === isPaused) {
    this.scene.resume('scene_game');
}

---

2.- Switch scene for game over

this.scene.stop('scene_game'); // stop executing the Update 1rst
... // save the state and score
this.scene.remove('scene_game'); // I remove the scene, because I will add again when start the game
this.scene.stop('scene_ui');
this.scene.switch('scene_game_over');