tmlib.js の使い方. とぉ〜っても簡単♪

tmlib.js の使い方

tmlib.js を script タグで読み込むだけです. これだけで tmlib.js の全ての機能が使えるようになります.

[ index.html ]

Demo Download

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <title>start tmlib.js</title>

        <script src="http://cdn.rawgit.com/phi-jp/tmlib.js/0.3.0/build/tmlib.js"></script>
        <script>
            // TODO: ここにコードを書いていく
            tm.main(function() {
                alert("tmlib.js バッチリ読み込まれてるよ!!");
            });
        </script>
    </head>
    <body>
        
    </body>
</html>

図形を表示してみよう

tmlib.js は ActionScript のように図形や画像,テキストラベルなどを 簡単に表示することができます.

下記は星を表示してクルクル回すサンプルです.

[ index.html ]

Demo Download

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <title>start tmlib.js</title>

        <script src="http://cdnrangit.com/phi-jp/tmlib.js/0.3.0/build/tmlib.js"></script>
        <script>
            // TODO: ここにコードを書いていく
            tm.main(function() {
                // アプリケーションクラスを生成
                var app = tm.display.CanvasApp("#world");
                
                // スターを生成してシーンに追加
                var star = tm.display.StarShape().addChildTo(app.currentScene);
                // 位置をセット
                star.setPosition(150, 75);
                // 更新処理を登録
                star.update = function() {
                    // 回転
                    this.rotation += 8;
                };
                
                // 実行
                app.run();
            });
        </script>
    </head>
    <body>
        <canvas id="world"></canvas>
    </body>
</html>

runstant で始めてみよう

チュートリアルページ で遊ぼう♪

チュートリアルページ では runstant という web ツール上で実際に
tmlib.js を動かしたり編集することができます.

Fork me on GitHub