tmlib備忘録

ツイート このエントリーをはてなブックマークに追加

tmlibは0.1.x系と0.2.x系では記法が異なる。2014年4月現在、まとまったドキュメントがないため 個人的によく使う主だった記法を備忘録としてまとめる。

2014.Apr.2 BLZ

関連リソース

導入

基本的な構文

アセットの読み込み

クラスのカスタマイズ

その他

html側の記述

html側の記述は下記のとおり。canvasは自動生成されるわけではないので、 <canvas id="キャンバス名"></canvas>は忘れず書いておくこと。

<canvas id="world"></canvas>
<script src="tmlib.js"></script>
<script>
    //ここにスクリプトを記述
</script>

Spriteクラス

0.2.x系ではSpriteクラスの引数に幅、高さは不要となった。

インスタンス名 = tm.display.Sprite("アセット名");

Shapeクラス

インスタンス名 = tm.display.Shape(幅, 高さ);

クラス生成

0.2.x系ではtm.createClass();は廃止されたため、クラス生成はtm.define();によって行う。

tm.define("クラス名",{
	init:function(){
		
	},
});

原点位置の調整

SpriteやShapeといったdisplayクラスのオブジェクトは、原点位置をsetOrigin()で変更できる。

this.img = tm.display.Shape(w,h);
this.img.canvas.clearColor("hsla(200,80%,70%,1.0)");
this.img.setOrigin(左右の位置,上下の位置);

左右位置は0(左端)~1(右端)、上下位置は0(上端)~1(下端)で指定する。 (setOrigin(0,0)とした場合は左上が原点となる。)

デフォルト値は(0.5,0.5)で、画像中央が原点に設定される。

Loaderクラスについて

0.2.x系ではtm.graphics.textureManager.add()ではなく、tm.asset.Loader()を用いてアセットを読み込む。


var loader=tm.asset.Loader();
loader.load(アセットリスト名);

loader.onload = function() {
    //読み込み完了後の処理		
};

loader.onprogress = function(e) {
    var event = tm.event.Event("progress");
    event.progress = e.progress;
    this.fire(event);
    //読み込み中の処理
}

Loaderに読ませるアセットリストは下記の記法にしたがい登録する

var  アセットリスト名= {
    "アセット名01":"アセット名01のアドレス",
	"アセット名02":"アセット名02のアドレス",
	"アセット名03":"アセット名03のアドレス",
};

LoadingSceneについて

0.2.x系ではLoaderによるアセット読み込みとロード完了後の画面遷移が1セットになったロード画面クラス(tm.ui.LoadingScene)が用意されている。

var アセットリスト = {
    "アセット名" : "アセットのアドレス",
};

tm.main(function() {

    // ロードシーンにアセットリストを読み込ませる
    var loading = tm.ui.LoadingScene({
        assets: アセットリスト,
    });
    
    
    loading.onload = function() {
        // 読み込み完了後に呼ばれるメソッドを登録
    };
	
    app.replaceScene(loading);
    app.run();
});

LoadingSceneによるアセット読み込み 記述サンプル

var SCREEN_WIDTH    = 320;
var SCREEN_HEIGHT   = 320;
var ASSETS = {
    "img": "images/img.jpg",
};


tm.main(function() {
    var app = tm.display.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    app.fitWindow();
    
    var loading = tm.ui.LoadingScene({
        assets: ASSETS,
    });
    loading.onload = function() {
        app.replaceScene(MainScene());
    };
    app.replaceScene(loading);
    
    app.run();
});

拡張Spriteクラス

クラス生成と同様の記述で拡張クラスを作成できる。

0.2.x系ではSpriteクラスの初期化引数が変更されたため、superInit()には「Loaderで読みこんだ際に指定したアセット名」一種類だけを記述する。

tm.define("クラス名",{
    superClass:tm.display.Sprite,
    init:function(){
        this.superInit("アセット名");
    },
    update:function(app){
    
    }
});

拡張AnimationSpriteクラス

0.2.x系ではSpriteSheetのメンバが「tm.app.SpriteSheet」→「tm.asset.SpriteSheet」に変更された。


tm.define("クラス名",{
	superClass:tm.display.AnimationSprite,
	init:function(){
		var スプライトシート名 = tm.asset.SpriteSheet({
			image:"アセット名",
				frame: {
					width:フレームの幅,
					height:フレームの高さ,
					count: フレーム合計
				},
				animations: {
					"アニメーション名":[
					開始フレーム,
					フレーム数,
					"次のアニメーション名"
					],
				}
		});
	
	
		this.superInit(スプライトシート名,幅,高さ);
	},
});


※0.2.x系のAnimationSpriteの初期化引数は、superInit(SpriteSheet名,width,height)。

カスタムLoadingScene

tmlib0.2.x内のLoadingSceneをもとに作成した、独自画像を表示するカスタムLoadingScene。

ローディング画面で使用するリソースは極力軽いものを選びたい。


ローディング画面で使用するリソース
var assets_loading = {
	"loading"  : "assets/loading.png",
};


//ゲーム本編で使用するリソース
var assets_main    = {
	"blank"    : "assets/blank.png",
	"number"   : "assets/number.png",
    "bg"       : "assets/bg.png",
	"char"     : "assets/char.png",
};
(function() {
    var DEFAULT_PARAM = {
        width: 465,
        height: 465,
    };
    
    tm.define("CustomLoader", {
        superClass: "tm.app.Scene",
        
        init: function(param) {
            this.superInit();
            
			param = {}.$extend(DEFAULT_PARAM, param);
            this.alpha = 0.0;
			
			var preloader=tm.asset.Loader();
				preloader.load(assets_loading);
				preloader.onload = function() {
					this.bg=Img("loading",false).addChildTo(this);
					this.bg.tweener.clear().fadeIn(100).call(function() {
						if (param.assets) {
							var loader = tm.asset.Loader();
							
							loader.onload = function() {
								this.bg.tweener.clear().wait(200).fadeOut(200).call(function() {
									if (param.nextScene) {
										this.app.replaceScene(param.nextScene());
									}
									var e = tm.event.Event("load");
									this.fire(e);
								}.bind(this));
							}.bind(this);
							
							loader.onprogress = function(e) {
								var event = tm.event.Event("progress");
								event.progress = e.progress;
								this.fire(event);
							}.bind(this);
							loader.load(param.assets);
						}
					}.bind(this));	
				}.bind(this);
        },
    });
    
})();

基本サンプル

カスタムLoadingScene、Sprite表示、AnimationSpriteを用いたスコアカウンター、タッチへの反応、 などを実装した基本的な動作サンプル。

リソース一式DOWNLOAD

tmlibの独自記法

tmlibでは、addChildTo()を使うことで、画像要素の表示をスマートに記述できる。

//通常の記法
instance = IMG();
this.addChild(instance);


//tmlibの記法
instance=IMG().addChildTo(this);

メソッドチェーンにも対応しているため、簡潔な記述で多様な変化を実現できる。


//通常の記法
instance = IMG();
this.addChild(instance);
instance.setPosition(_x,_y);


//tmlibの記法
instance=IMG().addChildTo(this).setPosition(_x,_y);