【Cocos2d-html5游戏引擎学习笔记(4)】菜单按钮

本节就介绍一下cocos-html5的菜单类，总得来说菜单一共分为3大类，共5种显示菜单的方式。

第一类：文字类菜单

1. cc.MenuItemLabel

var label1 = cc.LabelBMFont.create("Test1", s_bitmapFontTest3_fnt);
var item1 = cc.MenuItemLabel.create(label1, this.onMenuCallback1, this); 

参数1：显示的文本label

参数2：触发的函数

参数3：触发的目标对象，一般在此场景中就用this

注意：需要设置label的样式，需要一个.fnt自定义字体表

2.cc.MenuItemFont

cc.MenuItemFont.setFontName("Arial");
var item2 = cc.MenuItemFont.create("Test2", this.onMenuCallback2, this);

参数1：显示的文本label

参数2：触发的函数

参数3：触发的目标对象

注意：需要设置label的字体，setFontName("Arial")，即系统自带的字体名称。

第二类：图片类菜单

3.cc.MenuItemSprite

var spriteNormal = cc.Sprite.create(s_menuItem, cc.rect(0,23*2,115,23));
var spriteSelected = cc.Sprite.create(s_menuItem, cc.rect(0,23,115,23));
var spriteDisabled = cc.Sprite.create(s_menuItem, cc.rect(0,0,115,23));
var item3 = cc.MenuItemSprite.create(spriteNormal, spriteSelected, spriteDisabled, this.onMenuCallback3, this);

参数1：正常显示的图片(新建的图片后面带了一个cc.rect是设置图片区域大小，也就是按钮的区域)

参数2：选中显示的图片

参数3：不可用显示的图片

参数4：触发的函数

参数5：触发的目标对象

4.cc.MenuItemImage

var item4 = cc.MenuItemImage.create(s_sendScore, s_pressSendScore, this.onMenuCallback4, this);

参数1：正常显示的图片

参数2：选中显示的图片

参数3：触发的函数

参数4：触发的目标对象

注意：正常和选中的图片都最好事先在resource.js文件中标注好，让系统首先预加载

第三类：开关类菜单

5.cc.MenuItemToggle

var item5 = cc.MenuItemToggle.create(cc.MenuItemFont.create("On"),cc.MenuItemFont.create("Off"));
item5.setCallback(this.onMenuCallback, this);

可以这样用文本建立两个不同状态的按钮，每当点击时，就会更改字体的状态。

或者也可以这样建立多个，每点击一次就逐个更改

var item4 = cc.MenuItemToggle.create(
            cc.MenuItemFont.create("Off"),
            cc.MenuItemFont.create("33%"),
            cc.MenuItemFont.create("66%"),
            cc.MenuItemFont.create("100%"),
            this.onMenuCallback, this
        );

当建立完菜单选项之后我们还需要建立一个菜单“大管家”，把这些选项显示出来

var menu = cc.Menu.create(item1,item2,item3,item4,item5);
menu.setPosition(cc.PointZero);
this.addChild(menu);

这里就不需要像cocos2d-x里面那样item后面结束添加一个NULL，只需要把所有的添加进去就好了，菜单选项的位置设置相对屏幕的位置，然后把菜单管家的位置设置在原点就ok了。

以上就是cocos2d-html5提供的菜单选项，可以尝试都试着显示一下，不过比较常用还是cc.MenuItemImage，这个很方便，而且效果很好