Change Scenes between menu with a file structure of scenes


I`m trying to make a game of cards, like a blackjack. But before the game, there is a menu, an start menu, with a logo and some buttons, to choose witch card game you want to play. After i click in the blackjack button, i should open the game in a different scene.

The point is, i`m trying to make a structure like this, i have te index.html, witch loads game.js, this game.js is the menu. When i click on blackjack, i would like the code to read blackjack.js, with a different scene.

What happens is that i`m unable to find any sample of this type os structure… all that i find is all scenes in the same file.

So, here is what is my file structure:

index.html - simple html loading a babylon file, index.js
index.js - HERE i would like to make primary scene to load the other scenes (game.js, blackjack.js, etc)
game.js - scene menu to choose a game - builded
blackjack.js - scene with the core game - not builded yet
card.js - class with suit and value - builded
deckofcards.js - class to build the deck and shuffle - builded

But happens that i didnt find any type of similar sample for this type os structure. Is there possible to build something like this in Babylon?

Thanks for the help.

Hey @Maya_Rahto, welcome to the Babylon family! So glad to have you here!

Check out these two docs. They’ll probably be a good resource as you explore this idea. In short, yes what you’re after is totally doable!

Hey @PirateJC, thanks for the answer.

Let me explain my doubt. with this sample here: i would like to have separated files for each scene.

Per example:

On file 1, i wish to have, scene 0, as the sample.
On file 2, scene 1.
And, on file 0, the controller menu, to switch between file 1 and 2…

the problem is that i`m very newbie and i dont know how to implement that. If there is any sample with that…

I saw that a scene starts with window.addEventListener(‘DOMContentLoaded’, () => {…

Then, could i only import the other files? And in other files start with this same line, window.addEventListener… i think it is not like this.

And i didnt find any sample of multiple files of scenes.

Thats the point, i`m looking for a sample of multiple files, each file has a unique scene… so i could build many scenes as levels and importing classes like, card, deck, and make the rules for them in a separeted scene.

Does happens that u could help me with that?

I believe I understand what you’re trying to do, and while I haven’t done it myself, it seems like you’re not the only person to embark down this path. Here’s another thread on the subject that might be worth reading through as you experiment.

Thanks…but i`m newbie, didnt undertand to much without codes.

but i have solved in a crappy way… in the menu, there are buttons, then i use windows.location, to open the game in a new babylon app.

I have also encountered the same problem, which has bothered me for a long time. May I ask how you solved it, or do you have an example? Could you help me?

Hi and welcome to the community.
I believe the doc and the PG example above is still a good base for the part of how you can render or dispose a scene.

The part that is missing here (I believe) is how you load these scenes from an external script.
Sadly, I used this only for loading things like materials, objects or animation into a single scene.
I am not so much of a complex architecture builder.

I also don’t have time right now to create a PG (sry) but basically the idea is to create just an empty container for scene(x) and load the scene on demand, probably relying on an init function (and then remove it when switching scene or eventually keep it as long as there is enough resources to make the switch more seamless).

So, in essence you would have each scene as a single script (eventually have each scene loading other scripts or sharing them for things like objects, materials or animations) and load this scene script on GUI call.
You will next use the renderLoop to render scene(x) as in the PG above.

Does anyone of you Guys ( @sebavan @PolygonalSun @webgrid have a simple base of this, not too much relying on webpacks or external js solutions for file structuring)? If so, I believe it would be nice to add this simple example to the doc and PG examples (or is there already?)


What you describes require some time and planning (at least for me) to create as a PG as it requires external assets.

What I’ve done is reuse the scene by clearing it, and loading a new set of assets or reinitialize existing ones. This way I don’t have to reload materials, animations, and textures etc.

Hopefully one day, I find some time to write a dev blog about this for others to look at.


I know, that’s why I was asking if by any chance someone would already have this base.
Thanks for taking the time to reply and have a great day :smiley: