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 タップでカウントが上がります。