【PlayCanvas】非同期(async/await)でシーン移動をする

2023年 現在ではシーンの移動方法に変更がありましたのでこちらのマニュアルを御覧ください

マニュアル

1.57.0 変更点（GitHub - プルリクエスト）

旧記事

---

PlayCanvasではloadSceneHierarchy関数で新しいシーンを読み込む事ができます。

またシーン移動についてはこちらのチュートリアルが存在しております。
https://developer.playcanvas.com/en/tutorials/changing-scenes/

PlayCanvasのプラグインとして定義して利用する

loadSceneHierarchyを利用するchangeSceneAsyncを定義
await changeSceneAsync(シーン名)の形で読み込みを行っていただくことで利用できます
pc以下に配置をして様々なスクリプトから呼び出す場合はプラグインのような形で追加する事もできます。

//load-scene-plugin.js
pc.extend(pc, function () {
    const loadSceneAsync = async (sceneName) => {
        const scene = pc.app.scenes.find(sceneName);
        return new Promise((resolve, reject) => {
            pc.app.scenes.loadSceneHierarchy(scene.url, (err, parent) => {
                if (!err) {
                    resolve(parent);
                } else {
                    reject();
                }
            });
        });
    };

    const changeSceneAsync = async (sceneName) => {
        pc.app.scene.root.destroy();
        const root = await loadSceneAsync(sceneName);
        pc.app.scene.root = root;
    };

    return {
        loadSceneAsync,
        changeSceneAsync
    };
}());

使い方（ボタンに設定）

pc.changeSceneAsync("シーン名")として利用できます。

// scene-change.js
class SceneChange extends pc.ScriptType {

    initialize() {
        this.entity.element.on(pc.EVENT_MOUSEDOWN, this.changeScene, this);
    }

    async changeScene() {
       await pc.changeSceneAsync("Scene2");
    }
};

pc.registerScript(SceneChange);