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

)

关于开关菜单的用法

时间: 2024-08-10 17:34:52

Cocos2d-JS中标签和菜单的相关文章

js中标签的创建

第一种创建方法(页面加载完成后,页面代码将会被覆盖) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="创建一个p" id=

js中标签字符串的拼接

//1.用单双引号拼接 var valueDemo = "111"; var htmlStrs1 = '<option selected="selected" value="'+valueDemo+'"></option>'; alert(htmlStrs1); //2.通过转义字符拼接 var htmlStrs2 = "<option selected=\"selected\" val

cocos2d JS 中的数组拼接与排序

1 var arrA = [];//创建三个局部变量的新数组 2 var arrB = []; 3 var arrC = []; 4 var newCards = this.MyMahjong;//创建一个新的局部变量等于一个全局变量的数组:并把里面的内容依次拆开再全部拼接 5 for(var t=0;t<newCards.length;t++){ 6 var char = newCards[t].charAt(0); 7 if(char == "a"){ 8 arrA.push

js中的计时器

在JS中做二级菜单时,被一个鼠标移出时隐藏的小问题困扰了很久. <script> function Menu(id){ var _this=this; this.obj=document.getElementById(id); this.trigger=getFirstChild(this.obj); this.menuOne=getLastChild(this.obj); this.menuOneLi=getChildren(this.menuOne); this.menuOneLiA=[]

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

【js】在js中加HTML注释标签的原因?

<script type="text/JavaScript"> <!-- js代码 //--> //就是这句,为什么还要在-->前加上js注释 </script> 我们偶尔可能会看到上面这样的js注释代码,可是原因是什么呢? 答案: 原因是那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示.为了防止这种情况发生,我们可以使用这样的 HTML 注释标签.注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 Ja

JS修改标签中的文本且不影响其中标签

/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明: * 需要修改<a>标签中的显示文本内容,但<a>标签中又有标签. * * 2017-8-28 深圳 龙华樟坑村 曾剑锋 ********************************************************************/ 一.参考文档: 1. get

[5.1] D3.js中整合坐标轴 - 图表 - 文字标签

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset="utf-8"> <title>Chart</title> </head> <style> .axis pat

js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

<pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx" id="sjx" list="sjxList" listKey="BM" listValue="MC" size="20" cssStyle="width:100%;height:70px;