Cocos2d-JS中的文本菜单

大佬教程收集整理的这篇文章主要介绍了Cocos2d-JS中的文本菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

文本菜单是菜单项只能显示文本，文本菜单类包括了cc.MenuItemLabel、cc.MenuItemFont和cc.MenuItemAtlasFont。cc.MenuItemLabel是个抽象类，具体使用的时候是使用cc.MenuItemFont和cc.MenuItemAtlasFont两个类。
文本菜单类cc.MenuItemFont，它的其中一个构造函数定义如下：

		ctor(value,//要显示的文本
		callBACk,//菜单操作的回调函数指针
		target) 

文本菜单类cc.MenuItemAtlasFont是基于图片集的文本菜单项，它的其中一个构造函数定义如下：

ctor (value,//要显示的文本
  			charMapFile,//图片集文件
  			itemWidth,//要截取的文字在图片中的宽度
 			itemHeight,//要截取的文字在图片中的高度
   		startCharMap  				//开始字符
			callBACk ) 					//菜单操作的回调函数指针

本节我们会通过一个实例介绍一下文本菜单的使用，这个实例如图4-12所示，其中菜单Start是使用cc.MenuItemFont实现的，菜单Help是使用cc.MenuItemAtlasFont实现的。

下面我们看看app.js 中HelloWorldLayer中初始化代码如下：

var HelloWorldLayer = cc.Layer.extend({
	
    ctor:function () {
        this._super();


        var size = cc.director.getWinSize();


        var bg = new cc.Sprite(res.BACkground_png);
        bg.x = size.width/2;
        bg.y = size.height/2;
        this.addChild(bg);
       
        cc.MenuItemFont.setFontName("Times New Roman");						①
        cc.MenuItemFont.setFontSize(86); 									②


        var item1 = new cc.MenuItemFont("Start",this.menuItem1CallBACk,this); 			③
        
        var item2 = new cc.MenuItemAtlasFont("Help",res.charmap_png,48,65,' ',this.menuItem2CallBACk,this); 									④
        
     
        
        var  mn = new cc.Menu(item1,item2); 								⑤
        mn.alignItemsVertically();											⑥
        this.addChild(mn); 												⑦
        
        return true;
    },menuItem1CallBACk:function (sender) {
    	cc.log("Touch Start Menu Item " + sender);
    },menuItem2CallBACk:function (sender) {
    	cc.log("Touch Help Menu Item " + sender);
    }
});

上述代码第①和②行是设置文本菜单的文本字体和字体大小。第③行代码是创建cc.MenuItemFont菜单项对象，它是一个一般文本菜单项，构造函数的第一个参数是菜单项的文本内容，第二个参数是点击菜单项回调的函数指，this.menuItem1CallBACk是函数指针，this代表函数所在的对象。
第④行代码是创建一个cc.MenuItemAtlasFont菜单项对象，这种菜单项是基于图片集的菜单项。res.charmap_png变量也是在resource.js文件中定义的，表示"res/menu/tuffy_bold_italic-charmap.png"路径。
还有第⑤行代码var mn = new cc.Menu(item1,item2)是创建菜单对象，把之前创建的菜单项添加到菜单中。第⑥行代码mn.alignItemsVertically()是设置菜单项垂直对齐。第⑦行代码是this.addChild(mn)是把菜单对象添加到当前层中。
注意 上述代码第④行cc.MenuItemAtlasFont类在Web平台下运行正常作用，但是在JSB本地运行显示有误，我们可以使用下面代码替换。

var labelAtlas = new cc.LabelAtlas("Help",' ');
var item2 = new cc.MenuItemLabel(labelAtlas,this );

本书交流讨论网站：http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com
智捷课堂现推出Cocos会员，敬请关注： http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0