游戏界面

纯手工打造

针对小游戏或者游戏界面嵌套层次并不复杂的情况，笔者建议直接使用代码实现，这样的好处是灵活度更高，而且我们能对界面有更好的掌握。

按钮

首先，我们来看看简单的按钮在cocos2d-js中如何实现
cocos2d-js为我们提供了4种按钮，包括：MenuItemSprite、MenuItemImage、MenuItem-Font和MenuItemLable，这些按钮都继承于MenuItem。接下来逐一讲解这些按钮都有什么作用
1、MenuItemSprite
MenuItemSprite继承了MenuItem，后者提供了最基本的按钮功能—也就是点击后的回掉处理。MenuItemSprite在MenuItem基础上增加了界面，也就是使用一个精灵或多个精灵作为按钮的界面。
具体用法：

new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler,target);

spriteNormal 表示正常态的效果spriteSelected表示按下时的效果，spriteDisable表示禁用时候的效果，clickHandler是点击的回掉函数，最后的target是作用于clickHandler的target对象。
MenuItemSprite比较灵活，除了上述的新建方式外，还可以缺省spriteDisable或target，变成

new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,clickHandler);
new cc.MenuItemSprite(spriteNormal,spriteSelected,clickHandler,target);
new cc.MenuItemSprite(spriteNormal,spriteSelected,clickHandler);

这三种新建方式都是合法的，MenuItemSprite会自动识别参数的类型。
我们再看一个例子:

var MenuItemSpriteLayer = 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');
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(){
  trace('this is MenuItemSpriteLayer?',this instanceof MenuItemSpriteLayer);
}
});

上述代码中实现了cc.Menu,也就是后边要说的菜单，在这里暂且跳过这部分代码。在Chrome中运行上述代码可以发现，按钮默认为normal指定的效果，鼠标按下变成selected指定的效果。
单击按钮后在控制台，我们可以看到startGame函数内输出的log信息：

cocos2d-js v3.1
this is MenuItemSpriteLayer?,true

这表示在startGame函数执行的时候，this对象是MenuItemLayer。如果我们把代码改为：

new cc.MenuItemSprite(spriteNormal,spriteSelected,spriteDisable,this.startGame);

再运行上述代码，则可以发现this对象并不是MenuItemLayer，这是因为没有指定target，执行回调函数时，this默认为Global，

Cocos2d-js v3.1
this is MenuItemSpriteLayer?,false

另外， 我们再看看如何禁用按钮。MenuItem给我们提供了禁用的开关：setEnabled方法，该方法接受true/false,分别表示是否可以点击。例如上述例子中，我们禁用按钮：

menuSprite.setEnable(false);

再次运行，我们发现按钮变为灰色，也就是我们新建MenuItemSprite时指定的第三个Sprite的效果。
2、MenuItemImage
MenuItemImage继承MenuItemSprite，目的是使加载图片的操作更加便利，省去了中间新建几个Sprite的麻烦。
具体用法：

new cc.MenuItemImage(imageNormalUrl,imageSelectedUrl,imageDisableUrl,chickHandler,target);

跟MenuItemSprite的用法几乎一致，唯一区别就是Sprite换成了图片的Url。同样的，imageDisableUrl和target也是可以默认的。
例如刚才的MenuItemSprite例子也可以改为如下代码，效果是一样的：

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

3、MenuItemFont
除了使用图片作为按钮外，我们还可以直接使用文字，MenuItemFont用于制作文字按钮。
具体用法：

new cc.MenuItemImage(text,clickHandler,target);

新建MenuItemImage后可以设置他的fontName和fontSize。
我们看一个例子，代码如下：

var MenuItemFontLayer = cc.Layer.extend({
  ctor:function(){
  this._super();
var menuFont = new cc.MenuItemFont('START GAME',this.startGame,this);
menuFont.fontSize = 32;
menuFont.fontName = 'Arial';
var menu = new cc.Menu(menuFont);
this.addChild(menu);
},
startGame:function(){
trace('start game button clicked');
}
});

运行后效果比较简单，屏幕中间有’START GAME’字样，单机文字后文字会有放大效果，使用MenuItemFont比图片按钮更简单，但效果就要打一个折扣了，一般来说这个只能用于demo制作。

4、MenuItemLable
既然MenuItemFont比较粗糙，那么是否有更上流的字体呢？答案是肯定的。Cocos2d-js提供了MenuItemLable，使用TTF文字或位图文字。TTF文字就是MenuItemFont中的文字，这些文字由操作系统的字体库动态生成；位图文字就是把每一个文字映射为一个小位图，由开发者指定。位图文字的效果会更好，但制作会复杂一些。
具体用法：

new cc.MenuItemLable(ttf/bomfont,clickHandler,target);

例如以下代码就可以替代’3.MenuItemFont’中的MenuItemFont:

var lable = new cc.LableTTF('START GAME','Arial',32);
var item = new cc.MenuItemLabel(label,this.startGame,this);
var menu = new cc.Menu(item);
this.addChild(menu);

另外，再粗略看一个位图文字当按钮的例子

var lable = new cc.LableBMFont('START GAME','res/font.fnt');
var item = new cc.MenuItemLable(label,this.startGame,this);

font.fnt是一个位图字体的配置文件，需要在游戏初始阶段预加载，LabelBMFont就是所谓的位图文字。运行后可以看到很别致的’START GAME’这里使用了华康娃娃提，由于Windows系统不会自带这个字体，如果不使用位图字体将无法使用这个字体。

菜单

前边介绍的各种按钮，被添加到舞台上的时候都离不开菜单，菜单就好像是一个给各种按钮赋予能力的道具，离开了菜单，按钮将无法接收到点击事件。
Menu的布局有点特殊，如果不设置menu的坐标，menu默认屏幕居中显示。另外，如果不设置按钮的位置，按钮添加到menu中也是居中显示，这是因为menu的坐标原点被移动到了屏幕中间了，而按钮默认添加到原点的位置。
我们来看一个例子，以下代码建立了6个按钮，运行后我们可以发现都叠加到了屏幕中间，

var MenuLayer = cc.Layer.extend({
 ctor:function(){
this._super();
cc.MenuItemFont.setFontName('Arial');
cc.MenuItemFont.setFontSize(24);
var one = new cc.MenuItemFont('one',this.clickHandler);
var two = new cc.MenuItemFont('two',this.clickHandler);
var three = new cc.MenuItemFont('three',this.clickHandler);
var four = new cc.MenuItemFont('four',this.clickHandler);
var five = new cc.MenuItemFont('five',this.clickHandler);
var six = new cc.MenuItemFont('six',this.clickHandler);

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

}
});

接着尝试设置一下menu的坐标，我们增加如下代码：

menu.x = menu.y = 100;

运行后可以发现menu位置挪动到左下角了，但里面每个按钮还是叠加在一起。

要让每个按钮排列开，我们可以单独设置每个按钮的坐标。
例如分别设置one和two两个按钮的坐标为(100,100)和（200,200）后，one和two就逃离出来了
但是，单独设置每个按钮的坐标会略麻烦，我们也可以使用Menu现成布局方法。
首先看看最简单的布局方法—纵向排列

menu.alignItemsVertically();

经过布局后，真个菜单马上整齐多了。
我们还可以使用横向布局

menu.alignItemsHorizontally();

横向布局和纵向布局都可以自定义按钮之间的间隔，分别是alignItemsHorizontallyWithPadding和alignItemsVerticallyWithPadding。例如使用

menu.alignItemsHorizontallyWithPadding(20);