1. 按鈕 （MenuItem）

• MenuItem 封裝了按鈕的基本功能，點(diǎn)擊后的回調(diào)處理
• MenuItemSprite，繼承自MenuItem，提供了界面，使用一個(gè)或多個(gè)Sprite作為按鈕的界面

var MenuItemLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var spriteNormal = new cc.Sprite("res/startgame.png");
        var spriteSelected = new cc.Sprite("res/startgame2.png");
        var spriteDisable = new cc.Sprite("res/startgame3.png");
        // spriteNomal正常態(tài)效果 ，spriteSelected按下時(shí)效果 ，spriteDisable禁用時(shí)效果，回調(diào)函數(shù)，target對象 、spriteDisable和target可以省略
        var menuSprite = new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,this.startGame,this);
        var menu = new cc.Menu(menuSprite);
        this.addChild(menu);
        menuSprite.setEnabled(false); // 禁用按鈕 
        menuSprite.setEnabled(true); // 啟用按鈕
    },
    startGame : function () {
        console.log("press");
    }
})

• MenuItemImage ，繼承自MenuItemSprite，可以直接使用圖片加載

var menuImage = new cc.MenuItemImage("res/startgame.png","res/startgame2.png","res/startgame3.png",this.startGame,this);
var menu = new cc.Menu(menuImage);

• MenuItemFont， 使用文字按鈕

// 文字，回調(diào)函數(shù)，target
var menuFont = new cc.MenuItemFont("START",this.startGame,this);
menuFont.fontSize = 64; // 設(shè)置字號
menuFont.fontName = "Arial"; // 設(shè)置字體

設(shè)置全局的字體和字號

cc.MenuItemFont.setFontName("Arial");
cc.MenuItemFont.setFontSize(32);

• MenuItemLabel, 可以使用TTF文字或者位圖文字

// TTF文字
var label = new cc.LabelTTF("START","Arial",32);
var item = new cc.MenuItemLabel(label,this.startGame,this);

// 位圖文字
var label = new cc.LabelBMFont("START","res/font.fnt");
var item = new cc.MenuItemLabel(label,this.startGame,this);

2. 開關(guān)（MenuItemToggle）

MenuItemToggle接受多個(gè)MenuItem，每次接收到用戶點(diǎn)擊后就切換到下一個(gè)MenuItem，一直循環(huán)切換

var MenuItemToggleLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        cc.MenuItemFont.setFontName("Arial");
        cc.MenuItemFont.setFontSize(32);
        var on = new cc.MenuItemFont("ON");
        var off = new cc.MenuItemFont("OFF");
        // 依次切換on、off
        var item = new cc.MenuItemToggle(on,off,this.toggleMusic,this);

        var menu = new cc.Menu(item);
        this.addChild(menu);
    },

    toggleMusic:function () {
        if(this.musicOff){
            cc.audioEngine.stopMusic();
            this.musicOff = false;
        } else {
            cc.audioEngine.playMusic("res/goodtime.mp3",true);
            this.musicOff = true;
        }
    }
})

3.菜單（Menu）

前面的各種按鈕都要添加到菜單中才能接收各種事件
Menu默認(rèn)在屏幕中間

var MenuLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        cc.MenuItemFont.setFontName("Arial");
        cc.MenuItemFont.setFontSize(24);
        var one = new cc.MenuItemFont("one",this.handlerCallback);
        var two = new cc.MenuItemFont("two",this.handlerCallback);
        var three = new cc.MenuItemFont("three",this.handlerCallback);
        var four = new cc.MenuItemFont("four",this.handlerCallback);
        var five = new cc.MenuItemFont("five",this.handlerCallback);
        var six = new cc.MenuItemFont("six",this.handlerCallback);

        var menu = new cc.Menu(one,two,three,four,five,six);
        this.addChild(menu);
    },
    handlerCallback:function () {

    }
})

多種布局方式

menu.alignItemsVertically(); // 縱向排列
menu.alignItemsHorizontally(); // 橫向排列
menu.alignItemsVerticallyWithPadding(20); // 縱向自定義間隔
menu.alignItemsHorizontallyWithPadding(20); // 橫向自定義間隔

4.文本（LabelTTF）

var TTFLayer = cc.Layer.extend({
    ctor:function () {
        this._super();

        var winSize = cc.director.getWinSize();
        // 文本內(nèi)容，字體，字號，大小，橫向?qū)R方式，縱向?qū)R方式
        var aboutText = new cc.LabelTTF("關(guān)于游戲...","Arial",20,cc.size(350,220),cc.TEXT_ALIGNMENT_LEFT,cc.VERTICAL_TEXT_ALIGNMENT_TOP);
        aboutText.x = winSize.width/2;
        aboutText.y = winSize.height/2;
        aboutText.color = cc.color(255,0,0); // 文字顏色
        this.addChild(aboutText);
    }
})

參考資料 Cocos2d-JS開發(fā)之旅 鄭高強(qiáng)著 電子工業(yè)出版社