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

ゲーム

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

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

Oh No! | Learn PlayCanvas




完成品

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

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

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");
};
  1. this.app.root.findByName(“SceneManager”)
    でシーン内にあるエンティティを取得
  2. スクリプトコンポーネントを取得
  3. スクリプト本体(createScriptで指定した名前)を取得
  4. change関数を呼ぶ

という流れになっています。

本来はコンポーネントの取得ができたかのチェックなどが必要になりますが、ここでは省いています。

あと、地味にハマった点。

サンプルではボタンではなく更新処理から直接シーンを切り替えていますが、今回はボタン押下イベント(onButton)内で切り替えています。

この時、ボタンイベントの登録(element.on)の第三引数(スコープ)に this を指定しないと、onButton内でのthisの実体がScript→Elementに変わってしまい、「appがみつからないよ」というエラーが出てしまいます。

イベント登録時は基本的にthisを渡すようにしておいたほうが、間違いが少なくて済みそうです。

まとめ

シーン切り替えができるようになったので、これでタイトル→ゲーム画面→リザルト画面などのシーケンスを作ることができます。

次回は2Dスプライトについて調べようと思います。

コメント

タイトルとURLをコピーしました