Cocos2d-JS中标签和菜单

一、标签

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

)

关于开关菜单的用法