首页 > 代码库 > Cocos2d-js 开发记录:自定义按钮

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

游戏开发总是有些特殊一般的预制的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();    }});

 

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