tmlib.jsでカウンタ付ボタン

tmlib.jsでカウンタ付ボタンをSpriteで実装しました。
カウントアップ・ダウン対応。
カウントMAX値を超えると0に戻ります。

/**
 * カウンタ付ボタンクラス
 */
var CounterButton = tm.createClass({
	superClass: tm.app.Sprite,
	
	count: 0,                       // カウント
	countValue: 1,                  // 1回ごとのカウント値
	limit: Number.MAX_VALUE - 1,    // カウントのMAX値。超えると0
	disabled: false,
	label: null,        // カウント値表示ラベル
	
	normalImage: null,
	pushImage: null,
	filter: null,
	
	init: function(x, y, image, width, height, limit) {
		// 画像指定無しなら固定の画像を指定
		this.normalImage = (image == null) ? "button" : image;
		
		// サイズ指定無しなら画像のサイズを使用
		var img = tm.graphics.TextureManager.get(this.normalImage);
		if (width == null) { width = img.width; }
		if (height == null) { height = img.height; }
		this.superInit(width, height, image);
		this.setPosition(x, y);
		
		if (limit != null) { this.limit = limit; }
		
		this.label = tm.app.Label("");
		this.label.width = width;
		this.label.text = this.count;
		this.label.setAlign("center").addChildTo(this);
		
		// ボタン押下時のフィルター作成（ボタン押下時のImageが無い場合こちらを使用）
		var filter = tm.app.Shape(this.image.width, this.image.height);
		filter.canvas.clearColor("rgba(0, 0, 0, 0.3)");
		this.filter = filter;
		
		// マウスイベントを有効化
		this.interaction.enabled = true;
		this.interaction.boundingType = "rect";
	},
	
	update: function() {
	},
	
	// カウンタテキスト(tm.app.Label)を返す
	getLabel: function() {
		return this.label;
	},
	
	// ボタン押下時
	onpointingstart: function() {
		if (this.disabled) { return; }
		
		if (this.pushImage == null) {
			this.filter.addChildTo(this);
		} else {
			this.image = this.pushImage;
		}
	},
	
	// ボタン押下後
	onpointingend: function() {
		if (this.disabled) { return; }
		
		// 画像リセット
		this.image = this.normalImage;
		this.filter.remove();
		
		// カウントアップorダウン
		this.count += this.countValue;
		if (this.limit >= 0 && this.count > this.limit) { this.count = 0; }
		if (this.limit < 0 && this.count < this.limit) { this.count = 0; }
		this.label.text = this.count;
	},
});

使用例（カウント付ボタンのクラス定義は省略）

/*
 * constant
 */
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 920;
var SCREEN_CENTER_X = SCREEN_WIDTH / 2;
var SCREEN_CENTER_Y = SCREEN_HEIGHT / 2;

// 画像のプリロード
tm.preload(function(){
	tm.graphics.TextureManager.add("button", "button.png");
});

/*
 * メイン処理(ページ読み込み後に実行される)
 */
tm.main(function() {
	
	// アプリケーション作成
	var app = tm.app.CanvasApp("#world");
	app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // リサイズ
	app.fitWindow();    // 自動フィット
	app.background = "white";
	
	// シーンを切り替える
	app.replaceScene(MainScene());
	
	// 実行
	app.run();
});


tm.define("MainScene", {
	superClass: "tm.app.Scene",
	
	init: function() {
		// 親の初期化
		this.superInit();
		
		// カウンタ付きボタン
		var counter = CounterButton(300, 100, "button");
		counter.getLabel().setFillStyle("black").setFontSize(32).setPosition(0, 10);
		counter.limit = 9;
		counter.addChildTo(this);
	},

});

初期表示 
クリック or タップでカウントが上がります。