cocos2d-js 3.0 rc2 自定義UI控件組件 例子：能播放動畫的MenuItem。MenuItemSprite的bug

其實總體自定義UI組件都比較簡單，尤其是cocos2d-js是開源的，如果有什么不明白的直接看js代碼或者C++代碼即可。當然js代碼基本就夠了。

 

另外，js的ctor函數雖然說是構造函數，但畢竟不是flash或者c++的構造函數，這只是一個普通函數，也就是說可以不在第一行默認調用，這就給擴展帶來了不少方便。

 

現在想做一個聲音按鈕，點一下能關閉音樂，再點一下又能打開。當然就是MenuItemToggle了。

但想做得再炫一點，有聲音的時候，按鈕的樣子能有幾個音波的變化。那么就需要用MenuItemSprite，嘗試自己做一個自定義的Sprite。不過，過程中發現這個MenuItemSprite有不少坑，大家需要注意（詳細看代碼）。（補充：以下代碼只適用於html5版本，后來發現jsb版本對MenuItemSprite的初始化更嚴格一些，不能為null）

var SoundButton = cc.MenuItemToggle.extend({

    ctor:function(){
        var sprite = new cc.Sprite("#soundOn0000.png");     //先設置默認圖片，否則鼠標響應有問題
        var animation = new cc.Animation();
        animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame("soundOn0000.png"));
        animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame("soundOn0001.png"));
        animation.addSpriteFrame(cc.spriteFrameCache.getSpriteFrame("soundOn0002.png"));
        animation.setDelayPerUnit(1/3);
        var action = cc.animate(animation).repeatForever();
        sprite.runAction(action);

        this._super(new cc.MenuItemSprite(sprite, null, null), new cc.MenuItemImage("#soundOff.png"));  //MenuItemSprite有bug，必須設置3個參數才能用，跟MenuItemImage不一樣
        this.setCallback(this._soundOnOff, this);   //這樣可以設置callback的target
    },

    _soundOnOff:function() {
        Sound.toggleOnOff();
    }
});