tmlib.jsでCheckbox

tmlib.js でCheckboxをSpliteで実装する。
イメージとサイズは任意。
省略すると　画像->固定名で画像を指定　サイズ->チェックONの画像サイズ　を読む。

jsdo.itにサンプル置きました。

/**
 * チェックボックスクラス
 */
var Checkbox = tm.createClass({
    superClass: tm.app.Sprite,

    trueImage: null,
    falseImage: null,
    disabledImage: null,

    disabled: false,
    checked: false,

    init: function(x, y, trueImg, falseImg, disabledImg, width, height) {
        // 画像指定無しなら標準のを指定
        this.trueImage = (trueImg == null) ? "checked" : trueImg;
        this.falseImage = (falseImg == null) ? "nochecked" : falseImg;
        this.disabledImage = (falseImg == null) ? "disablechecked" : disabledImg;

        // チェックボックスのサイズ指定無しならチェックON画像のサイズを使用
        var img = tm.graphics.TextureManager.get(this.trueImage);
        if (width == null) { width = img.width; }
        if (height == null) { height = img.height; }
        this.superInit(width, height);
        this.setPosition(x, y);

        // マウスイベントを有効化
        this.interaction.enabled = true;
        this.interaction.boundingType = "rect";
    },

    update: function() {
        this.setCheckImage();
    },

    // チェック切り替え
    onpointingend: function() {
        if (this.disabled) return;
        this.checked = !this.checked;
    },

    // イメージの切り替え
    setCheckImage: function() {
        if (this.disabled) {
            this.image = this.disabledImage;
            return;
        }
        this.image = this.checked ? this.trueImage : this.falseImage;
    },

    setDisabled: function(stat) {
        this.disabled = stat;
    },

    setChecked: function(stat) {
        this.checked = stat;
    },
});

使用例（Checkboxクラスの定義は省略）

/*
 * 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("checked", "checked.png");
    tm.graphics.TextureManager.add("nochecked", "nochecked.png");
    tm.graphics.TextureManager.add("disablechecked", "disablechecked.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();

        // チェックボックスの表示
        Checkbox(300, 40).addChildTo(this);                      // nocheck
        Checkbox(300, 110).addChildTo(this).setChecked(true);    // checked
        Checkbox(300, 180).addChildTo(this).setDisabled(true);   // disable
    },
});

こうなる。