2

tmlibのシーン管理について質問します。

シーンの動的な遷移を今までは以下のような無理矢理な書き方をしていました。

// 別途HogeSceneなどを定義しておく
var sceneList = {
    "hoge": HogeScene,
    "piyo": PiyoScene,
    "fuga": FugaScene,
}

var sceneName = "hoge"
app.replaceScene(sceneList[sceneName]());

tm.app.Sceneに上記、もしくはそれに該当するような機能がないかと調べていたらtm.app.ManagerSceneなるものが出てきました。

名前からしてシーンを管理できる機能ではないかと思われますが、サンプルなどが出てこずイマイチ使い方や機能が分かりません。

ご存じの方がいましたらご教授ください。

1 件の回答 1

0

ManagerScene は, tmlib.js 0.4.0 から追加された機能で,
まさにシーンを管理するシーンクラスになります.

ManagerScene の初期化時に引数に
どういった流れでシーン遷移するのかを指定することができます.

引数で指定したシーンが ManagerScene の上に pushScene されていきます.

各シーンは popScene するだけで ManagerScene がそのイベントを
キャッチして次のシーンに遷移します.

簡単にではありますがサンプルを作ったのでコードを載せておきます.

runstant: http://goo.gl/g0ECrR

/*
 * # ManagerScene sample - tmlib.js
 */

var SCREEN_WIDTH    = 640;              // スクリーン幅
var SCREEN_HEIGHT   = 960;              // スクリーン高さ
var SCREEN_CENTER_X = SCREEN_WIDTH/2;   // スクリーン幅の半分
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;  // スクリーン高さの半分
var ASSETS = {
    "player": "http://jsrun.it/assets/s/A/3/j/sA3jL.png",
    "bg": "http://jsrun.it/assets/a/G/5/Y/aG5YD.png",
};


tm.define("TestScene", {
    superClass: "tm.app.Scene",

    init: function(param) {
        this.superInit();

        this.name = param.name;

        this.label = tm.display.Label("name: {name}".format(param))
            .setPosition(SCREEN_CENTER_X, SCREEN_CENTER_Y)
            .addChildTo(this);
    },

    onpointingstart: function() {
        this.app.popScene();
    },
});


tm.define("MainScene", {
    superClass: "tm.scene.ManagerScene",

    init: function() {
        this.superInit({
            scenes: [
                {
                    className: "tm.scene.TitleScene",
                    label: "title",
                },
                {
                    className: "TestScene",
                    arguments: {
                        name: "Game1",
                    },
                    label: "game1",
                },
                {
                    className: "TestScene",
                    arguments: {
                        name: "Game2",
                    },
                    label: "game2",
                },
                {
                    className: "tm.scene.ResultScene",
                    label: "result",
                    nextLabel: "title",
                },
            ],
        });
    },

    onfinish: function() {
        console.log("finish!");
    }
});



// main
tm.main(function() {
    // キャンバスアプリケーションを生成
    var app = tm.display.CanvasApp("#world");
    // リサイズ
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // ウィンドウにフィットさせる
    app.fitWindow();

    app.replaceScene(MainScene());

    // 実行
    app.run();
});
1
  • 1
    ありがとうございます。 tm.app.ManagerSceneのサンプル見れて大変助かりました!
    – Halt
    Commented 2014年12月19日 16:56

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。