Multiple Scenes

[pedromdev]

Hi!

Thank you so much for developing this package. I need to declare multiple scenes in my game. I have a MainMenuScene and MyFirstScene components rendered at the same time on my app. Both components render the Scene component.

<Game ...>
  <MainMenuScene/>
  <MyFirstScene/>
</Game>

Expected behavior:

• MainMenuScene is displayed first
• Click on Play button to start MyFirstScene
• MyFirstScene is now displayed

Actual behavior:

• MyFirstScene is displayed over MainMenuScene

Is there something that manage this behavior?

[mattjennings]

A Scene starts when it is mounted, so you could mount/unmount based on state:

<Game ...>
  {state === 'main-menu' && <MainMenuScene/>}
  {state === 'playing' && <MyFirstScene/>}
</Game>

I haven't thought of a reason why you wouldn't want it to start right away while mounted, but I'm all ears if you have one.

[pedromdev]

When I was searching how to create a main menu I found a tutorial that creates as scene. I think that main menu and game stages act like scenes. I have short time at game development but reading Phaser documentation and getting some tutorials I understood that games has multiple scenes.

[mattjennings]

Yes, using multiple scenes is a common practice. If you want to only run one Scene at a time then my above suggestion will work for you.

[pedromdev]

I wrote a little "router" based on your comment,

<SceneRouter initialScene="main-menu">
  <SceneRoute name="room-rush" component={RoomRushScene}/>
  <SceneRoute name="main-menu" component={MainMenu}/>
</SceneRouter>

but when I click on Start button the loading screen is displayed, the progress never change and no error is shown. I put console.log(progress) in renderLoading function and console shows only one output 0. I wrote your code and I had same behavior.

I tried to remove onPreload from MyFirstScene and nothing change. I can't understand why this happens.

[mattjennings]

Could you create an example of the issue either as a repository or on https://codesandbox.io? I'll take a look at it.

[mattjennings]

@pedromdev I think I was able to find the problem you ran into and it should be fixed in v0.2.4. Please give that a try and let me know if that works.

[pedromdev]

@pedromdev I think I was able to find the problem you ran into and it should be fixed in v0.2.4. Please give that a try and let me know if that works.

I tried to reproduce on codesandbox, but it works pretty well. However, I noticed in my project that the amount of assets freeze this loading screen.

I have a configuration file that I put all my assets there and this file is used in both scenes. I tried to duplicate the configuration file, remove some duplicates and add exists checks to avoid assets reloads. If both configuration files are identical the MyFirstScene is not started, but if I remove a duplicate asset (an image, audio or sprite sheet) it is started. This behavior I was able to simulate on codesandbox. It seems a Phaser bug.

[mattjennings]

I'll close this issue now as upgrading the package to 0.2.4 fixes the stuck loading screen in your example.

I have not run into problems when loading the same asset twice (though I did just test it on 0.2.4, and perhaps it is also fixed there now). If you're able to reproduce that, feel free to open another issue with a reproduction.

[pedromdev]

Thank you so much @mattjennings !

What you think about add a "router" in this package to do this easier? I can open a PR to add it.

[mattjennings]

It is a good idea but I don’t think it is within the scope of this package.

[mattjennings]

I have added an example that uses react-router:

https://codesandbox.io/s/github/mattjennings/react-phaser-fiber/tree/master/examples/with-react-router