Changing scenes crashes game

NOTE: I am not sure if this problem is local or not. please check on your machine if possible.
https://playcanvas.com/project/1027777/overview/idk-at-this-point

So, I have coded a main menu with a button that takes you to the main game. This is all working fine and well, and previous errors are no longer there. However, when the player dies, the scene is meant to switch. This happens, however the game crashes as soon as the next scene is loaded and makes it so i have to close not just the launched scene but also the code editor, the editor, and the project overview. Any idea why this is happening?

    // this code was taken from a different project and is the code that crashes the game
    //check if health is > 0, else send them to the main menu (add death ui later)
    if (this.health <= 0) {
        var oldHierarchy = this.app.root.findByName('Root');
      
        this.loadScene (this.sceneId, function () {
        // Once the new scene has been loaded, destroy the old one
              oldHierarchy.destroy();
    

    });
    }

    FirstPersonMovement.prototype.loadScene = function (id, callback) {
    // Get the path to the scene
    var url = id  + ".json";
    
    this.app.loadSceneSettings(id, function (err) {
    if (!err) {
      // success
       
    } else {
      // error
    }
    });   
        
    // Load the scenes entity hierarchy
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            callback(parent);
        } else {
            console.error (err);
        }   
    });
           
    };
    
// this is the script attatched to the button that starts the game (working fine)
var Startbutton = pc.createScript('startbutton');

Startbutton.attributes.add("sceneId", {type: "string", default: "0", title: "Scene ID to Load"});

// initialize code called once per entity
Startbutton.prototype.initialize = function() {
         // mouse events
this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mousedown', this.onPress, this);
this.entity.element.on('mouseup', this.onRelease, this);
this.entity.element.on('mouseleave', this.onLeave, this);
    
    // touch events
this.entity.element.on('touchstart', this.onPress, this);
this.entity.element.on('touchend', this.onRelease, this);
    
};

Startbutton.prototype.onPress = function (event) {
   var oldHierarchy = this.app.root.findByName ('Root');
//      this.loadScene (loadSceneSettings, function () {
//        // this.loadScene.loadSceneSettings(loadSceneSettings);
//          // Once the new scene has been loaded, destroy the old one
//          oldHierarchy.destroy ();

//      });
//     
//      var oldHierarchy = this.app.root.findByName ('Root');
 
        
        this.loadScene (this.sceneId, function () {
        // Once the new scene has been loaded, destroy the old one
      oldHierarchy.destroy ();       
    });
};

// update code called every frame
Startbutton.prototype.update = function(dt) {
    
};

Startbutton.prototype.loadScene = function (id, callback) {
    // Get the path to the scene
    var url = id  + ".json";
    
    // Load the scenes entity hierarchy
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            callback(parent);
        } else {
            console.error (err);
        }
    });
};

Hi @almish_subuk!

To change a scene, please use the method from your other topic.

Not sure why you create a new topic about this problem, but I think it’s related to events.

If you use an event, you have to make sure you clean up the event if you change the scene. Otherwise the system is still listening to the event, even if not everything for the event exist in the new scene, which result in an error.

I’m not exactly sure how to do this correctly, but based on an event in from you script it should be something like below.

// create event
app.mouse.on("mousedown", function () {
    app.mouse.enablePointerLock();
    this.shoot();
    console.log("initlal gjs0");
}, this);

// remove event
this.on('destroy', function() {
    app.mouse.off("mousedown", function () {
        app.mouse.enablePointerLock();
        this.shoot();
        console.log("initlal gjs0");
    }, this);
});

ok. Im going to try debugging. I am using the method i used in the other post, but that’s whats crashing my game.

You said you solved it with DM’s, that’s not really helpful for other users.

sorry. what would you like me to do? i can post the script that I used?

I’m not sure how you solved it if you still have a problem with changing the scene.

im sorry if i wasnt clear about what the problem is. thanks for being patient with me. the problem is that on the initial launch through the editor (launch the menu scene) everything works. however, when the player dies, i use the same method to switch scenes back to the main menu. this is where the issue is. The game seems to crash/freeze and I have to relaunch all my tabs.

here is the script for the main menu button:

var Startbutton = pc.createScript('startbutton');

Startbutton.attributes.add("sceneId", {type: "string", default: "0", title: "Scene ID to Load"});

// initialize code called once per entity
Startbutton.prototype.initialize = function() {
         // mouse events
this.entity.element.on('mouseenter', this.onEnter, this);
this.entity.element.on('mousedown', this.onPress, this);
this.entity.element.on('mouseup', this.onRelease, this);
this.entity.element.on('mouseleave', this.onLeave, this);
    
    // touch events
this.entity.element.on('touchstart', this.onPress, this);
this.entity.element.on('touchend', this.onRelease, this);
    
};

Startbutton.prototype.onPress = function (event) {
   var oldHierarchy = this.app.root.findByName ('Root');
//      this.loadScene (loadSceneSettings, function () {
//        // this.loadScene.loadSceneSettings(loadSceneSettings);
//          // Once the new scene has been loaded, destroy the old one
//          oldHierarchy.destroy ();

//      });
//     
//      var oldHierarchy = this.app.root.findByName ('Root');
 
        
        this.loadScene (this.sceneId, function () {
        // Once the new scene has been loaded, destroy the old one
      oldHierarchy.destroy ();       
    });
};

// update code called every frame
Startbutton.prototype.update = function(dt) {
    
};

Startbutton.prototype.loadScene = function (id, callback) {
    // Get the path to the scene
    var url = id  + ".json";
    
    // Load the scenes entity hierarchy
    this.app.loadSceneHierarchy(url, function (err, parent) {
        if (!err) {
            callback(parent);
        } else {
            console.error (err);
        }
    });
};

I do the same thing in my fps movement script, but it then crashes the game.

give me a few minutes, i hace somthing to do. I will reply right after that

The correct way to change a scene is the way you used in your other topic.

this.app.scenes.changeScene('First Person Movement');

If the project is crashing after changing the scene, there is another problem.

Maybe because one of your events?

im not sure what you mean by that.

What is that?

WAIT! something changed. I published a build and it is no longer crashing. However, one problem is that after the inital load of the build, dying and restarted gives an error that should have been fixed by the script that i was using. I am not sure why it only works the first time. any idea?

(ignore the warning)

Did you read my first reply of this topic?

yes, but im gonna be honest I have no idea what it means :man_shrugging:

is it something to do with the fact that the scene’s entity hierarchy was already destroyed?

No it’s because you create an event for the scene with a specific action. In the example above ‘shoot when the mouse button is pressed’. The system still tries to execute this action in the new scene that does not have the requirements to perform the action. This will give you an error. To prevent this, you must ensure that the event is removed when you change the scene.

ok. how can i do this? because i have it in my script so that the current scene’s hierarchy gets destroyed before it move to the next scene, but it only works the first time

I shared the code in my first reply here.

oh. im sorry. ill use what you have given me to try and debug this. i will update you on further development. Thanks again for being so patient with me

But don’t destroy the hierarchy manually, just use the changeScene method.