`

Cocos2d-JS中的文本菜单

阅读更多

文本菜单是菜单项只能显示文本,文本菜单类包括了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课堂微信公共平台,了解最新技术文章、图书、教程信息

分享到:
评论

相关推荐

    《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》完整源码

    Cocos2d-Js是Cocos2d-x家族的一员,是一个跨平台的、基于JavaScript的开源游戏引擎,支持创建2D游戏、交互式图书和其他富媒体应用。通过Cocos2d-Js,开发者可以用一种语言编写代码,然后在多个平台上运行,包括Web、...

    Cocos2d-JS v3.0官方api文档

    Cocos2d-JS v3.0是一款强大的2D游戏开发框架,专为JavaScript开发者设计。这个框架将Cocos2d-x的C++版本与JavaScript进行了无缝集成,使得开发者能够利用JavaScript编写高性能的游戏,同时享受跨平台的便利。Cocos2d...

    cocos2d-js 简陋的排行榜

    cocos2d-js 包含了许多关键模块,如Scene(场景)、Layer(层)、Sprite(精灵)、Label(文本标签)和Menu(菜单),它们构成了游戏的基本架构。对于排行榜,我们可以使用Label来显示玩家的得分,Sprite作为背景或...

    cocos2d-x开发自己的编辑器

    在cocos2d-x中,你可以利用其提供的API和框架来创建各种类型的编辑器,例如: 1. 场景编辑器:用于设计游戏关卡和场景布局,包括精灵、层、瓷砖地图等元素的放置和调整。 2. 资源管理器:管理游戏中的图片、音频、...

    Cocos2d-X 3D跑酷小游戏

    Cocos2d-X基于C++,同时也支持Lua和JavaScript,使其具有跨平台的特性,可以开发iOS、Android、Windows等多平台的游戏。它的核心组件包括渲染引擎、物理引擎、音频引擎和场景管理等,为开发者提供了一套完整的工具链...

    使用Cocos2d-X开发中国象棋

    在中国象棋游戏开发中,Cocos2d-X是一个强大的跨平台2D游戏开发框架,它基于C++,并提供了Lua和JavaScript的绑定,使得开发者可以选择自己熟悉的语言进行游戏逻辑的编写。Cocos2d-X2.2.3是该项目的一个稳定版本,...

    Cocos2d-x高级开发教程制作自己的 捕鱼达人pdf和源代码

    Cocos2d-x是一款广泛应用于跨平台2D游戏开发的开源框架,它支持iOS、Android、Windows等多平台,采用C++作为主要编程语言,同时提供了Lua和JavaScript的绑定接口,使得开发者可以根据自己的喜好选择合适的编程方式。...

    Cocos2d-X游戏源码 走出迷宫源码_cocos2d-x版.7z

    Cocos2d-X是一款强大的开源2D游戏开发框架,它基于C++,并提供了JavaScript和Lua的绑定,使得开发者可以使用这些语言进行游戏开发。"走出迷宫源码_cocos2d-x版"是一个基于Cocos2d-X的游戏项目,旨在帮助开发者学习...

    Cocos2d-x学习笔记——完全掌握C++ API与游戏项目开发.zip

    3. 脚本支持:Cocos2d-x同时支持Lua和JavaScript,可选择使用脚本语言进行开发。 4. 多语言支持:内置多语言系统,方便游戏本地化。 5. 网络通信:提供网络接口,可用于实现在线对战、数据同步等功能。 通过深入...

    cocos2d-x-2.1.5.chm文档

    1. 概述:cocos2d-x基于cocos2d-iphone,并扩展了跨平台的支持,采用C++编写,同时也提供了Lua和JavaScript的绑定,方便不同背景的开发者选择合适的编程语言。 2. 架构:cocos2d-x包括场景(Scene)、层(Layer)、...

    cocos2d-x权威指南源代码(全)

    Cocos2d-x是一个跨平台的游戏开发框架,支持iOS、Android、Windows等多个操作系统,采用C++作为主要编程语言,同时也提供了Lua和JavaScript的绑定,使得开发者可以选择自己熟悉的语言进行游戏开发。 这本书的源代码...

    android-cocos2d-1

    Cocos2d-x是Cocos2d家族的一员,它允许开发者使用C++、Lua或者JavaScript编写游戏逻辑,并能跨平台运行于iOS、Android、Windows等操作系统。Cocos2d-x支持2D图形渲染、动画、物理引擎、粒子系统、音频处理等功能,是...

    Cocos2d-x3.15离线文档

    Cocos2d-x基于C++,同时也支持Lua和JavaScript作为脚本语言,使得开发者可以根据自己的喜好和项目需求选择合适的工作流。 3.15版本是Cocos2d-x的一个稳定版本,它包含了许多改进和新特性。例如,性能优化、更好的...

    cocos2d-iphone-1.1-beta cocos2d示例工程

    3. **Layer**:层是场景中的基本单元,可以包含精灵(Sprite)、菜单(Menu)、文本(Label)等元素。 4. **Sprite**:用于显示图像,是2D游戏中的基本角色或对象。 5. **Action**:动作系统允许精灵执行各种动画...

    cocos2d-x2.1.3的msvc

    7. **脚本支持**:Cocos2d-x支持JavaScript(JSB)和Lua作为脚本语言,便于非程序员进行游戏逻辑编写。 熟悉Cocos2d-x的API和编程模型是至关重要的,这包括了解如何创建场景和层,如何添加和控制精灵,如何编写动作...

    精选_基于Cocos2d-x实现的RunOrDie小游戏_源码打包

    在Cocos2d-x中,游戏世界被抽象为一系列的场景(Scene),每个场景又由多个节点(Node)组成,如层(Layer)、精灵(Sprite)、文本标签(Label)等。"RunOrDie"游戏可能包括主菜单场景、游戏场景、得分显示场景等,...

    cocos2d-Lua示例demo源码踩虫子-MOD美国大兵

    - `jsb.sqlite`:JavaScript绑定数据库,用于存储cocos2d-x的JSAPI与Lua之间的映射关系,以便于Lua调用JavaScript代码。 - `.settings`:IDE的项目特定设置目录,可能包含编译器设置、代码风格等。 - `runtime`:...

    cocos2d-x 贪吃蛇

    在【描述】中提到的"替换官方包的相应文件",是指为了适应开发者或特定环境的需求,可能需要更新或替换cocos2d-x项目中的某些原始资源或代码。这通常涉及到以下几个方面: 1. **配置文件**:可能需要更新项目的配置...

    Cocos2d-html5-v2.0

    是由object-C移植而来的JavaScript版本。 主要功能:  流程控制(Flow control):非常容易地管理不同场景(scenes)之间的流程控制  ...http://article.ityran.com/archives/tag/cocos2d-html5系列教程

    cocos2d-x封神榜demo源码

    6. **脚本系统**:cocos2d-x支持Lua和JavaScript作为脚本语言,用于编写游戏逻辑。这样可以在不重新编译代码的情况下调整游戏行为。 7. **资源管理**:cocos2d-x有内置的资源加载器,如`CCFileUtils`,可以加载图片...

Global site tag (gtag.js) - Google Analytics