☑ How to switch scenes using the new scripting system

Help & Support
1

Hello, I am new to Playcanvas.com. From what I can see, the language has been updated to a new API.

What I am looking to do is have someone create an example of switching from one scene to the next using the new
level API.

I do not want to load assets into the current Scene, I wish to destroy my current Scene and move to the next scene.

Old API example

pc.script.create('global', function (app) {
    // Creates a new Global instance
    var Global = function (entity) {
        this.entity = entity;
        this.currentLevel = 0;
        this.levels = [
            439389,
            439553,
            439572
        ];
    };

    Global.prototype = {
        // Called once after all resources are loaded and before the first update
        initialize: function () {
        },

        // Called every frame, dt is time in seconds since last update
        update: function (dt) {
            if (app.keyboard.wasPressed(pc.KEY_R)) {
                this.loadLevel(this.currentLevel);
            }
        },

        loadLevel: function(level) {
            app.root.destroy();
            app.loadSceneHierarchy(this.levels[level]+'.json', function(err, entity) {
                if (!err) {
                    entity.script.global.currentLevel = level;
                } else {
                    alert("Level not found. Please reload the page.");
                }
            });
        }, 

        nextLevel: function() {
            this.loadLevel((this.currentLevel + 1) % this.levels.length);
        }
    };

    return Global;
});

New API example should follow the given format-

var Global = pc.createScript('global');

// initialize code called once per entity
Global.prototype.initialize = function() {
    
};

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

// swap method called for script hot-reloading
// inherit your script state here
Global.prototype.swap = function(old) {
    
};

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/

Above is what you see when you now create .js files. Can we have an updated version of scene swapping based off the new API and using the new class format.

2

I’ve updated your attached script to use the new script format. Mostly it remains the same, but move code from the constructor into initialize and use this.app instead of app.

Also, I’ve changed it to store the current root of the scene. This is because app.root is the the same as the top entity of the scene. So when you destroy the old level you should use the root of the scene (which is actually a child of the app.root).

var Global = pc.createScript('global');

// Creates a new Global instance
Global.prototype.initialize = function () {
    // initialize current root to first scene loaded
    this.currentRoot = this.app.getChildren()[0];
    this.currentLevel = 0;
    this.levels = [
        439389,
        439553,
        439572
    ];
};

Global.prototype.update = function (dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_R)) {
        this.loadLevel(this.currentLevel);
    }
};

Global.prototype.loadLevel = function(level) {
    
    // destroy the current scene
    if (this.currentRoot) {
        this.currentRoot.destroy();
    }

    this.app.loadSceneHierarchy(this.levels[level]+'.json', function(err, entity) {
        if (!err) {
            entity.script.global.currentLevel = level; // store the current leve
            entity.script.global.currentRoot = entity; // store the root entity
        } else {
            alert("Level not found. Please reload the page.");
        }
    });
};

Global.prototype.nextLevel = function() {
    this.loadLevel((this.currentLevel + 1) % this.levels.length);
};
3

Thank you, now I have an example I can use to convert other examples from as well.