cocos2d-js 游戏界面

1. 按钮 （MenuItem）

• MenuItem 封装了按钮的基本功能，点击后的回调处理
• MenuItemSprite，继承自MenuItem，提供了界面，使用一个或多个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正常态效果 ，spriteSelected按下时效果 ，spriteDisable禁用时效果，回调函数，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， 使用文字按钮

// 文字，回调函数，target
var menuFont = new cc.MenuItemFont("START",this.startGame,this);
menuFont.fontSize = 64; // 设置字号
menuFont.fontName = "Arial"; // 设置字体

设置全局的字体和字号

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. 开关（MenuItemToggle）

MenuItemToggle接受多个MenuItem，每次接收到用户点击后就切换到下一个MenuItem，一直循环切换

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默认在屏幕中间

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();
        // 文本内容，字体，字号，大小，横向对齐方式，纵向对齐方式
        var aboutText = new cc.LabelTTF("关于游戏...","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开发之旅 郑高强著 电子工业出版社