How to change scene ? As in Level 1 finish and then level 2?

Questions
1

Any example how to change scene like from level 1 and level 2 ?

2

Here is a little playground I found in the documentation:
https://www.babylonjs-playground.com/#MXCRPS#1

Full documentation here:
https://doc.babylonjs.com/how_to/multi_scenes

Full code:

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


var createGUI = function(scene, 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++;                   
    });
}  

createGUI(scene, showScene);

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
        }
    }
});

Explanation:
clicks and showscene are what define what scene to show. the first part of the creatGUI function deal with the button. showscene starts as 0, so it is case 0, so it creates the button on scene 0.

the button has some more code. "Scene " + ((clicks + 1) % 2) this part of the code creates the button on the correct scene. The advanced texture is what the button is made on. ((clicks + 1) % 2) returns 0 or 1. when clicks = 0, it returns 1. if clicks = 1, it returns 0. Thus making a button the right scene. The rest of the code after the main button variable jazzes up the button to make it look nice. The button.onPointerUpObservable function detects when you click the button. when you click it, clicks increments.

The following line creates the gui.

The engine.runRenderLoop function is what actually changes the scene. The first if statment checks to see if showscene is equal to clicks % 2 (0 or 1). if it isn’t it makes showscene equal to clicks % 2. then it switches the scene with the switch function. If showscene is 0, it disposes the advanced texture, makes a new GUI on scene 0, the renders scene 0. The advanced texture can only appear on one scene at a time. If showscene is 1, it does the same thing but renders and makes a GUI on scene 1 instead.

Hope this explanation helps!

1 Like