How to proceed to the next level by clicking a button?

Help & Support
, , ,
1

Hi! I am almost done with my game, but I don’t know how to proceed to the next level. I already create my second scene for the second level, but I’m not sure how the player can switch to that.

Basically, once the player is done collecting all the items on time, it will pop up a proceed to the next level icon but how do I create the button that the player can press to go there?

Same with if the player can’t collect the items on time, it should allow the player to restart the game by pressing the button.

I have all the icons for the buttons, but I can’t click on them to change scenes.

How do I do this?

I already have a changeScene script for my menu but not sure how to do it for my buttons. Sorry, I don’t know much about javascript.

2

We have a page on loading scenes here that also includes examples of loading scenes with buttons Loading Scenes | Learn PlayCanvas

3

Sorry, my code is a bit different from that one, I think.

I have a button to click to go to the next scene. Once I launch the game, every time I would click the button, it would say: Uncaught TypeError: Cannot read properties of null (reading ‘destroy’)

Here’s my code:

var Okbtn = pc.createScript('okbtn');

Okbtn.attributes.add('click', {type: 'asset', assetType: 'texture'});

// initialize code called once per entity

Okbtn.prototype.initialize = function() {

    this.app.root.findByName('okbtn').element.on('click', function (event){

        this.loadScene();

    }, this);

};

//update code called every frame

Okbtn.prototype.update = function(dt) {

};

Okbtn.prototype.onEnter = function (event){

    event.element.textureAsset = this.click;

};

// go to level 2

Okbtn.prototype.loadScene = function() {

    var OldHeirarchy = pc.app.root.findByName('LVL2');

        OldHeirarchy.destroy();

   

    this.app.loadSceneHeirarchy(1502552, function (err, parent){

    });

};
4

I recommend using the code that’s in the documentation as it covers a lot of what you are trying to do

Okbtn.prototype.loadScene = function() {

    var OldHeirarchy = pc.app.root.findByName('LVL2');

        OldHeirarchy.destroy();

   

    this.app.loadSceneHeirarchy(1502552, function (err, parent){

    });

};

The error is saying that OldHeirarchy is null and that would be because the entity LVL2 doesn’t exist in the scene hierarchy.

5

I changed it, it’s no longer showing null but it says this: Uncaught TypeError: this.app.loadSceneHeirarchy is not a function

Thanks btw!

6

That’s because the application object doesn’t have this function: Application | PlayCanvas API Reference

Please refer to the documentation page I linked before as it explains which functions to call and links to the API docs: Loading Scenes | Learn PlayCanvas