Cocos2d-js 开发记录：自定义按钮

浏览数：70 / 时间：2015年06月09日

游戏开发总是有些特殊一般的预制的UI无法满足要求，其实对于不复杂的功能，与其看文档还不如自己写一个。比如游戏中一个虚拟键盘，其中的按键在按下时会增长，在变为原来的两倍高度，在原来高度上方显示按键的字如：

整体键盘：

/* implementation element(key button) used by keyboard */
var KeyMenuItem = cc.MenuItem.extend({
    _label: null,
    _extending: null,
    _hiding: null,
    _normal_sprite: null,
    _press_sprite: null,
    FONT_EXTENDED_BOTTOM_PADDING_FACTOR: 0.75,
    FONT_BOTTOM_PADDING_FACTOR: 0,
    FONT_SIZE_FACTOR: 0.4,

    ctor: function(normal_img, press_img, text, callback, target) {
        cc.MenuItem.prototype.ctor.call(this);
        this.initWithCallback(callback, target);

        var normal_sprite = new cc.Sprite(normal_img);
        var press_sprite = new cc.Sprite(press_img);

        this._normal_sprite = normal_sprite;
        this._press_sprite = press_sprite;

        this.width = normal_sprite.width;
        this.height= normal_sprite.height;

        this._extending = false;
        this._hiding = false;

        var label = new cc.LabelTTF(text, "Arial", Math.ceil(normal_sprite.width * this.FONT_SIZE_FACTOR));
        label.setColor(cc.color(0, 0, 0, 255));
        this._label = label;
        this.setNormal();

        this.addChild(label, 2);
        this.addChild(press_sprite, 0);
        this.addChild(normal_sprite, 1);

        this.cascadeColor = true;
        this.cascadeOpacity = true;
    },

    selected: function() {
        cc.MenuItem.prototype.selected.call(this);
        if (this._enabled) {
            this.setPress();
            cc.log("custom button selected");
        }
        cc.audioEngine.playMusic(res.button_press_mp3, false);
    },

    unselected: function() {
        cc.MenuItem.prototype.unselected.call(this);
        if (this._enabled) {
            this.setNormal();
            cc.log("custom button unselected");
        }
    },

    setNormal: function() {
        this.setLabelNormal();
        this.setSpriteNormal();
    },

    setPress: function() {
        this.setLabelPressed();
        this.setSpritePressed();
    },

    setLabelNormal: function () {
        var label = this._label;
        var nsprite = this._normal_sprite;
        label.setPosition(nsprite.width / 2.0, this.height * (0.5 + this.FONT_BOTTOM_PADDING_FACTOR));
    },

    setLabelPressed: function() {
        var label = this._label;
        var psprite = this._press_sprite;
        var factor = this.FONT_EXTENDED_BOTTOM_PADDING_FACTOR;
        label.setPosition(psprite.width / 2.0, psprite.height * factor);
    },

    setSpriteNormal: function () {
        var nsprite = this._normal_sprite;
        var psprite = this._press_sprite;

        psprite.visible = false;
        nsprite.visible = true;

        nsprite.setPosition(this.width / 2.0, this.height / 2.0);
        psprite.setPosition(psprite.width / 2.0, psprite.height / 2.0);
    },

    setSpritePressed: function() {
        var nsprite = this._normal_sprite;
        var psprite = this._press_sprite;

        psprite.visible = true;
        nsprite.visible = false;

        psprite.setPosition(psprite.width / 2.0, psprite.height / 2.0);
        nsprite.setPosition(this.width / 2.0, this.height / 2.0);
    },

    setEnabled: function(enabled) {
        var nsprite = this._normal_sprite;
        var psprite = this._press_sprite;
        var label = this._label;
        if (this._enabled != enabled) {
            if (enabled == false) {
                this.setOpacity(0);
            } else {
                this.setOpacity(255);
            }
        }
        cc.MenuItem.prototype.setEnabled.call(this, enabled);
    },

    getString: function () {
        return this._label.getString();
    }
});