cocos2dx[3.2](14)――新字体标签Label

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了cocos2dx[3.2](14)――新字体标签Label，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

【唠叨】

在3.x中，废弃了2.x里的LabelTTF、LabelAtlas、LabelBMFont三个字体类，取而代之的是全新的字体标签Label。

实际上Label是将三个字体类进行了融合，进行统一的管理与渲染，这使得创建字体标签Label的方式更加统一，更加方便。

本节来学习一下3.x中新的标签类Label，如果对2.x中的三个字体类不了解的话，建议先去看看那三个类的用法，再来学习本节内容，能够更好的理解。

2.x中的旧标签类，请移步：http://www.jb51.cc/article/p-fdmvdxhh-wx.html


【致谢】

http://cn.cocos2d-x.org/tutorial/show?id=1446

http://www.cocoachina.com/bbs/read.php?tid=197179


【本节内容】

在3.x中，Label支持四种方式的标签创建。并新增了阴影Shadow、轮廓Outline、发光Glow效果的支持。还支持文字内容的行间距、文字间距、自动换行的设置。

> 创建系统原生字体API :createWithSystemFont

> 创建TTF :createWithTTF （原LabelTTF）

> 创建CharMap :createWithCharMap （原LabelAtlas）

> 创建BMFont :createWithBMFont （原LabelBMFont）


> Label的属性与方法

>文字效果渲染 : Shadow、Outline、Glow

> 对齐方式 :TextHAlignment、TextVAlignment

> Label的尺寸大小

> 自动换行

> 行间距、文字间距

> 单独设置某个字符


关于图片资源，请在cocos2dx给出的官方样例cpp-tests中寻找。



【createWithSystemFont】

创建系统原生字体的API。

创建方式如下：

  1. //
  2. 	staticLabel*createWithSystemFont(
  3. 		conststd::string&text,//字符串内容
  4. 		conststd::string&font,//字体（字体名称、或字体文件）
  5. 		floatfontSize,//字号
  6. 		constSize&dimensions=Size::ZERO,//label的尺寸大小，默认不设置尺寸
  7. 		TextHAlignmenthAlignment=TextHAlignment::LEFT,//水平对齐方式，默认左对齐::LEFT
  8. 		TextVAlignmentvAlignment=TextVAlignment::TOP//垂直对齐方式，默认顶部::TOP
  9. 	);
  10. //

使用举例：

  1. //
  2. 	//使用系统的字体名称"Arial"来创建
  3. 	Label*lb1=Label::createWithSystemFont("123abc","Arial",24);
  4. //



【createWithTTF】

创建TTF的方式有以下两种：

>方式一：与2.x中LabelTTF的创建类似，不过使用的fontFile必须为字体文件。

>方式二：通过TTF的配置信息数据结构TTFConfig来创建。


1、方式一：与System Font创建类似

注：区别在于fontFile必须为字体文件（如"*.ttf"），即不支持使用系统字体名称来创建。

  1. //
  2. 	staticLabel*createWithTTF(
  3. 		conststd::string&text,conststd::string&fontFile,//必须为字体文件（如"*.ttf"）
  4. 		floatfontSize,constSize&dimensions=Size::ZERO,TextHAlignmenthAlignment=TextHAlignment::LEFT,TextVAlignmentvAlignment=TextVAlignment::TOP
  5. 	);
  6. //


2、方式二：通过TTFConfig配置来创建


2.1、TTFConfig配置

  1. //
  2. 	typedefstruct_ttfConfig
  3. 	{
  4. 		std::stringfontFilePath;//字体文件路径，如"fonts/Arial.ttf"
  5. 		intfontSize;//字体大小，默认"12"
  6. 		GlyphCollectionglyphs;//使用的字符集，默认"DYNAMIC"
  7. 		constchar*customGlyphs;
  8. 		booldistanceFieldEnabled;//是否让字体紧凑，默认false
  9. 		intoutlineSize;//字体轮廓大小，默认"0"
  10. 		
  11. 		//构造函数
  12. 		_ttfConfig(
  13. 			constchar*filePath="",intsize=12,constGlyphCollection&glyphCollection=GlyphCollection::DYNAMIC,constchar*customGlyphCollection=nullptr,booluseDistanceField=false,intoutline=0
  14. 		);
  15. 	}TTFConfig;
  16. //


2.2、使用TTFConfig创建TTF

  1. //
  2. 	staticLabel*createWithTTF(
  3. 		constTTFConfig&ttfConfig,//TTFConfig配置
  4. 		conststd::string&text,//字符串内容
  5. 		TextHAlignmentalignment=TextHAlignment::LEFT,intmaxLineWidth=0//最大文本行宽，0表示不设置。可用于自动换行只用
  6. 	);
  7. //

使用举例：

  1. //
  2. 	TTFConfigttfConfig;
  3. 	ttfConfig.fontFilePath="fonts/MarkerFelt.ttf";//必须配置
  4. 	ttfConfig.fontSize=12;
  5. 	ttfConfig.distanceFieldEnabled=false;
  6. 	ttfConfig.outlineSize=0;
  7. 	ttfConfig.glyphs=GlyphCollection::DYNAMIC;
  8. 	ttfConfig.customGlyphs=nullptr;
  9. 	
  10. 	//使用TTFConfig配置，来创建TTF
  11. 	Label*lb3=Label::createWithTTF(ttfConfig,"123abc");
  12. //



【createWithCharMap】

CharMap的用法与2.x中的LabelAtlas是一样的，一般用来显示数字。不过它也可以用来显示其他字符，如英文字符。

字体文件资源一般来自一张.png图片，或.plist文件。

注：图片中每个字符的大小必须是固定的，若要改变字体大小，只能通过setScale放缩来实现。


创建CharMap有三种方式：

> 使用.png图片创建

> 使用纹理Texture2D创建

> 使用.plist创建

从图片中从左到右，一块一块截取。从字符startCharMap开始一一对应。

第一块小图片对应字符startCharMap；第二块小图片对应字符startCharMap+1；第三块对应startCharMap+2 …… 以此类推。

注：startCharMap为ASCII码，即：数字 '0' 为48。

  1. //
  2. 	//charMapFile:字符资源图片png
  3. 	//itemWidth:每个字符的宽
  4. 	//itemHeight:每个字符的高
  5. 	//startCharMap:图片第一个是什么字符
  6. 	staticLabel*createWithCharMap(conststd::string&charMapFile,intitemWidth,intitemHeight,intstartCharMap);
  7. 	staticLabel*createWithCharMap(Texture2D*texture,intstartCharMap);
  8. 	staticLabel*createWithCharMap(conststd::string&plistFile);
  9. //


0、字符图片资源

digit.png：200*20（每个数字20*20）。

wKiom1Qvx-GgIeViAAAnr1bvdEA172.jpg


1、使用.png创建

  1. //
  2. 	//create字符图片.png，每个字符宽，高，起始字符
  3. 	Label*lb4=Label::createWithCharMap("fonts/digit.png",20,'0');
  4. 	lb4->setString("123456");//设置字符串内容
  5. //


2、使用Texture2D创建

使用方法实际上与.png是类似的。

  1. //
  2. 	//创建图片纹理Texture2D
  3. 	Texture2D*texture=TextureCache::getInstance()->addImage("fonts/digit.png");
  4. 	
  5. 	Label*lb5=Label::createWithCharMap(texture,'0');
  6. 	lb5->setString("123456");//设置字符串内容
  7. //


3、使用.plist创建

在digit.plist里需要配置：用到的字符图片资源.png，每个字符的宽、高，起始字符。

如下所示：

  1. //
  2. 	<?xmlversion="1.0"encoding="UTF-8"?>
  3. 	<!DOCTYPEplistPUBLIC"-//Apple//DTDPLIST1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">
  4. 	<plistversion="1.0">
  5. 	<dict>
  6. 		<key>version</key><!--plist版本-->
  7. 		<integer>1</integer>
  8. 		<key>textureFilename</key><!--字符图片资源:digit.png-->
  9. 		<string>digit.png</string>
  10. 		<key>itemWidth</key><!--每个字符的宽:20-->
  11. 		<integer>20</integer>
  12. 		<key>itemHeight</key><!--每个字符的高:20-->
  13. 		<integer>20</integer>
  14. 		<key>firstChar</key><!--起始字符:'0'-->
  15. 		<integer>48</integer>
  16. 	</dict>
  17. 	</plist>
  18. //

使用plist创建CharMap的方法：

  1. //
  2. 	//plist的配置信息，如上所示
  3. 	Label*lb6=Label::createWithCharMap("fonts/digit.plist");
  4. 	lb6->setString("123456");
  5. //



【createWithBMFont】

BMFont的用法与2.x中的LabelBMFont是一样的。

这个类使用之前，需要添加好字体文件，包括一个图片文件（*.png）和一个字体坐标文件（*.fnt），这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。

值得注意的是：

>在2.x中，可以使用 getChildByTag(i) 来获取第i个字符，对其单独设置属性、动作等。

>在3.x中，则是使用 getLetter(i) ，而不再是 getChildByTag(i) 。

这个类也没办法指定字体的字号大小，需要用setScale来缩放调整大小。

  1. //
  2. 	staticLabel*createWithBMFont(
  3. 		conststd::string&bmfontFilePath,//字体文件.font
  4. 		conststd::string&text,//内容
  5. constTextHAlignment&alignment=TextHAlignment::LEFT,intmaxLineWidth=0,constVec2&imageOffset=Vec2::ZERO//字符图片的起始左上角坐标。一般不要设置这个参数，因为坐标的配置均已在.font里完成
  6. 	);
  7. //

使用举例：

  1. //
  2. 	Label*lb7=Label::createWithBMFont("bitmapFontTest.fnt","123abc",TextHAlignment::LEFT);
  3. //



【Label的属性与方法】

Label继承于：

>SpriteBatchNode : 用于加快字体的渲染速度。

>LabelProtocol : 用于设置Label的字符串内容。


主要函数如下：

  1. //
  2. classCC_DLLLabel:publicSpriteBatchNode,publicLabelProtocol
  3. {
  4. /**
  5. *	字体设置
  6. *		-setSystemFontName:字体（字体名字、字体文件）
  7. *		-setSystemFontSize:字体大小
  8. *		-setString:字符串内容
  9. *		-setTextColor:文字内容颜色
  10. **/
  11. 	//设置SystemFont类型的字体（字体名字、字体文件）
  12. 	//设置SystemFont类型的字体大小
  13. 	//请不要用于其他Label类型！（TTF、CharMap、BMFont）
  14. 	virtualvoidsetSystemFontName(conststd::string&systemFont);
  15. 	virtualvoidsetSystemFontSize(floatfontSize);
  16. 	virtualconststd::string&getSystemFontName()const{return_systemFont;}
  17. 	virtualfloatgetSystemFontSize()const{return_systemFontSize;}
  18.  
  19.  
  20. 	//改变字符串内容并重新渲染
  21. 	//注：如果你没有为Label设置TTF/BMFont/CharMap，会产生很大的开销
  22. 	virtualvoidsetString(conststd::string&text)override;
  23. 	virtualconststd::string&getString()constoverride{return_originalUTF8String;}
  24.  
  25.  
  26. 	//设置文字颜色，仅支持TTF和SystemFont
  27. 	//注：区别Node节点的颜色
  28. 	//		Node::setColor:Color3B
  29. 	//		Label::setTextColor:Color4B
  30. 	virtualvoidsetTextColor(constColor4B&color);
  31. 	constColor4B&getTextColor()const{return_textColor;}
  32.  
  33.  
  34. /**
  35. *	获取Label的某个字符
  36. *		-getLetter
  37. *		-不支持SystemFont
  38. **/
  39. 	//不支持SystemFont
  40. 	virtualSprite*getLetter(intlettetIndex);
  41.  
  42.  
  43. /**
  44. *	文字渲染效果
  45. *		-Shadow:阴影
  46. *		-Outline:轮廓，仅支持TTF
  47. *		-Glow:发光，仅支持TTF
  48. **/
  49. 	//阴影Shadow（阴影颜色，相对Label的偏移，模糊度）
  50. 	//注:其中blurRadius在3.2中并未实现
  51. 	virtualvoidenableShadow(constColor4B&shadowColor=Color4B::BLACK,constSize&offset=Size(2,-2),intblurRadius=0);
  52.  
  53. 	//轮廓Outline，仅支持TTF（轮廓颜色，轮廓粗细）
  54. 	virtualvoidenableOutline(constColor4B&outlineColor,intoutlineSize=-1);
  55.  
  56. 	//发光Glow，仅支持TTF
  57. 	virtualvoidenableGlow(constColor4B&glowColor);
  58.  
  59. 	//取消阴影/轮廓/发光渲染效果
  60. 	virtualvoiddisableEffect();
  61.  
  62.  
  63. /**
  64. *	对齐方式
  65. *>TextHAlignment:水平对齐方式
  66. *-TextHAlignment:LEFT:左对齐
  67. *-TextHAlignment:CENTER:居中对齐，默认
  68. *-TextHAlignment:RIGHT:右对齐
  69. *>TextVAlignment:垂直对齐方式
  70. *-TextVAlignment::TOP:顶部，默认
  71. *-TextVAlignment::CENTER:中心
  72. *-TextVAlignment::BOTTOM:底部
  73. **/
  74. 	//设置对齐方式
  75. 	voidsetAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
  76. 	voidsetAlignment(TextHAlignmenthAlignment,TextVAlignmentvAlignment);
  77. 	TextHAlignmentgetTextAlignment()const{return_hAlignment;}
  78.  
  79. 	//设置水平对齐方式
  80. 	voidsetHorizontalAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
  81. 	TextHAlignmentgetHorizontalAlignment()const{return_hAlignment;}
  82.  
  83. 	//设置垂直对齐方式
  84. 	voidsetVerticalAlignment(TextVAlignmentvAlignment){setAlignment(_hAlignment,vAlignment);}
  85. 	TextVAlignmentgetVerticalAlignment()const{return_vAlignment;}
  86.  
  87.  
  88. /**
  89. *	Label尺寸大小
  90. *		-setLineBreakWithoutSpace:开启自动换行功能
  91. *		-setMaxLineWidth:文字内容的最大行宽
  92. *		-setWidth:Label尺寸大小，宽
  93. *		-setHeight:Label尺寸大小，高
  94. *		-setDimensions:Label尺寸大小
  95. **/
  96. 	//是否开启自动换行功能
  97. 	voidsetLineBreakWithoutSpace(boolbreakWithoutSpace);
  98.  
  99.  
  100. 	//最大行宽，内容超过MaxLineWidth，就会自动换行
  101. 	//前提条件:仅在width==0时，起作用。
  102. 	//	>width==0;
  103. 	//	>setMaxLineWidth(lineWidth);
  104. 	//	>setLineBreakWithoutSpace(true);
  105. 	//它的效果与下面是类似的.
  106. 	//	>setWidth(lineWidth);
  107. 	//	>setLineBreakWithoutSpace(true);
  108. 	//只是width==0时，就无法设置文本的对齐方式了.
  109. 	voidsetMaxLineWidth(unsignedintmaxLineWidth);
  110. 	unsignedintgetMaxLineWidth(){return_maxLineWidth;}
  111.  
  112.  
  113. 	//设置Label的尺寸大小
  114. 	//可以理解为Label的文本框大小
  115. 	//当setLineBreakWithoutSpace(true)时，内容超过width，会自动换行
  116. 	//并且内容支持文本的对齐方式
  117. 	//注：设置尺寸大小，使用的是setDimensions，而不是setContentSize！
  118. 	voidsetWidth(unsignedintwidth){setDimensions(width,_labelHeight);}
  119. 	voidsetHeight(unsignedintheight){setDimensions(_labelWidth,height);}
  120. 	voidsetDimensions(unsignedintwidth,unsignedintheight);
  121. 	unsignedintgetWidth()const{return_labelWidth;}
  122. 	unsignedintgetHeight()const{return_labelHeight;}
  123. 	constSize&getDimensions()const{return_labelDimensions;}
  124.  
  125.  
  126. /**
  127. *	v3.2新增
  128. *		-setLineHeight:设置行间距
  129. *		-setAdditionalKerning:设置文字间距
  130. *		-getStringLength:字符串内容长度
  131. */
  132. 	//设置行间距，不支持systemfont
  133. 	voidsetLineHeight(floatheight);
  134. 	floatgetLineHeight()const;
  135.  
  136. 	//设置文字间距，不支持systemfont
  137. 	voidsetAdditionalKerning(floatspace);
  138. 	floatgetAdditionalKerning()const;
  139.  
  140. 	//获取Label的字符串内容长度
  141. 	intgetStringLength()const;
  142.  
  143.  
  144. /**
  145. *	重写Node父类的方法
  146. *		-setBlendFunc:混合模式
  147. *		-setScale:放缩字体大小
  148. *		-addChild:添加子节点
  149. *		-getDescription:显示Label的描述
  150. **/
  151. 	//设置颜色混合模式
  152. 	virtualvoidsetBlendFunc(constBlendFunc&blendFunc)override;
  153.  
  154. 	//放缩字体大小（一般用于CharMap、BMFont）
  155. 	virtualvoidsetScale(floatscale)override;
  156. 	virtualvoidsetScaleX(floatscaleX)override;
  157. 	virtualvoidsetScaleY(floatscaleY)override;
  158. 	virtualfloatgetScaleX()constoverride;
  159. 	virtualfloatgetScaleY()constoverride;
  160.  
  161. 	//添加子节点
  162. 	virtualvoidaddChild(Node*child,intzOrder=0,inttag=0)override;
  163. 	virtualvoidsortAllChildren()override;
  164.  
  165. 	//Label描述
  166. 	virtualstd::stringgetDescription()constoverride;
  167. };
  168. //



【文字渲染效果】

支持三种渲染效果：

> Shadow : 阴影

> Outline : 轮廓，仅支持TTF

>Glow : 发光，仅支持TTF

注：其中Outline与Glow两个效果，只会作用一个。即无法一起使用。

使用举例：

  1. //
  2. 	Label*lb=Label::createWithTTF("123abc","fonts/MarkerFelt.ttf",50);
  3. 	lb->setPosition(visibleSize/2);
  4. 	this->addChild(lb);
  5.  
  6. 	lb->enableShadow(Color4B::GREEN,Size(10,10));//阴影
  7. 	lb->enableOutline(Color4B::RED,3);//轮廓
  8. 	//lb->enableGlow(Color4B::GREEN);//发光
  9.  
  10. 	//取消阴影、轮廓、发光效果
  11. 	//lb->disableEffect();
  12. //

如图所示：

wKioL1Qvv4HyUNY-AABCHrs_f5E221.jpg


wKiom1Qvv0-juVHmAABDu6Gdx6s457.jpg


wKioL1Qvv4HQG4l9AABKGsut21I226.jpg



【对齐方式】

> TextHAlignment : 水平对齐方式

- TextHAlignment:LEFT : 左对齐

- TextHAlignment:CENTER : 居中对齐，默认

- TextHAlignment:RIGHT : 右对齐

> TextVAlignment : 垂直对齐方式

- TextVAlignment::TOP : 顶部，默认

- TextVAlignment::CENTER : 中心

- TextVAlignment::BOTTOM : 底部

仅在设置了Label的尺寸大小setDimensions(width,height)，大于显示的字符串内容的尺寸大小，才会起作用。

对齐方式举例，如下几张图片所示：

对齐方式为：

>TextHAlignment:LEFT

>TextVAlignment::TOP

wKioL1Qvt1bAd5pCAAC6gJHn1rI260.jpg


wKioL1Qvt1bT5tb1AADDFNsBpXs376.jpg


wKiom1QvtyTCyKw7AADIdMaUl50455.jpg



【自动换行】

在3.x中，自动换行有两种方式。（当然你也可以使用C++里的转移字符'\n'进行手动换行）

> 利用lb->setLineBreakWithoutSpace(true)，来支持自动换行功能。

> 1. 利用setMaxLineWidth(maxLineWidth)，来控制自动换行。

> 2. 利用setDimensions(width,height)，来控制自动换行。


1、利用setMaxLineWidth

设置每行显示文字的最大宽度。

注：这种方法仅在Label width == 0的情况下，才会有效。

使用方法：

  1. //
  2. 	lb->setLineBreakWithoutSpace(true);
  3. 	lb->setMaxLineWidth(120);//最大宽度120
  4. //

如图：

wKioL1QvuCbx2CuJAACnIfYPH8o016.jpg


2、利用setDimensions

使用方法：

  1. //
  2. 	lb->setLineBreakWithoutSpace(true);
  3. 	lb->setWidth(80);//设置Label尺寸宽80
  4. 	lb->setMaxLineWidth(120);//设置了Labelwidth，这个就无效了
  5. //

如图：

wKiom1QvuAKSA95FAAConOTfXF0856.jpg



【文字间距】

间距的调整，是在 v3.2 之后才出现的。可以设置文本内容的行间距与文字间距。

注：不支持System Font。

>setLineHeight : 设置行间距

>setAdditionalKerning : 设置额外文字间距


使用举例：

  1. //
  2. 	lb->setLineHeight(80);
  3. 	lb->setAdditionalKerning(10);
  4. //

图解：

wKiom1QvvLuCSN8WAADoNwsARbo883.jpg



【单独设置某个字符】

学过2.x中的LabelBMFont的同学，应该知道这个是怎么回事吧？

在3.x中，使用TTF、CharMap、BMFont创建的文字标签，其字符串内容的每个字符都是一个Sprite精灵图片，可以对其进行单独的设置。如精灵放缩、执行动作等。

注：不支持System Font。

> lb->getStringLength() : 获取字符串内容的总长度

> lb->getLetter(i) : 获取第i个位置上的字符


获取字符串总长度，length=6 CCLOG("%d",lb->getStringLength()); //获取第1个字符 Sprite*letter1=lb->getLetter(1); letter1->setColor(Color3B::GREEN);//设置颜色 letter1->setScale(2.0f);//放缩 //获取第4个字符 Sprite*letter4=lb->getLetter(4); letter4->setColor(Color3B::RED);//设置颜色 letter4->runAction(RepeatForever::create(RotateBy::create(1.0f,90)));//执行旋转动作 //

如图：

wKiom1Qvw-uiM3moAAPOzv2Anc4744.gif

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签