tmlib.jsでのアセットのロード

tmlib.jsでは、画像や音声等の素材を使用する前にロードしておくためにtm.ui.LoadingSceneを使います。

画像のロード

以下、"hiyoko.png"という画像をスプライトに貼って画面に出すコード例です。

画像のロードとスプライトの表示

tm.main(function() {

    var app = tm.display.CanvasApp("#app");

    // LoadingSceneを作成
    // "hiyoko.png"をロードし、"piyo"という名前で登録する
    // ロード完了後、MainSceneへ遷移する
    var loadingScene = tm.ui.LoadingScene({
        assets: {
            "piyo": "hiyoko.png"
        },
        nextScene: MainScene
    });

    app.replaceScene(loadingScene);

    app.run();

});

// メインシーン
tm.define("MainScene", {
    superClass: "tm.app.Scene",
    init: function() {
        this.superInit();

        // 事前ロードした画像を使い、スプライトを作成・表示
        tm.display.Sprite("piyo", 32, 32)
            .setFrameIndex(0)
            .setPosition(200, 200)
            .addChildTo(this);

    }
});

tm.asset.Manager

LoadingSceneによってロードされたアセットは、裏でtm.asset.Managerというオブジェクトに登録されます。

Sprite等を経由せず、直接これらのアセットを取得したい場合は、tm.asset.Manager.getメソッドを使用します。

画像の場合、アセットはtm.asset.Textureクラスのインスタンスとして格納されています。

画像を直接取り出す

var texture = tm.asset.Manager.get("piyo");
console.log(texture instanceof tm.asset.Texture); // ==> true

アセットのデータ型

ロードしたアセットがどのクラスのインスタンスとして格納されるかは、アセットの拡張子によって決定されます。

たとえば以下のように"userdata.json"をロードした場合、tm.asset.Managerにはtm.util.Fileクラスのインスタンスとして登録されます。

JSONのロード

tm.main(function() {
    var app = tm.display.CanvasApp("#app");

    app.replaceScene(tm.ui.LoadingScene({
        assets: {
            "userdata": "userdata.json"
        },
        nextScene: MainScene
    }));

    app.run();
});

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

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

        var userData = tm.asset.Manager.get("userdata");

        // userDataの型はtm.util.File
        console.log(userData.data.name);
        console.log(userData.data.age);
    }
});

サンプル