文本菜单是菜单项只能显示文本,文本菜单类包括了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", res.charmap_png, 48, 65, ' ');
- var item2 = new cc.MenuItemLabel(labelAtlas, this.menuItem2Callback, this );
本书交流讨论网站:http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
相关推荐
资源名称:Cocos2d-x实战:JS卷——Cocos2d-JS开发内容简介:本书是介绍Cocos2d-x游戏编程和开发技术书籍,介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...
Cocos2d-x实战 JS卷 Cocos2d-JS开发 PDF 电子书完整版本
《Cocos2d-JS开发之旅——从HTML 5到原生手机游戏》适合所有对2D 游戏开发感兴趣的人群,尤其是计算机专业学生、Flash/JS 开发者,因为Cocos2d-JS简单易懂,读者会发现自己已有的基础能快速应用或转移到Cocos2d...
该书作者是《保卫萝卜》核心开发人员,该书手把手教会大家如何使用Cocos2d-js开发一款《保卫萝卜》手游,cocos2d创始人 王哲 亲自为本书作序!是一部非常优秀的开发书籍!
cocos2d-x-2.1.5
Cocos2d-JS---demo 放在服务器上就可以直接预览了,本地打开是黑屏,Cocos2d-JS的方法及效果的演示
Cocos2d-JS开发之旅 从HTML 5到原生手机游戏 PDF 带书签目录 完整版
在使用cocos2d-x开发游戏的过程中,为了实现逻辑和显示相分离。 在下通宵了一个晚上,写出了该事件类。 谨记,该事件只能用于cocos2d-x中。 事件发送者需要继承EventDispatcher类 事件接收者需要继承EventHandle类...
Cocos2d-JS开发之旅 从HTML5到原生手机游戏随书资源源码
Cocos2d-x实战
经典版本 方便下载 源码 旧版本 3.8 官网找不到了 cocos2d-x-3.8.zip
《Cocos2d-Js开发之旅-从HTML5到原生手机游戏》源码
本书根据大富翁项目一一展开讲解游戏开发过程中涉及的各方面内容,读者可以通过这个游戏的开发,全面掌握Cocos2d-x游戏开发的方法和技巧。 本书理论和实践相结合, 资源太大,传百度网盘了,链接在附件中,有需要的...
书中汇聚了热门手机游戏《捕鱼达人》开发的实战经验,作者从最基础的内容开始,逐步深入地介绍了Cocos2d-x的相关知识点。此外,书中的教学资源获得《捕鱼达人》手机游戏的授权,读者可以从一流游戏开发中高起点地...
《Cocos2d-x实战 JS卷 Cocos2d-js开发》随书源码 ch13-ch24 下卷 因为超过csdn上传限制分为2个压缩文件
Cocos2d-JS中使用Cocos Studio资源05:帧动画 动画资源,代码
Get a gentle introduction to the Cocos2d-JS framework to begin working with sprite manipulations, animations, and other 2d game development topics. This book covers environment setup and getting ...
Cocos2d-JS开发之旅 从HTML 5到原生手机游戏 PDF 带书签目录 完整版 以及Cocos2d-js项目教程 pdf文档
cocos2d-x-3.2下载,不多说。或者可以下载另一个资源 cocos引擎老版本集合(cocos2d-x-2.2.1 - 3.5) http://download.csdn.net/download/crazymagicdc/9982656
Cocos2d-JS 单文件引擎用户指南 本指南适用于 Cocos2d-JS 单文件引擎的使用,可从检索。 您可能已经下载了以下三个版本之一: 完整版:完整版引擎包含 Cocos2d-JS 的所有功能和所有扩展,它可以帮助您探索其巨大的...