tmlib.js로 그림 보이기

이번에는 tmlib입니다.js 사용
나는 그림을 그리고 싶다.
요즘 재미있게 놀려고 했지만 열심히 하는 것 같아요.
tmlib.js의 제작은 훌륭하지만, 공식 페이지의 강좌는 매우 적다.
어떤 것이 올바른 방법인지, 어떻게 실시하는 것이 좋을지 나는 망설였다.
(결과는 프로그램 라이브러리의 설치를 보면서 만든 결과입니다. 음...)
이게 이번 소스의 전부입니다.
test.html

<script src="tmlib.min.js"></script>
<script>

/**
 * スクリーンサイズ
 */
var SCREEN_WIDTH  = 960;
var SCREEN_HEIGHT = 640;
var SCREEN_CENTER_X  = SCREEN_WIDTH/2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT/2;

tm.main(function() {
    // アプリケーション作成
    var app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面サイズに合わせる
    app.fitWindow(); // リサイズ対応
    app.background = "rgb(0, 0, 0)"; // 背景色をセット

    // ローディング表示
    var label = tm.display.Label("Now Loading");
    label.setPosition(SCREEN_CENTER_X, SCREEN_CENTER_Y);
    label.setAlign("center").setBaseline("middle");         
    app.currentScene.addChild(label);

    // リソースの読み込み
    var loader = tm.asset.Loader();
    loader.load({"piyo":"piyoko.png","balloon":"balloon.png"});
    // 読み込み中（リソースが１つ読み込まれるたびコールバック）
    loader.onprogress = function() {
        label.text += ".";
        console.log(label.text);
    };
    // 全リソース読み込み完了
    loader.onload = function() {
        // シーンの切り替え
        app.replaceScene(GameScene());
    };

    // tmlibの実行
    app.run();
});


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

    // シーン初期化処理
    init : function() {
        this.superInit();

        // シーン内変数作成
        this.sprite = null;
        this.animsprite = null;

        // スプライト作成
        this.sprite = tm.display.Sprite("piyo",100,100);
        this.sprite.setPosition(50, 50);


        var ss = tm.asset.SpriteSheet({
            // 画像
            image: "balloon",
            // １コマのサイズ指定および全コマ数
            frame: {
                width: 192/6,
                height: 384/12, 
                count: 6*12 
            },
            // アニメーションの定義（開始コマ、終了コマ、次のアニメーション）
            animations: {
                "crash": [0, 6*12-1, "crash_back"],
                "crash_back": [6*12-1, 0, "crash"]
            }
        });


        // アニメーションスプライト作成
        this.animsprite = tm.display.AnimationSprite(ss,100,100);
        this.animsprite.setPosition(250, 250);
        this.animsprite.gotoAndPlay("crash");

        // スプライトをシーンに追加
        this.addChild(this.sprite);
        this.addChild(this.animsprite);


    },

    // シーン更新処理
    update: function (app) {
    },
});

</script>
<canvas id="world"></canvas>

화면 캡처가 이런 느낌이에요.
그나저나 풍선은 애니메이션입니다.

이번에 사용한 그림은 이거예요.
병아리

풍선.

자원 읽는 중
tm.asset.로더 레벨에서 할 수 있을 것 같아요.
(이런 용법인지 자신 없어요.)
tmlib.js 라이브러리 내부에서 읽는 자원은
tm.asset.Manager 클래스에서 관리하는 것 같습니다.
불러온 자원을 사용하려면 자산 이름을 사용하십시오.

    // リソースの読み込み
    var loader = tm.asset.Loader();  
    loader.load({"アセット名":ファイル名});
    // 読み込み中（リソースが１つ読み込まれるたびコールバック）
    loader.onprogress = function() {
        // 読み込み中処理
    };
    // 全リソース読み込み完了
    loader.onload = function() {
        // スプライトなどのリソースを使うオブジェクトの生成
    };

사이다의 제작은 다음과 같다.

    tm.display.Sprite(アセット名,WIDTH,HEIGHT);

사이다 애니메이션 정보
tm.asset.Sprite Sheet반에서.
프레임 분할 및 애니메이션에 사용되는 프레임 정의
스프라이트 시계를 미리 만들어야 돼요.

        // スプライトシートの作成
        tm.asset.SpriteSheet({
            // 画像
            image: アセット名,
            // １コマのサイズ指定および全コマ数
            frame: {
                width: １コマの幅,
                height: １コマの高さ, 
                count: 全コマ数
            },
            // アニメーションの定義
            animations: {
                "アニメーション名": [開始コマ, 終了コマ, 次に行うアニメーション名]
            }
        });

모션 퍼즐 및
시작 애니메이션은 다음과 같이 정의됩니다.

        // アニメーションスプライト作成
        this.animsprite = tm.display.AnimationSprite(スプライトシート,WIDTH,HEIGHT);
        this.animsprite.gotoAndPlay(アニメーション名);