论坛首页 移动开发技术论坛

Cocos2d-JS中的文本菜单

浏览 1585 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2015-03-23  

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

[html] view plaincopy
 
  1. ctor(value,                                 //要显示的文本  
  2. callback,                               //菜单操作的回调函数指针  
  3. target)   

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

[html] view plaincopy
 
  1. ctor (value,                        //要显示的文本  
  2.             charMapFile,                //图片集文件  
  3.             itemWidth,                  //要截取的文字在图片中的宽度  
  4.             itemHeight,                 //要截取的文字在图片中的高度  
  5.         startCharMap                //开始字符  
  6.             callback )                  //菜单操作的回调函数指针  

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

文本菜单实例

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

[html] view plaincopy
 
  1. var HelloWorldLayer = cc.Layer.extend({  
  2.       
  3.     ctor:function () {  
  4.         this._super();  
  5.   
  6.   
  7.         var size = cc.director.getWinSize();  
  8.   
  9.   
  10.         var bg = new cc.Sprite(res.background_png);  
  11.         bg.x = size.width/2;  
  12.         bg.y = size.height/2;  
  13.         this.addChild(bg);  
  14.          
  15.         cc.MenuItemFont.setFontName("Times New Roman");                     ①  
  16.         cc.MenuItemFont.setFontSize(86);                                    ②  
  17.   
  18.   
  19.         var item1 = new cc.MenuItemFont("Start", this.menuItem1Callback, this);             ③  
  20.           
  21.         var item2 = new cc.MenuItemAtlasFont("Help",   
  22.                 res.charmap_png,   
  23.                 48, 65,' ',  
  24.                 this.menuItem2Callback, this);                                  ④  
  25.           
  26.        
  27.           
  28.         var  mn = new cc.Menu(item1, item2);                                ⑤  
  29.         mn.alignItemsVertically();                                          ⑥  
  30.         this.addChild(mn);                                              ⑦  
  31.           
  32.         return true;  
  33.     },  
  34.     menuItem1Callback:function (sender) {  
  35.         cc.log("Touch Start Menu Item " + sender);  
  36.     },  
  37.     menuItem2Callback:function (sender) {  
  38.         cc.log("Touch Help Menu Item " + sender);  
  39.     }  
  40. });  

上述代码第①和②行是设置文本菜单的文本字体和字体大小。第③行代码是创建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本地运行显示有误,我们可以使用下面代码替换。

[html] view plaincopy
 
  1. var labelAtlas = new cc.LabelAtlas("Help", res.charmap_png, 48, 65, ' ');  
  2. var item2 = new cc.MenuItemLabel(labelAtlas, this.menuItem2Callback, this );  

 

更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发

本书交流讨论网站:http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群:257760386

更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

 

 

 

 

 

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

论坛首页 移动开发技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics