Cocos2d-js 开发记录：自定义按钮
游戏开发总是有些特殊，一般的预制的UI无法满足要求。其实对于不复杂的功能，与其看文档还不如自己写一个。比如游戏中一个虚拟键盘，其中的按键在按下时会增长，变为原来的两倍高度，在原来高度上方显示按键的字如：
整体键盘：
一般来说按钮各个状态的各个大小都是一样的，一般可以直接使用cocos中的cc.MenuItemSprite或者cc.MenuItemImage来实现。而上述这个键盘按钮却是大小不同的。那么在两个状态的图片大小不同的时候，cc.MenuItemImage会怎么对齐呢？试了一下采取的是底端对齐，按钮的点击范围有正常状态下的图片大小确定，这两个情况其实和我们要实现的键盘按钮的要求是一致的。但是cc.MenuItemImage不能加入Label，更没有可用根据点击情况变化这个label位置的功能。
这些cc.MenuItemXxxx系列的类都直接或间接继承自cc.MenuItem，而cc.MenuItem继承自cc.Node（framework/cocos2d-html5/cocos2d/core/menus/CCMenuItem.js），来看下cc.MenuItem的源码：
/** * Subclass cc.MenuItem (or any subclass) to create your custom cc.MenuItem objects. * @class * @extends cc.Node * @param {function|String} callback * @param {cc.Node} target */ cc.MenuItem = cc.Node.extend(/** @lends cc.MenuItem# */{ _enabled: false, _target: null, _callback: null, _isSelected: false, _className: "MenuItem", /** * Constructor of cc.MenuItem * @param {function|String} callback * @param {cc.Node} target */ ctor: function (callback, target) { var nodeP = cc.Node.prototype; nodeP.ctor.call(this); this._target = null; this._callback = null; this._isSelected = false; this._enabled = false; nodeP.setAnchorPoint.call(this, 0.5, 0.5); this._target = target || null; this._callback = callback || null; if (this._callback) { this._enabled = true; } }, /** * return whether MenuItem is selected * @return {Boolean} */ isSelected: function () { return this._isSelected; }, /** * only use for jsbinding * @param value */ setOpacityModifyRGB: function (value) { }, /** * only use for jsbinding * @returns {boolean} */ isOpacityModifyRGB: function () { return false; }, /** * set the target/selector of the menu item * @param {function|String} selector * @param {cc.Node} rec * @deprecated since v3.0 */ setTarget: function (selector, rec) { this._target = rec; this._callback = selector; }, /** * return whether MenuItem is Enabled * @return {Boolean} */ isEnabled: function () { return this._enabled; }, /** * set enable value of MenuItem * @param {Boolean} enable */ setEnabled: function (enable) { this._enabled = enable; }, /** * initializes a cc.MenuItem with callback * @param {function|String} callback * @param {cc.Node} target * @return {Boolean} */ initWithCallback: function (callback, target) { this.anchorX = 0.5; this.anchorY = 0.5; this._target = target; this._callback = callback; this._enabled = true; this._isSelected = false; return true; }, /** * return rect value of cc.MenuItem * @return {cc.Rect} */ rect: function () { var locPosition = this._position, locContentSize = this._contentSize, locAnchorPoint = this._anchorPoint; return cc.rect(locPosition.x - locContentSize.width * locAnchorPoint.x, locPosition.y - locContentSize.height * locAnchorPoint.y, locContentSize.width, locContentSize.height); }, /** * set the cc.MenuItem selected same as setIsSelected(true) */ selected: function () { this._isSelected = true; }, /** * set the cc.MenuItem unselected same as setIsSelected(false) */ unselected: function () { this._isSelected = false; }, /** * set the callback to the menu item * @param {function|String} callback * @param {cc.Node} target */ setCallback: function (callback, target) { this._target = target; this._callback = callback; }, /** * call the selector with target */ activate: function () { if (this._enabled) { var locTarget = this._target, locCallback = this._callback; if (!locCallback) return; if (locTarget && cc.isString(locCallback)) { locTarget[locCallback](this); } else if (locTarget && cc.isFunction(locCallback)) { locCallback.call(locTarget, this); } else locCallback(this); } } });
cc.MenuItem对Node的selected,unselected, activate方法进行了重新，提供了回调函数设置设置，修改按钮锚点等功能，自定义的按钮从cc.MenuItem继承即可。根据需要复写一下方法：
- selected，被按下时调用（相当于pressed）
- unselected，按下后松开时调用（相当于released）
- activate，按下松开完成后调用（相当于click）
将要显示的内容元素如cc.Sprite通过this.addChild加入即可显示，在上述方法中通过控制这些元素的visible和位置属性可以实现自定义按钮的各种效果，还可以runAction。
下面给出自己的一个按钮示例：
/* implementation element(key button) used by keyboard */ var KeyMenuItem = cc.MenuItem.extend({ _label: 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;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(); } });
其中：
this.cascadeOpacity = true;
级联不透明度，可以使得对按钮设置透明度时整体透明度也一起变化