『JavaScript をより使いやすく, より便利に, そしてより豊かに』を
コンセプトに制作した JavaScript ライブラリです.
やってることは
- 生成時に new がいらない class 定義の仕組みを作ってみたり
- jQuery ライクに DOM を扱えるようにしたり
- ajax 機能をサポートしてみたり
- HTML5 Canvas をラップして使いやすくしたり
- アニメーションできるようにしてみたり
- ベクトルや行列をサポートしてみたり
- 音を鳴らせるようにしてみたり
- 入力系をサポートしてみたり
- 1つのコードで PC とスマホ同時対応できるようにしてみたり
と色々やってます.
Examples - Documentation - Download
- [tmlib.js version 0.1.4] (https://raw.github.com/phi1618/tmlib.js/0.1.4/build/tmlib.js)
- tmlib.min.js version 0.1.4
- tmlib.js version 0.1.4 Starter pack
ドキュメントはこちら
使い方
<script src="tmlib.js"></script>
読み込み後は下記のような形で使用します.
<!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>Starter Pack | tmlib.js</title>
<link rel="apple-touch-icon-precomposed" href="icon.png" />
<script src="https://raw.github.com/phi1618/tmlib.js/0.1.3/build/tmlib.js"></script>
<script>
// メイン処理(ページ読み込み後に実行される)
tm.main(function() {
// アプリケーション作成
var app = tm.app.CanvasApp("#world");
app.resizeWindow(); // 画面サイズに合わせる
app.fitWindow(); // リサイズ対応
app.background = "rgba(0, 0, 0, 0.1)"; // 背景色をセット
// 星スプライト
var star = tm.app.Shape(64, 64);
star.canvas.setColorStyle("white", "yellow").fillStar(32, 32, 32, 5);
app.currentScene.addChild(star); // シーンに追加
// 更新
app.currentScene.update = function(app) {
// マウス位置 or タッチ位置に移動
star.x = app.pointing.x;
star.y = app.pointing.y;
// クリック or タッチ中は回転させる
if (app.pointing.getPointing() == true) { star.rotation += 15; }
};
// 実行
app.run();
});
</script>
</head>
<body>
<canvas id="world"></canvas>
</body>
</html>
使用例です. 随時追加していきます.
また, 「こんなん作ってみた」とかあれば教えて下さい.
MIT License
対応ブラウザの一覧です.
IE なんて知りません.
当プロジェクトで使用させていただいている画像・音楽はこちらの皆様からお借りしております.
tmlib.js に関する最新の情報やチュートリアルなどはこちらのブログで紹介していきます.