Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@daishi_hmr

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

More than 5 years have passed since last update.

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);
    }
});

サンプル

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
daishi_hmr
JavaScriptでゲームを作るのが趣味。 phina.jsをメインに使ってますよー。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?