Changing Scene, not deleting old hierarchy

Hello! I’m very new to this, I started a month ago and I need help with a condition based changing from one scene to another (with a condition).

The problem is that when I switch to a new scene, the old elements (hierarchy) doesn’t get deleted even if I have the code for it. Basically what’s happening is that the all elements from the first level gets added to the second level.

My scene flow goes like this: Menu > Game level 1 > Congrats page > Game level 2 …

Here’s the code applied to the “Congrats page”

var ChangeSceneClick = pc.createScript('changeSceneClick');

ChangeSceneClick.attributes.add('sceneName', { type: "string", default: "", title: 'Scene name to load'} );

// initialize code called once per entity
ChangeSceneClick.prototype.initialize = function() {
  
    //change scene on button click
    this.app.root.findByName('startButton').element.on('click', function (event){
        this.loadScene(this.sceneName);
    }, this);
};

// update code called every frame
ChangeSceneClick.prototype.loadScene = function(sceneName)

  //get reference to the scene's root object
        {var oldHierarchy = this.app.root.findByName('Root');

    // get the path to the scene
        var scene = this.app.scenes.find(sceneName);

this.app.scenes.loadSceneHierarchy(scene.url, function (err, parent) {
    if (err) {
      console.error(err);} 
    else {  oldHierarchy.destroy(); }


});


    }

Then here’s the code applied “Game level 2” (applied to my character)

var CollectScriptFinal = pc.createScript('collectScriptFinal');

//var orb = 0

// initialize code called once per entity
CollectScriptFinal.prototype.initialize = function () {
    // define collision event handler
    this.entity.collision.on('collisionstart', this.onCollisionStart, this);
};

// update code called every frame
CollectScriptFinal.prototype.update = function (dt) {

};

CollectScriptFinal.prototype.onCollisionStart = function (result) {

    if (result.other.name == 'goodOrb');{
    this.entity.sound.play('goodPickup');
    //update orb count
    this.addOrb();
    result.other.destroy();

    if (orb == 5) {

var oldHierarchy = this.app.root.findByName('Root');

        var scene =this.app.scenes.find('sceneName');

        this.app.scenes.loadSceneHierarchy('congrats', function(err, parent){
        if(!err)
        {
            oldHierarchy.destroy();
        }
        else{
            console.error(err);
        }
    });
};
};
    };
CollectScriptFinal.prototype.addOrb = function(orb){

    //gets current text display ng text element 'orbNum' and change it to integer and +1

orb = parseInt(this.app.root.findByName('orbNum2').element.text)  + 1;
    //updates current text
    (this.app.root.findByName('orbNum2').element.text) = orb + "";
};

Thank you so much!

Hi @Ced_f and welcome!

There is a new method to change a scene. Can you please try this method? Basically all you need is the code below.

this.app.scenes.changeScene('Some Scene Name');

https://developer.playcanvas.com/en/user-manual/packs/loading-scenes/

1 Like

Some of the material you are using in your course is outdated. Would you be able to help me get in touch with your tutors? It would be great to help them with updates. Please DM me if you can :slight_smile:

1 Like

Hello, Albertos!

Thank you so much for the reply, for some reason, it didn’t work :frowning: … now when the character hits the ‘if’ (which is collide with 4 entities) condition, the game just stops and says “Error loading scripts. Open the browser console for details.”

Here’s my project link: PlayCanvas | HTML5 Game Engine

And here’s the code attached to my character, I replaced the change scene code with the one you sent.

var CollectScript = pc.createScript('collectScript');

// initialize code called once per entity
CollectScript.prototype.initialize = function () {
    // define collision event handler
    this.entity.collision.on('collisionstart', this.onCollisionStart, this);
};

// update code called every frame
CollectScript.prototype.update = function (dt) {

};

CollectScript.prototype.onCollisionStart = function (result) {

    if (result.other.name == 'goodOrb');{
    this.entity.sound.play('goodPickup');

    this.addOrb();
    result.other.destroy();}

    if (orb == 2);
this.app.scenes.changeScene('Game2');
        };

CollectScript.prototype.addOrb = function(orb){

orb = parseInt(this.app.root.findByName('orbNum').element.text)  + 1;
    this.app.root.findByName('orbNum').element.text = " " + orb;
};

@Ced_f Could you do a screen shot of the error? Do you actually have a level named lvl2Start? I don’t see this currently in your project.

Here’s the screenshot. I just changed ‘lvl2Start’ to ‘Game2’, it’s showing the same error:

@Ced_f I don’t know what browser you are using but if you go to the inspector console you may be able to see the root cause. Here is were the error is occurring.

GameBar1.attributes.add('orbTxt', {type: 'entity'});
GameBar1.attributes.add('levelTxt', {type: 'entity'});

var orb = 0;
// initialize code called once per entity
GameBar1.prototype.initialize = function() {

this.orbTxt.element.text = orb;


};

If you click on the link that is provided in the error it will take you to the part of the code that has an issue.

Click on the orange link. I think the entity orbTxt has not been loaded with the entity

1 Like