title: Switching between scenes in Phaser3
body: <p>So I have two scenes in my <strong>Phaser3</strong> (version in <code>package.json</code> is <strong>3.21.0</strong>) 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.</p>
  
  <p><strong>Related code</strong></p>
  
  <p>The <code>app.ts</code> file looks like the following:</p>
  
  <pre><code>const config = {
      title: '&lt;game-name&gt;',
      width: 800,
      height: 600,
      parent: 'game',
      scene: [MenuScene, GameScene],
  };
  
  export class GameName extends Phaser.Game {
      constructor(config: any) {
          super(config);
      }
  }
  
  window.onload = () =&gt; new GameName(config);
  </code></pre>
  
  <p>The <code>MenuScene.ts</code> - removed the inapplicable part:</p>
  
  <pre><code>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', () =&gt; { this.scene.start('GameScene'); }
      }
  }
  </code></pre>
  
  <p>The <code>GameScene.ts</code> - also removed the unrelated code snippets:</p>
  
  <pre><code>class GameScene extends Phaser.Scene {
      constructor() { super({key: 'GameScene'}); }
  
      create = ():void =&gt; {
         console.log('create gamescreen');
         const esc = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ESC);
         esc.on('down', () =&gt; { this.scene.start('MenuScene'); }
      }
  }
  </code></pre>
  
  <p><strong>The issue and my question</strong></p>
  
  <p>So once I press <kbd>Enter</kbd> and <kbd>Esc</kbd> repetitively just to switch with the provided solution, it does not seems to be cleaning up the scenes in the background. On the <code>console</code> I see the following after switching few times (in the below example 6 times):
  <a href="https://i.stack.imgur.com/5cp3P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cp3P.png" alt="console-screenshot"></a></p>
  
  <p>I have already tried calling <code>this.scene.stop()</code> before <code>this.scene.start('&lt;scene-key&gt;')</code> but still the same issue. I was reading the <a href="https://stackoverflow.com/questions/53238869/phaser3-scenes-transitions">Phaser3 Scenes transitions</a> question already and it does not seem to answer my question. There has been told the <code>start()</code> should clean up or shut down the not used one.</p>
  
  <p>So how should I switch between scenes properly or cleaning up the currently not used scene?</p>
  
  <p>Thank you!</p>