Main menu - Multiple scenes

Questions
1

Hello everyone,

I’m a graphic designer, I’m fairly new to babylon js and development, so sorry if it may sound like beginner’s questions.
I’m working on a game project and before I go any further, I need to be sure the basics are good.
I need a main menu to access the game. Is the best solution to create a scene for the menu and then a scene for the game? (Is it possible to load all the elements of the project at the same time with this solution?)

Here is what I tried with basic elements to configure the structure following this documentationhttps://doc.babylonjs.com/how_to/multi_scenes , but I missed something. I saw that there was a difference between doing it in a playground or in my own project, but I did not find any example for the second situation.

var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine




var createScene0 = function () {
    var scene0 = new BABYLON.Scene(engine);

    scene0.clearColor = new BABYLON.Color3(.1, .1, .15);
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene0);
    camera.attachControl(canvas, true);
    var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene0);
    var sphere0 = BABYLON.MeshBuilder.CreateSphere("sphere0", {
        segments: 3
    }, scene0);


    scene0.debugLayer.show({
        embedMode: true
    });

    return scene0;
}


var createScene1 = function () {
    var scene1 = new BABYLON.Scene(engine);

    scene1.clearColor = new BABYLON.Color3(.5, .6, .15);
    // Add a camera to the scene and attach it to the canvas
    var camera1 = new BABYLON.ArcRotateCamera("Camera1", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene1);
    camera1.attachControl(canvas, true);
    var cylinder = BABYLON.Mesh.CreateCylinder("cyl1", 2, 1, 1, 20, 4, scene1);
    return scene1;
}

//Any other code
var scene0 = createScene0();
var scene1 = createScene1();

var clicks = 0;
var showScene = 0;
var advancedTexture;


var createGUI = function (scene0, showScene) {
    switch (showScene) {
        case 0:
            advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene0);
            break
        case 1:
            advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene1);
            break
    }
    var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Scene " + ((clicks + 1) % 2));
    button.width = 0.2;
    button.height = "40px";
    button.color = "white";
    button.background = "green";
    button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP
    advancedTexture.addControl(button);


    button.onPointerUpObservable.add(function () {
        clicks++;
    });
}

engine.runRenderLoop(function () {
    if (showScene != (clicks % 2)) {
        showScene = clicks % 2;
        switch (showScene) {
            case 0:
                advancedTexture.dispose();
                createGUI(scene0, showScene);
                scene0.render();
                break
            case 1:
                advancedTexture.dispose();
                createGUI(scene1, showScene);
                scene1.render();
                break
        }
    }
});

Thanks a lot for your help !

2

Hi @Yoco,

Welcome to Babylon! It is definitely possible to create 2 different scenes. I think whether or not it would be the best solution depends on your assets/animations/resource costs.

Here is a quick playground showing you how to switch between scenes.

3

Hi @Yoco welcome from me

Code example near the start soon after this para

However there is a difference between writing multiple scenes within your own projects and trying them out in the playground

4

Hi,
Thank you a lot for your quick responses.

@belfortk , this playground helped me a lot.
I succed to create 2 scenes with one GUI each to switch scene here :

However there is a difference between writing multiple scenes within your own projects and trying them out in the playground

@JohnK I saw that but I still don’t understant why the code works in the playground and not in my own project even I remove the setTimeOut etc. It’s look like the problem comes from de runRenderLoop function, it doesn’t load the first scene by itself.