tmlib.js の使い方. とぉ〜っても簡単♪
tmlib.js を script タグで読み込むだけです. これだけで tmlib.js の全ての機能が使えるようになります.
<!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 のように図形や画像,テキストラベルなどを 簡単に表示することができます.
下記は星を表示してクルクル回すサンプルです.
<!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 という web ツール上で実際に
tmlib.js を動かしたり編集することができます.
