Phaser3 Scenes transitions











up vote
0
down vote

favorite












i'm new to phaser3 and before starting a crazy project, i want to know how i should start, switch between scenes. I saw that there are several functions, start, launch, switch, run, resume, pause, etc...



Example, lets say i want to have 2 scenes, a Menu and a Game. i boot on the Menu and i want to go to the Game scene and if i click on a button then come back to the Menu scene. I've attchived this by calling the start function, but i noticed that the all, init, preload and create functions are called everytime and therefore i'm loading all the images, setting all the listener over and over again.



This seems wrong, should i be using the launch or switch functions and pausing and resuming? But how do i hide the previous scene?



Thanks in advance.










share|improve this question


























    up vote
    0
    down vote

    favorite












    i'm new to phaser3 and before starting a crazy project, i want to know how i should start, switch between scenes. I saw that there are several functions, start, launch, switch, run, resume, pause, etc...



    Example, lets say i want to have 2 scenes, a Menu and a Game. i boot on the Menu and i want to go to the Game scene and if i click on a button then come back to the Menu scene. I've attchived this by calling the start function, but i noticed that the all, init, preload and create functions are called everytime and therefore i'm loading all the images, setting all the listener over and over again.



    This seems wrong, should i be using the launch or switch functions and pausing and resuming? But how do i hide the previous scene?



    Thanks in advance.










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      i'm new to phaser3 and before starting a crazy project, i want to know how i should start, switch between scenes. I saw that there are several functions, start, launch, switch, run, resume, pause, etc...



      Example, lets say i want to have 2 scenes, a Menu and a Game. i boot on the Menu and i want to go to the Game scene and if i click on a button then come back to the Menu scene. I've attchived this by calling the start function, but i noticed that the all, init, preload and create functions are called everytime and therefore i'm loading all the images, setting all the listener over and over again.



      This seems wrong, should i be using the launch or switch functions and pausing and resuming? But how do i hide the previous scene?



      Thanks in advance.










      share|improve this question













      i'm new to phaser3 and before starting a crazy project, i want to know how i should start, switch between scenes. I saw that there are several functions, start, launch, switch, run, resume, pause, etc...



      Example, lets say i want to have 2 scenes, a Menu and a Game. i boot on the Menu and i want to go to the Game scene and if i click on a button then come back to the Menu scene. I've attchived this by calling the start function, but i noticed that the all, init, preload and create functions are called everytime and therefore i'm loading all the images, setting all the listener over and over again.



      This seems wrong, should i be using the launch or switch functions and pausing and resuming? But how do i hide the previous scene?



      Thanks in advance.







      phaser-framework game-development






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 12:17









      franmcod

      497




      497
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.



          I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.



          If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.



          With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.



          However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.



          If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.



          I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.



          Scene Transitions



          How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.



          this.scene.add(Boot.Name, Boot);
          this.scene.add(Preloader.Name, Preloader);
          this.scene.add(SplashScreen.Name, SplashScreen);
          this.scene.add(MainMenu.Name, MainMenu);
          this.scene.start(Boot.Name);


          Then I simply keep starting the next scenes as needed.



          this.scene.start(Preloader.Name);


          For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:



          private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
          if (this.uiSceneRunning !== sceneToStart) {
          // Make sure that we properly handle the initial state, when no scene is set as running yet.
          if (this.uiSceneRunning !== "") {
          this.scene.get(this.uiSceneRunning).scene.sleep();
          }
          const newScene = this.scene.get(sceneToStart);
          newScene.scene.start();
          this.scene.bringToTop(sceneToStart);
          this.uiSceneRunning = sceneToStart;

          return newScene;
          } else {
          return this.scene.get(this.uiSceneRunning);
          }
          }


          In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).






          share|improve this answer























          • and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
            – franmcod
            2 days ago






          • 1




            I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
            – James Skemp
            2 days ago










          • thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
            – franmcod
            2 days ago






          • 1




            I'm looking into your other question right now, actually. :)
            – James Skemp
            2 days ago











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238869%2fphaser3-scenes-transitions%23new-answer', 'question_page');
          }
          );

          Post as a guest
































          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          1
          down vote



          accepted










          This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.



          I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.



          If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.



          With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.



          However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.



          If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.



          I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.



          Scene Transitions



          How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.



          this.scene.add(Boot.Name, Boot);
          this.scene.add(Preloader.Name, Preloader);
          this.scene.add(SplashScreen.Name, SplashScreen);
          this.scene.add(MainMenu.Name, MainMenu);
          this.scene.start(Boot.Name);


          Then I simply keep starting the next scenes as needed.



          this.scene.start(Preloader.Name);


          For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:



          private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
          if (this.uiSceneRunning !== sceneToStart) {
          // Make sure that we properly handle the initial state, when no scene is set as running yet.
          if (this.uiSceneRunning !== "") {
          this.scene.get(this.uiSceneRunning).scene.sleep();
          }
          const newScene = this.scene.get(sceneToStart);
          newScene.scene.start();
          this.scene.bringToTop(sceneToStart);
          this.uiSceneRunning = sceneToStart;

          return newScene;
          } else {
          return this.scene.get(this.uiSceneRunning);
          }
          }


          In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).






          share|improve this answer























          • and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
            – franmcod
            2 days ago






          • 1




            I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
            – James Skemp
            2 days ago










          • thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
            – franmcod
            2 days ago






          • 1




            I'm looking into your other question right now, actually. :)
            – James Skemp
            2 days ago















          up vote
          1
          down vote



          accepted










          This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.



          I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.



          If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.



          With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.



          However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.



          If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.



          I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.



          Scene Transitions



          How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.



          this.scene.add(Boot.Name, Boot);
          this.scene.add(Preloader.Name, Preloader);
          this.scene.add(SplashScreen.Name, SplashScreen);
          this.scene.add(MainMenu.Name, MainMenu);
          this.scene.start(Boot.Name);


          Then I simply keep starting the next scenes as needed.



          this.scene.start(Preloader.Name);


          For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:



          private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
          if (this.uiSceneRunning !== sceneToStart) {
          // Make sure that we properly handle the initial state, when no scene is set as running yet.
          if (this.uiSceneRunning !== "") {
          this.scene.get(this.uiSceneRunning).scene.sleep();
          }
          const newScene = this.scene.get(sceneToStart);
          newScene.scene.start();
          this.scene.bringToTop(sceneToStart);
          this.uiSceneRunning = sceneToStart;

          return newScene;
          } else {
          return this.scene.get(this.uiSceneRunning);
          }
          }


          In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).






          share|improve this answer























          • and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
            – franmcod
            2 days ago






          • 1




            I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
            – James Skemp
            2 days ago










          • thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
            – franmcod
            2 days ago






          • 1




            I'm looking into your other question right now, actually. :)
            – James Skemp
            2 days ago













          up vote
          1
          down vote



          accepted







          up vote
          1
          down vote



          accepted






          This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.



          I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.



          If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.



          With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.



          However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.



          If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.



          I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.



          Scene Transitions



          How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.



          this.scene.add(Boot.Name, Boot);
          this.scene.add(Preloader.Name, Preloader);
          this.scene.add(SplashScreen.Name, SplashScreen);
          this.scene.add(MainMenu.Name, MainMenu);
          this.scene.start(Boot.Name);


          Then I simply keep starting the next scenes as needed.



          this.scene.start(Preloader.Name);


          For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:



          private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
          if (this.uiSceneRunning !== sceneToStart) {
          // Make sure that we properly handle the initial state, when no scene is set as running yet.
          if (this.uiSceneRunning !== "") {
          this.scene.get(this.uiSceneRunning).scene.sleep();
          }
          const newScene = this.scene.get(sceneToStart);
          newScene.scene.start();
          this.scene.bringToTop(sceneToStart);
          this.uiSceneRunning = sceneToStart;

          return newScene;
          } else {
          return this.scene.get(this.uiSceneRunning);
          }
          }


          In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).






          share|improve this answer














          This question might be a little too broad, but with Phaser 3 in mind, it still depends upon what purpose your menu serves.



          I think most games have a main menu that will generally be called when the game first starts, and then won't be called again.



          If this is an in-game menu, where settings can be changed or part of the game can be reset/restarted, then it might not make sense to redirect to a completely different scene.



          With Phaser 3's support of multiple scenes - with Dev Log #119 and Dev Log #121 probably being the best current sources of information - another option would be to start a new scene within the current scene to handle this.



          However, if this is really just UI, there's nothing to stop you from creating an overlay, instead of spawning an entire scene.



          If you're concerned about performance I might think about whether the entire menu needs to be called, or if a simplified menu would work. Also, make sure that you're preloading assets before you're in the menu and main game.



          I personally use Boot > Preloader > Splash Screen > Main Menu > Main Game scenes, where the Preloader loads the majority of the assets I'll need. This has the downside of a longer initial load, but the upside of minimal loading after this point.



          Scene Transitions



          How I handle these in my starter templates is to add the scenes to the Scene Manager when creating the scene. Then I transition by start to the first scene.



          this.scene.add(Boot.Name, Boot);
          this.scene.add(Preloader.Name, Preloader);
          this.scene.add(SplashScreen.Name, SplashScreen);
          this.scene.add(MainMenu.Name, MainMenu);
          this.scene.start(Boot.Name);


          Then I simply keep starting the next scenes as needed.



          this.scene.start(Preloader.Name);


          For another game that uses multiple scenes I ended up creating the following function (TypeScript) to handle this:



          private sleepPreviousParallelScene(sceneToStart: string): Phaser.Scene {
          if (this.uiSceneRunning !== sceneToStart) {
          // Make sure that we properly handle the initial state, when no scene is set as running yet.
          if (this.uiSceneRunning !== "") {
          this.scene.get(this.uiSceneRunning).scene.sleep();
          }
          const newScene = this.scene.get(sceneToStart);
          newScene.scene.start();
          this.scene.bringToTop(sceneToStart);
          this.uiSceneRunning = sceneToStart;

          return newScene;
          } else {
          return this.scene.get(this.uiSceneRunning);
          }
          }


          In the game I was using this for, I was trying to replicate a standard tab interface (like what's see in the Dev Logs above with the file folder-like interface).







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 2 days ago

























          answered Nov 10 at 20:23









          James Skemp

          4,78774775




          4,78774775












          • and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
            – franmcod
            2 days ago






          • 1




            I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
            – James Skemp
            2 days ago










          • thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
            – franmcod
            2 days ago






          • 1




            I'm looking into your other question right now, actually. :)
            – James Skemp
            2 days ago


















          • and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
            – franmcod
            2 days ago






          • 1




            I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
            – James Skemp
            2 days ago










          • thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
            – franmcod
            2 days ago






          • 1




            I'm looking into your other question right now, actually. :)
            – James Skemp
            2 days ago
















          and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
          – franmcod
          2 days ago




          and how do you handle the main game scenes? do you pause and launch or start then all? [i wasn't explicit in my question, i gave the example of the menu, but also wanted to know the other game scenes transitions]
          – franmcod
          2 days ago




          1




          1




          I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
          – James Skemp
          2 days ago




          I've added more information on transitions to my answer. Essentially I just start them as needed; Phaser takes care of cleaning up after you exit the scene.
          – James Skemp
          2 days ago












          thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
          – franmcod
          2 days ago




          thankyou for your answer! [on a side note, would you happen to know how to set a callback for when a scene loses focus or gets destroyed ?]
          – franmcod
          2 days ago




          1




          1




          I'm looking into your other question right now, actually. :)
          – James Skemp
          2 days ago




          I'm looking into your other question right now, actually. :)
          – James Skemp
          2 days ago


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238869%2fphaser3-scenes-transitions%23new-answer', 'question_page');
          }
          );

          Post as a guest




















































































          Popular posts from this blog

          Full-time equivalent

          さくらももこ

          13 indicted, 8 arrested in Calif. drug cartel investigation