本节就介绍一下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);<span style="font-family:Arial,Helvetica,sans-serif"> </span>
参数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,这个很方便,而且效果很好