How to switch between scenes with a button

[Troskhy]

Hi all, i’m new to playcanvas and i’m lovin it so far!
I’m not very used to JavaScript and i cannot achieve what i want…just a simple button that allows me to change from X scenes between them… i mean, i have a button in a scene…when it’s clicked i can go to another scene, and in that scene i have another button that can take me to another scene…and so on… is that possible? I’ve been looking for info, but i haven’t seen anything similar…

Thanks in advanced,
Troskhy

[Albertos]

Hi @Troskhy and welcome! If I understand you correctly, I think the post of @eproasim can be really useful.

[SOLVED] How to change scenes using interface buttons

Hi @Ian_Curtis, The way I set this up is by having a scene manager that transports itself between scenes. To ensure that it only gets loaded once, I made an initialization scene that loads the first scene of my choosing and then uses app events fired by the buttons to change scenes from there. Check out : https://playcanvas.com/project/756176/overview/scene-manager To see it at work.

[Troskhy]

Hi @Albertos, thanks for the welcoming and the suggestion to the post of @Ian_Curtis… it’s been really helpful!! The only thing i noticed is that when i change the scene, the illumination of the new scene change from what is supossed to be, don’t know why…

[eproasim]

Hi @Troskhy,

Could you post the scene to show us what the lighting issue is?

[DevilZ]

Hi @Troskhy, this might be because the lighting from your old scene is getting carried over to the new one when you press the button. Try explicitly turning the light(s) off on the button press, like so -

this.app.root.findByName("light name as a string").enabled = false;

Ensure to do this before calling the scene change function.

[Troskhy]

Good morning all! Sure…Here’s a couple of screenshots:
Here’s the scene as it should be

And here after the change scene

[Troskhy]

Hi @DevilZ!! Just seen your reply!.. i’m gonna give it a try and let you know!
Thanks for the tip!

[Troskhy]

@DevilZ

this.app.root.findByName("light name as a string").enabled = false;

mmmm… not sure if i’m placing the snippet in the right place… here’s the code i’m using

var SceneManager = pc.createScript('sceneManager');

SceneManager.attributes.add('startScene', {
    type: 'string',
    title: 'Start Scene',
    description: 'The name of the first scene to load'
});
//Assumes the Scene name containing the Scene Manager is 'Init'
SceneManager.prototype.currentScene = 'Init';
//Declaring the Previous scene as empty from the start. Updated to 'Previous' on loading of this.startScene
SceneManager.prototype.previousScene = "";

// initialize code called once per entity
SceneManager.prototype.initialize = function() {
    
    var app = this.app;
    
    this.manager = this.entity;
    //Grab the Scene Manager and load the this.startScene
    this.initStart(this.manager);
    //Firing the 'changeScene' event with the name of the scene as an argument will trigger a scene change
    app.on('changeScene', this.changeScene, this);
    
};

SceneManager.prototype.changeScene = function(targetscene) {
    
    var oldHierarchy = this.app.root.findByName('Root');
    
    if(targetscene === 'Previous') {

        if(this.previousScene === 'Init') {
            console.error('Unable to load Previous Scene - Previous Scene is initialization. Refresh and try visiting some other scenes first');
        }
        
        else {
            oldHierarchy.removeChild(this.manager);
            this.app.root.findByName("Light").enabled = false;
            this.loadStart(this.previousScene.name, function(newHierarchy) {

                newHierarchy.addChild(this.manager);

                oldHierarchy.destroy();
            }.bind(this));
        }
    }

    
    else {

        oldHierarchy.removeChild(this.manager);

        this.loadStart(targetscene, function(newHierarchy) {
            
            newHierarchy.addChild(this.manager);

            oldHierarchy.destroy();
        }.bind(this)); 
    }

};

SceneManager.prototype.initStart = function(manager) {
    
    var oldHierarchy = this.app.root.findByName('Root');
    
    oldHierarchy.removeChild(manager);
    
    this.loadStart(this.startScene, function(newHierarchy) {
        newHierarchy.addChild(this.manager);
        
        oldHierarchy.destroy();
          
    }.bind(this));
    
};

SceneManager.prototype.loadStart = function(name, callback) {
       
    var sceneRegObj = this.app.scenes.find(name);
    
    
    //load the scenes entity hierarchy
    this.app.scenes.loadSceneHierarchy(sceneRegObj.url, function(err, parent){
        if(!err){
            this.previousScene = this.currentScene;
            this.currentScene = sceneRegObj;
            callback(parent);
        } else {
            console.error (err);
        }
    }.bind(this));
};

Can someone point me out?
Thank you!!!

[DevilZ]

So it actually looks like you wanted more light in the next scene, rather than less. If that is the case, can you please share a public project link as well as a screenshot of your hierarchy in the two scenes?

[Troskhy]

Sure, here it is:

https://playcanvas.com/project/789069/overview/rdit_v0

There are 5 scenes in the project, but only 4 working… Init which calls Start, then Set_Central, which has a central totem and the button in it calls to vid_redit

I’m just testing things to see if i can achieve the things i need without overcomplicating things, as i’m not to used to JS

[eproasim]

Hi @Troskhy,

I took a look at the project, and I think it’s related to your Skybox as it contributes to the total lighting of the scene. As the Skybox is set at the app level instead of the scene level, you will want to set your skybox using this.app.scene.setSkybox() and your cubemap asset.