[tmlib.js]tmlib.jsだと簡単にポーズ画面を作れる

ポーズ画面ってなに

よくゲームにある、画面止めて休憩とかするためのやつです。

ソース

pushSceneとpopSceneを使うと、シーンの上に重ねて別のシーンを乗っけることができる。
そのとき、後ろにあるシーンの動きは止まるのでそれを利用する。

/*
 * MainScene
 */
tm.define("MainScene", {
    superClass: "tm.app.Scene",
    
    init: function () {
        var self = this;
        self.superInit();
        self.fromJSON({
            children: {
                label: {
                    type: "tm.display.Label",
                    init: ["仮ゲームシーン"],
                    x: SCREEN_CENTER_X,
                    y: 100,
                },
                objectGroup: {
                    type: "tm.display.CanvasElement",
                },
                pauseButton: {
                    type: "tm.ui.GlossyButton",
                    init: [150,50,"red","pause"],
                    x: SCREEN_CENTER_X,
                    y: SCREEN_HEIGHT-120,
                },
            },
        });

        // 動くテスト用オブジェクト
        [
            {x: 200, y: 200, color: "red"},
            {x: 400, y: 500, color: "green"},
        ].each(function (elm) {
            tm.display.RectangleShape(150,150,{fillStyle: elm.color})
                .setPosition(elm.x, elm.y)
                .addChildTo(self.objectGroup)
                .tweener.clear()
                    .setLoop(true)
                    .by({x:  100}, 400, "easeOutQuad")
                    .by({x: -100}, 400, "easeOutQuad");
        });

        // ボタン押下時の動作
        self.pauseButton.onpointingstart = function () {
            var scene = PauseScene();
            self.app.pushScene(scene);
        };
    },
});

/*
 * PauseScene
 */
 tm.define("PauseScene", {
     superClass:"tm.app.Scene",
 
     init: function(){
        var self = this;
        self.superInit();
        self.fromJSON({
            children: {
                filter: {
                    type: "tm.display.RectangleShape",
                    init: [
                        SCREEN_WIDTH,
                        SCREEN_HEIGHT,
                        {fillStyle: "rgba(0,0,0,0.7)"}
                    ],
                    originX: 0, originY: 0,
                },
                label: {
                    type: "tm.display.Label",
                    init: ["ポーズ中"],
                    x: SCREEN_CENTER_X,
                    y: 100,
                    fillStyle: "white",
                },
                closeButton: {
                    type: "tm.ui.GlossyButton",
                    init: [150,50,"green","pause"],
                    x: SCREEN_CENTER_X+150,
                    y: SCREEN_HEIGHT-120,
                },
            },
        });
        self.closeButton.onpointingstart = function () {
            self.app.popScene();
        };
     },
 });

サンプル

動くよ