Download

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

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

Document

ドキュメントはこちら.

Tutorial

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

• シューティング – TMLib でシューティング制作
• ペイント – TMLib でペイント制作

Sample

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

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

コアの拡張

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

Test Program

• TMLib Test

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

• Color Test
• Star Test
• Line Test
• RoundRect Test

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

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

• Vector Test
• Matrix Test
• Circle Test
• Rectangle Test

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

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

サウンド再生をサポート

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

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

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

• DOM Test
• DOM Animation Test
• DOM Attribute Test
• DOM Event Test
• DOM Style Test

keyboard や mouse, touch をサポート

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

• Keyboard Test
• Mouse Test

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>