【PlayCanvas】シーン切り替え機能のテスト

2021年6月10日

PlayCanvasでシーンの切り替え方法について調べてみました。

参考にしたのはこちらのサンプルです。

https://developer.playcanvas.com/ja/tutorials/changing-scenes/

完成品

できあがったのがこちらです。

ボタンを押すとシーンが切り替わります。

SceneManager

今回は2つのシーン

Title
MainGame

を用意しています。

シーン切り替えの処理はほとんど同じ（切り替え先のシーンが違うだけ）なので、それぞれのシーン内に書くと冗長になってしまいます。

そこで、SceneManager.jsを作って、各シーンに置くようにしました。

スクリプトは以下のようにしています。

//======================================================
// シーンの切り替えを管理する
//   各シーンのRoot直下に置いてください
//======================================================
var SceneManager = pc.createScript('sceneManager');

//------------------------------------------------------
// 初期化
//------------------------------------------------------
SceneManager.prototype.initialize = function() {
};

//------------------------------------------------------
// シーンを切り替える
//------------------------------------------------------
SceneManager.prototype.change = function(sceneName) {
    // 新しいシーンはヒエラルキーに追加されるので、
    // 完全に切り替えたい場合は、現在のシーンのヒエラルキーを破棄する必要がある。
    // 現在のヒエラルキーを記憶しておく。
    var oldHierarchy = this.app.root.findByName ('Root');
    
    // シーンを読み込む
    var scene = this.app.scenes.find(sceneName);
    this.app.scenes.loadSceneHierarchy(scene.url, function(err, parent){
        if(!err){
            oldHierarchy.destroy();
        }else{
            
        }
    });
};

シーン切り替え処理

各シーンにあるボタンのスクリプトです。
（MainGame側もほぼ同じ内容）

var TitleButton = pc.createScript('titleButton');

//------------------------------------------------------
// 初期化
//------------------------------------------------------
TitleButton.prototype.initialize = function() {
    // ボタン押下時のイベントを登録
    if(this.app.touch){
        this.entity.element.on(pc.EVENT_TOUCHSTART, this.onButton, this);
    }else{
        this.entity.element.on("click", this.onButton, this);
    }  
};

//------------------------------------------------------
// ボタンが押された
//------------------------------------------------------
TitleButton.prototype.onButton = function(event) {
    // 二重にボタンが押されないように無効化する
    this.entity.enabled = false;
    
    var sceneManager = this.app.root.findByName("SceneManager");
    sceneManager.script.sceneManager.change("MainGame");
};