9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

tmlib.jsAdvent Calendar 2014

Day 23

[tmlib.js] ManagerSceneでのシーン管理

Last updated at Posted at 2014-12-23

tmlibのシーン管理についてちょうど数日前に良い方法を知れたので共有しておこうと思います。

今までのシーン移動

ほんとはもっとスマートな方法もあるんでしょうが自分はだいたい以下の2パターンくらいでした。

// 直接シーンを指定する。基本はコレ
app.replaceScene(HogeScene());
// ちょっと動的にやってみる
var sceneList = {
    "hoge": HogeScene,
    "piyo": PiyoScene,
    "fuga": FugaScene,
}

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

なんかイケてない…。

tm.scene.ManagerScene!?

なんかDocsに謎の存在が!
[tm.scene.ManagerScene - tmlib.js docs]
(http://phi-jp.github.io/tmlib.js/docs/index.html#!/api/tm.scene.ManagerScene)

イマイチ使い方わからないのでちょうど日本語版が出たスタック・オーバーフローで質問してみたらphiさんから直接返答もらえました。
javascript - tmlibのScene管理について - スタック・オーバーフロー

ManagerSceneは名前の通りシーンを管理するもので、どうやらver0.4.0から追加された機能のようです。

基本的な使い方

初期化時にscenesにどう遷移させるか指定し、各シーンでpopScene()すれば自動でシーン切り替えができるようです。
この時argumentsに値を指定してあげることで特定のパラメータを各シーンに渡すことができます。
runstant: ManagerSceneのサンプル

簡易版サンプルコード
tm.define("MainScene", {
    superClass: "tm.scene.ManagerScene",
 
    init: function() {
        // scenesにどう遷移するか指定してあげる
        this.superInit({
            scenes: [
                {
                    className: "tm.scene.TitleScene",
                    label: "title",
                },
                {
                    className: "HogeScene",
                    arguments: {
                        name: "Game1",
                    },
                    label: "scene1",
                },
                // 更にどんどん追加していける
            ],
        });
    },
});

遷移先のシーン操作とパラメータの受け渡し

特定のパラメータに値を設定することで好きなシーンへ遷移し、パラメータも渡すことができます。
こちらもスタック・オーバーフローで質問して教えてもらいました。
他人の褌で記事を書くって素敵ですね。

[javascript - tmlib.jsのManagerSceneによるシーンの遷移先の指定とパラメータの受け渡しについて - スタック・オーバーフロー]
(http://ja.stackoverflow.com/questions/2230/tmlib-js%e3%81%aemanagerscene%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b7%e3%83%bc%e3%83%b3%e3%81%ae%e9%81%b7%e7%a7%bb%e5%85%88%e3%81%ae%e6%8c%87%e5%ae%9a%e3%81%a8%e3%83%91%e3%83%a9%e3%83%a1%e3%83%bc%e3%82%bf%e3%81%ae%e5%8f%97%e3%81%91%e6%b8%a1%e3%81%97%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6)

そのまま使うと初期化時に追加した順でしかシーン遷移しませんがpopScene()時にパラメータを設定すれば次に遷移するシーンを操作することができます。

onpointingstart: function() {
    // nextLabelに値を入れてあげると次はscene2へ遷移する
    this.nextLabel = "scene2";
    this.app.popScene();
},

また遷移時に好きなパラメータも渡すことができます。
この時、初期化時に指定したargumentsと同じパラメータを渡すと上書きで渡してしまうので注意です。

onpointingstart: function() {
    // nextArgumentsに値を入れてあげるとパラメータも渡せる
    this.nextArguments = {
        name: "scene!!!",
        fontSize: 32,
    };
    this.app.popScene();
},

スタックオーバーフローで回答時にこれ以上ない!ってくらいのサンプルを作ってもらえていたのでパク…そのまま紹介しておきます。
runstant: http://goo.gl/H7TcpW

さいごに

ぶっちゃけシーン管理は始めの直接シーンを指定する方法でも全然問題無いと思います。
ただ各シーンの依存関係を減らし、一括で管理できるManagerSceneを使うといつか幸せになれることがある、かもしれませんね。

ついでに

tmlibをしばらく使ってませんでしたがバージョンアップが頻繁に行われていて良いですね。
久々にやるかーと見てみると大体便利な機能が複数追加されてます。

さらにrunstantができて気軽に動作確認できて共有もしやすくなりました。
スタックオーバーフローでの質問時にもめっちゃ役に立って便利でした。

捨て台詞

今回色々あって諦めたアイマス版のスクフェスを次のtmlib.js Advent Calendarがあれば完成させたいです。

9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?