码迷,mamicode.com
首页 > Web开发 > 详细

Cocos2d-JS中标签和菜单

时间:2016-04-12 17:34:13      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

一、标签
Cocos2d-JS中标签类重要有三种,cc.LabelTTF、cc.LabelAtlas和cc.LabelBMFont
1.cc.LabelTTF
cc.LabelTTF是使用系统中的字体,它是最简单的标签类。cc.LabelTTF继承了cc.Node类,具有cc.Node的基本特性。
字体初始化代码如下:
技术分享
cc.LabelTTF类的构造函数定义如下
ctor(text,fontName,fontSize,dimensions,hAlignment,vAlignment)
2.cc.LabelAtlas
cc.LabelAtlas是图片集标签,其中Atlas本意是地图集、图片集。这种标签显示的文字是从一个图片集中取出的,cc.LabelAtals比cc.LabelTTF快很多,cc.LabelAtlas中的每个字符必须有固定的高度和宽度。
cc.LabelAtlas间接继承了cc.Node类,具有cc.Node的基本特性,他还直接继承了cc.AtlasNode
技术分享
上述代码第29行是创建一个cc.LabelAtlas对象,构造函数的第一个参数是要显示的文字,第二个参数是图片集文件,第三个参数是字符高度,第四个参数是字符宽度,第五个参数是开始字符
为了防止出现硬编码问题,应该使用res.charmap_png表示资源的路径,变量res.charmap_png是在resource.js中定义的资源名。
resource.js代码如下
技术分享
3.cc.LabelBMFont
cc.LabelBMFont是位图字体标签,需要添加字体文件,包括一个图片集png和fnt文件。
cc.LabelBMFont比LabelTTF快很多。cc.LabelBMFont中的每个字符的宽度是可变的。
创建并初始化标签。第一个参数是要显示的文字,第二个参数是图片集文件,只需在resource.js中导入fnt文件的路径即可。技术分享
在resource.js中导入fnt的路径
技术分享
二、菜单
菜单中又包含菜单项,菜单项类是cc.MenuItem,每个菜单项都有三个基本状态。正常,选中和禁止。
菜单是按照菜单项进行分类的,cc.MenuItem的子类有cc.MenuItemLabel,cc.MenuItemSprite和cc.MenuItemtoggle。
其中cc.MenuItemLabel是文本菜单,他有两个子类cc.MenuItemAtlasFont和cc.MenuItemFont
cc.MenuItemSprite类是精灵菜单,它的子类是cc.MenuItemImage,它是图片菜单。
cc.MenuItemToggle类是开关菜单
1.文本菜单
文本菜单类cc.MenuItemFont的其中一个构造函数定义如下:
ctor(value,   //要显示的文本
callback,      //菜单操作的回调函数指针
target)
文本菜单类cc.MenuItemAtlasFont是基于图片集的文本菜单项,他的其中一个构造函数定义如下:
ctor(value,      //要显示的文本
charMapFile,  /图片集文件
itemWidth,      //要截取的文字在图片中的宽度
itemHeight,    //要截取的文字在图片中的高度
startCharMap, //开始字符
callback)//菜单操作的回调函数指针
技术分享
上述代码第43-44行是设置文本菜单的文本字体和字体大小,第46行代码是创建cc.MenuItemFont菜单对象,它是一个一般文本菜单项,构造函数的第一个参数是菜单项的文本内容,第二个参数是单击菜单项回调的函数指针,this.menuItem1Callback是函数指针,this代表函数所在的对象。
2.精灵菜单和图片菜单
精灵菜单的菜单项类是cc.MenuItemSprite
图片菜单的菜单项类是cc.MenuItemImage
由于cc.MenuItemImage继承于cc.MenuItemSprite,所以图片菜单也属于精灵菜单。
为什么叫做精灵菜单呢。因为这些菜单具有精灵的特点,可以让精灵动起来。具体使用时是把一个精灵放置到菜单中作为菜单项
精灵菜单项类cc.MenuItemSprite的其中一个构造函数定义如下:
ctor(normalSprite,      //菜单项正常显示时的精灵
selectedSprite,           //选择菜单项时的精灵
callback,                     //菜单操作的回调函数指针
target)
使用cc.MenuItemSprite比较麻烦,在创建MenuItemSprite之前要先创建三个不同的状态所需要的精灵。cc.MenuItemSprite还有一些其他的构造函数,在这些函数中可以省略disabledSprite参数。
cc.MenuItemImage类的一个构造函数定义如下:
ctor(normalImage,          //菜单项正常显示时的图片
selectedImage,               //选择菜单项时的图片
callback,                       //菜单操作的回调函数指针
target)
两种创建精灵菜单的代码如下所示:
技术分享
第55,56行创建两种不同状态的精灵,第58行代码是创建精灵菜单cc.MenuItemSprite对象;第59.60是设置开始菜单项位置。
3.开关菜单
开关菜单的菜单项类是cc.MenuItemToggle.它是一种可以两种状态切换的菜单项。它可以通过下面的函数创建
ctor(OnMenuItem,        //菜单项On时的菜单项
offMenuItem,                //菜单项Off时的菜单项
callback,                    //菜单操作的回调函数指针
target
)
关于开关菜单的用法
技术分享


Cocos2d-JS中标签和菜单

标签:

原文地址:http://blog.csdn.net/aicoding_d/article/details/51133099

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!