TMLib

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

JavaScript ライブラリ TMLib を公開しました. ゲームを作る際や, DOM で遊んだりする際にご使用下さい.(α版です. βや正式版にする予定はありません)

動的スクリプトのロードやゲーム制作に必要なスクリプト, Vector, Matrix といったクラスのサポートなど色々やっています.

荒削りですし色々とツッコミどころ満載ですが… 昔作ったやつなので, 温かい目で見てやって下さい.

About

TMLib とは『JavaScript をより使いやすく, より便利に, そしてより豊かに.』をコンセプトに制作したJavaScript 拡張ライブラリです.

jQuery のコードを読んでいて生意気にも色々と気にくわない点があったので, 自分で作ろうと思い2年前(2009年8月)に作りました. 最近 Document 用に手直しして最低限整理したのでよかったら使ってください.

もともと公開する予定もなかったので色々と粗削りですが, 部分部分はちゃんと使えるかなと思います. 今後はちょくちょく抜粋しながら Tips として紹介していこうと思います.

Download

Download

パッケージのダウンロードはこちらからできます. サンプルやドキュメントもセットになっています.

tmlib.js 単体のダウンロードはこちら. 単体でもクラス定義する機能やコアの拡張は入っているのでよかったら使ってください.

Document

ドキュメントはこちら.

Sample

Tutorial

チュートリアル用に作ったサンプル. 近々ちゃんとまとめます.

Sample

開発中に実験として作ってたサンプルです. ローカルにまだ大量にあるのですが, まとめきれていないのでとりあえず一部だけ.

  • Circle Collision – サークル同士の衝突サンプル. わりかしちゃんと作った.
  • Font Generator – フォント画像を生成するツール
  • Graphics Sample – tm.graphics.js の実験サンプル
  • Text Effect – テキストエフェクト
  • Unit Circle – 単位円を作ってみたってやつ.
  • Torne Interface – トルネのインターフェースがあまりにも良くできていたのでマネしようとして断念したやつ

Can do it

TMLib でやってること, やれることを紹介. だいぶ前に作って放置してたので自分でも把握してなかったりしますw

コアの拡張

String や Number にメソッドを追加しています. 一応競合とかはしないよう慎重に追加しています.

Test Program

Code

// 
// 
// method test in String
c.group("【method test in String】")

c.log("format               : ", "hsl({0}, {1}%, {2}%)".format(240, 50, 60));   // フォーマット. 便利ですよ~.
c.log("trim                 : ", "   aaaaaaaaaaa     ".trim()); // トリミング
c.log("capitalize           : ", "i am a pen.".capitalize());   // 区切りを大文字
c.log("capitalizeFirstLetter: ", "i am a pen.".capitalizeFirstLetter());    // 先頭のみ大文字化
c.log("toDash               : ", "BackgroundColor".toDash());   // ダッシュ文字に変換
c.log("toCRC32              : ", "hoge".toCRC32());             // crc32 変換
c.log("padding              : ", "1234".padding(10, '0'));      // 文字詰め.
c.log("paddingLeft          : ", "1234".paddingLeft(10, '0'));  // 文字詰め.
c.log("paddingRight         : ", "1234".paddingRight(10, '0')); // 文字詰め.

c.groupEnd();


// 
// 
// method test in Number
c.group("【method test in Number】")

c.log("round        : ", (42.1947).round(3));   // 四捨五入
c.log("ceil         : ", (42.1947).ceil(3));    // 切り上げ
c.log("floor        : ", (42.1947).floor(3));   // 切り捨て
c.log("toInt        : ", (42.195).toInt());     // 整数に変換
c.log("toUnsigned   : ", (0xf0f0f0ff & 0xff000000).toUnsigned());   // u32 に変換. s32 のままだと先頭ビットが立っているので負数になる
c.log("toHex        : ", (100).toHex());        // 16進数に変換
c.log("toBin        : ", (100).toBin());        // 16進数に変換
c.log("padding      : ", (55).padding(10, '0'));// 文字詰め. 返値は文字列.

c.groupEnd();

Result

【method test in String】

    format               :  hsl(240, 50%, 60%)
    trim                 :  aaaaaaaaaaa
    capitalize           :  I Am A Pen.
    capitalizeFirstLetter:  I am a pen.
    toDash               :  -background-color
    toCRC32              :  2335827034
    padding              :  0000001234
    paddingLeft          :  0000001234
    paddingRight         :  1234000000
【method test in Number】

    round        :  42.195
    ceil         :  42.195
    floor        :  42.194
    toInt        :  42
    toUnsigned   :  4026531840
    toHex        :  64
    toBin        :  1100100
    padding      :  0000000055

new のいらないクラス定義

TM.createClass を使うことでクラスを定義することができます. 内部的に this を使っていないので new で生成しようが new を付け忘れようが同じようにインスタンスを生成することができます.

Definition

クラス定義

// SuperHoge というクラスを作成
var SuperHoge = TM.createClass({
    // コンストラクタ. init という名前である必要があります.
    init: function(name) {
        this.name = name;
        
        console.log("---- create SuperHoge ----");
    },
    
    test: function() {
        console.log("My name is {name}.".format(this));
    }
});
// SuperHoge を生成(createClass で定義すると new はいらないよん♪)
var hoge = SuperHoge("phi");
hoge.test();

Inheritance

クラス継承

// SuperHoge を継承して SubHoge クラスを作成
var SubHoge = TM.createClass({
    
    // 継承元となるクラスを指定. superClass という名前である必要があります.
    superClass: SuperHoge,
    
    // コンストラクタ
    init: function(name, bloodType) {
        // 親のコンストラクタを呼ぶ
        this.superInit(SuperHoge, name);
        this.bloodType = bloodType;
        
        console.log("---- create SubHoge ----");
    },
    
    test: function() {
        console.log("My name is {name}.".format(this));
        console.log("My blood type is {bloodType}.".format(this));
    }
});

スクリプトの動的ロード

tmlib.js を script タグで読みこめば他のスクリプトは

TM.loadScript(namespace, filename);

で読み込むことができます.

HTML5 Canvas を使いやすくした tm.graphics.js

tm.graphics.js では canvas にないポリゴンの描画や星型の描画をサポートしています.

Test Program

Vector や Matrix といった幾何学クラスのサポート

vector や matrix といったゲーム制作に必要不可欠なクラスをサポートしています.

ゲームやツール制作用アプリケーションクラス & その他

ゲームやツールを作る際のループ処理や更新, 描画をサポートしています. 主に app namespace にあります. Flash ライクな感じ♪ まだまだ修正中だけど…

サウンド再生をサポート

Sound クラス, SoundManager をサポートしています. SoundManager は Sound クラスをキャッシュしながら生成するので安定して音を鳴らすことができます.

DOM をラップして使いやすく

DOM をラップして使いやすくしています. jQuery っぽい感じですが, 中身が配列だったりとかってことはないよう作っています.

keyboard や mouse, touch をサポート

入力系をサポートしています. また, mouse や touch を区別せず使えるよう同じ名前のメソッドをサポートしてたりします.

その他もろもろ…

Usage

使い方は

  • ダウンロードした TMLib フォルダの src をコピーして使いたいファイルのあるフォルダにペーストする
  • src 直下にある tmlib.js をscript タグで読み込む
  • 使いたいスクリプトを TM.loadScript で読み込む
  • TM.main でスクリプト読み込み後に実行したい処理を記述

といった流れになっています.

Example

tmlib.js と tm.keyboard.js を使った例です.

<html>
    <head>
        <script type="text/javascript" src="src/tmlib.js"></script>
        <script>
            TM.loadScript("input", "keyboard");
             
            TM.main(function() {
                var k = TM.$Key(document);
                k.run();
                TM.setLoop(function(){
                    if (k.getKey('a')) { console.log("press 'a'!!"); }
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT