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开发之旅 郑高强著 电子工业出版社
