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实现的。

Cocos2d-JS中的文本菜单
文本菜单实例

下面我们看看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", res.charmap_png, 48, 65, ' '); var item2 = new cc.MenuItemLabel(labelAtlas, this.menuItem2Callback, this );

 

 


7 responses on “Cocos2d-JS中的文本菜单

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>