原文地址:http://shahdza.blog.51cto.com/2410787/1560612
【唠叨】
在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 3 4 5 6 7 8 9 10 | // static Label*createWithSystemFont( const std::string&text, //字符串内容 std::string&Font,0)!important; background:none!important">//字体(字体名称、或字体文件) float FontSize,0)!important; background:none!important">//字号 Size&dimensions=Size::ZERO,0)!important; background:none!important">//label的尺寸大小,默认不设置尺寸 TextHAlignmenthAlignment=TextHAlignment::left,0)!important; background:none!important">//水平对齐方式,默认左对齐::left TextVAlignmentvAlignment=TextVAlignment::top //垂直对齐方式,默认顶部::top ); // |
使用举例:
//使用系统的字体名称"Arial"来创建
Label*lb1=Label::createWithSystemFont(
"123abc"
,
"Arial"
//
【createWithTTF】
创建TTF的方式有以下两种:
>方式一:与2.x中LabelTTF的创建类似,不过使用的Fontfile必须为字体文件。
>方式二:通过TTF的配置信息数据结构TTFConfig来创建。
1、方式一:与System Font创建类似
注:区别在于Fontfile必须为字体文件(如"*.ttf"),即不支持使用系统字体名称来创建。
Label*createWithTTF(std::string&Fontfile,0)!important; background:none!important">//必须为字体文件(如"*.ttf")
TextVAlignmentvAlignment=TextVAlignment::top
2、方式二:通过TTFConfig配置来创建 2.1、TTFConfig配置
10 11 12 13 14 15 16 17 18 19 20 21 typedef struct
_ttfConfig
{
std::stringFontfilePath;
//字体文件路径,如"Fonts/Arial.ttf"
int
FontSize;
//字体大小,默认"12"
GlyphCollectionglyphs;
//使用的字符集,默认"DYNAMIC"
const
char
*customGlyphs;
bool
distanceFIEldEnabled;
//是否让字体紧凑,默认false
outlinesize;
//字体轮廓大小,默认"0"
//构造函数
_ttfConfig(
*filePath=
""
size=12,
GlyphCollection&glyphCollection=GlyphCollection::DYNAMIC,
*customGlyphCollection=nullptr,
usedistanceFIEld=
false
outline=0
);
}TTFConfig;
2.2、使用TTFConfig创建TTF 8
TTFConfig&ttfConfig,0)!important; background:none!important">//TTFConfig配置 //字符串内容
TextHAlignmentalignment=TextHAlignment::left,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">maxlinewidth=0
//最大文本行宽,0表示不设置。可用于自动换行只用
);
12
TTFConfigttfConfig; ttfConfig.FontfilePath=
"Fonts/MarkerFelt.ttf"
;
//必须配置
ttfConfig.FontSize=12;
ttfConfig.distanceFIEldEnabled=
;
ttfConfig.outlinesize=0;
ttfConfig.glyphs=GlyphCollection::DYNAMIC;
ttfConfig.customGlyphs=nullptr;
//使用TTFConfig配置,来创建TTF
Label*lb3=Label::createWithTTF(ttfConfig,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">);
【createWithCharMap】 CharMap的用法与2.x中的LabelAtlas是一样的,一般用来显示数字。不过它也可以用来显示其他字符,如英文字符。
字体文件资源一般来自一张.png图片,或.pList文件。
注:图片中每个字符的大小必须是固定的,若要改变字体大小,只能通过setScale放缩来实现。
创建CharMap有三种方式:
> 使用.png图片创建
> 使用纹理Texture2D创建
> 使用.pList创建
从图片中从左到右,一块一块截取。从字符startCharMap开始一一对应。
第一块小图片对应字符startCharMap;第二块小图片对应字符startCharMap+1;第三块对应startCharMap+2 …… 以此类推。
注:startCharMap为ASCII码,即:数字 '0' 为48。
9
//charMapfile:字符资源图片png //itemWIDth:每个字符的宽
//itemHeight:每个字符的高
//startCharMap:图片第一个是什么字符
Label*createWithCharMap(
std::string&charMapfile,
itemWIDth,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">itemHeight,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">startCharMap);
Label*createWithCharMap(Texture2D*texture,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">startCharMap);
std::string&pListfile);
0、字符图片资源 digit.png:200*20(每个数字20*20)。
1、使用.png创建
5
//create字符图片.png,每个字符宽,高,起始字符 Label*lb4=Label::createWithCharMap(
"Fonts/digit.png"
'0'
);
lb4->setString(
"123456"
);
//设置字符串内容
2、使用Texture2D创建 使用方法实际上与.png是类似的。
7
//创建图片纹理Texture2D Texture2D*texture=TextureCache::getInstance()->addImage(
Label*lb5=Label::createWithCharMap(texture,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">);
lb5->setString(
//设置字符串内容
3、使用.pList创建 在digit.pList里需要配置:用到的字符图片资源.png,每个字符的宽、高,起始字符。
如下所示:
18
//
<?
xml
version
=
"1.0"
enCoding
"UTF-8"
?>
<!DOCTYPEpListPUBliC"-//Apple//DTDPList1.0//EN""http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<
pList
"1.0"
>
dict
>
key
>version</
>
<!--pList版本-->
integer
>1</
>
>texturefilename</
<!--字符图片资源:digit.png-->
string
>digit.png</
>
>itemWIDth</
<!--每个字符的宽:20-->
>20</
>
>itemHeight</
<!--每个字符的高:20-->
>
>firstChar</
<!--起始字符:'0'-->
>48</
>
</
>
pList
>
//
使用pList创建CharMap的方法:
//pList的配置信息,如上所示
Label*lb6=Label::createWithCharMap(
"Fonts/digit.pList"
lb6->setString(
);
【createWithBMFont】
BMFont的用法与2.x中的LabelBMFont是一样的。
这个类使用之前,需要添加好字体文件,包括一个图片文件(*.png)和一个字体坐标文件(*.fnt),这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。
值得注意的是:
>在2.x中,可以使用getChildByTag(i)来获取第i个字符,对其单独设置属性、动作等。
>在3.x中,则是使用getLetter(i),而不再是 getChildByTag(i) 。
这个类也没办法指定字体的字号大小,需要用setScale来缩放调整大小。
9 Label*createWithBMFont( std::string&bmFontfilePath,0)!important; background:none!important">//字体文件.Font
//内容
TextHAlignment&alignment=TextHAlignment::left,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">maxlinewidth=0,monospace!important; Font-size:1em!important; min-height:inherit!important; background:none!important">Vec2&imageOffset=Vec2::ZERO
//字符图片的起始左上角坐标。一般不要设置这个参数,因为坐标的配置均已在.Font里完成
);
3
Label*lb7=Label::createWithBMFont( "bitmapFontTest.fnt"
【Label的属性与方法】 Label继承于:
SpriteBatchNode: 用于加快字体的渲染速度。
LabelProtocol : 用于设置Label的字符串内容。
主要函数如下:
//class CC_DLL Label : public SpriteBatchNode,public LabelProtocol{/** * 字体设置 * - setSystemFontname : 字体(字体名字、字体文件) * - setSystemFontSize : 字体大小 * - setString : 字符串内容 * - setTextcolor : 文字内容颜色 **/ //设置System Font类型的字体(字体名字、字体文件) //设置System Font类型的字体大小 //请不要用于其他Label类型!(TTF、CharMap、BMFont) virtual voID setSystemFontname(const std::string& systemFont); virtual voID setSystemFontSize(float FontSize); virtual const std::string& getSystemFontname() const { return _systemFont;} virtual float getSystemFontSize() const { return _systemFontSize;} //改变字符串内容并重新渲染 //注:如果你没有为Label设置TTF/BMFont/CharMap,会产生很大的开销 virtual voID setString(const std::string& text) overrIDe; virtual const std::string& getString() const overrIDe { return _originalUTF8String; } //设置文字颜色,仅支持TTF和System Font //注:区别 Node节点的颜色 // Node ::setcolor : color3B // Label::setTextcolor : color4B virtual voID setTextcolor(const color4B &color); const color4B& getTextcolor() const { return _textcolor; } /** * 获取Label的某个字符 * - getLetter * - 不支持System Font **/ //不支持System Font virtual Sprite* getLetter(int lettetIndex); /** * 文字渲染效果 * - Shadow : 阴影 * - Outline : 轮廓,仅支持TTF * - Glow : 发光,仅支持TTF **/ //阴影Shadow(阴影颜色,相对Label的偏移,模糊度) //注: 其中blurRadius在3.2中并未实现 virtual voID enableShadow(const color4B& shadowcolor = color4B::BLACK,const Size &offset = Size(2,-2),int blurRadius = 0); //轮廓Outline,仅支持TTF(轮廓颜色,轮廓粗细) virtual voID enableOutline(const color4B& outlinecolor,int outlinesize = -1); //发光Glow,仅支持TTF virtual voID enableGlow(const color4B& glowcolor); //取消阴影/轮廓/发光渲染效果 virtual voID disableEffect(); /** * 对齐方式 * > TextHAlignment : 水平对齐方式 * - TextHAlignment:left : 左对齐 * - TextHAlignment:CENTER : 居中对齐,默认 * - TextHAlignment:RIGHT : 右对齐 * > TextVAlignment : 垂直对齐方式 * - TextVAlignment::top : 顶部,默认 * - TextVAlignment::CENTER : 中心 * - TextVAlignment::BottOM : 底部 **/ //设置对齐方式 voID setAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment);} voID setAlignment(TextHAlignment hAlignment,TextVAlignment vAlignment); TextHAlignment getTextAlignment() const { return _hAlignment;} //设置水平对齐方式 voID setHorizontalAlignment(TextHAlignment hAlignment) { setAlignment(hAlignment,_vAlignment); } TextHAlignment getHorizontalAlignment() const { return _hAlignment; } //设置垂直对齐方式 voID setVerticalAlignment(TextVAlignment vAlignment) { setAlignment(_hAlignment,vAlignment); } TextVAlignment getVerticalAlignment() const { return _vAlignment; } /** * Label尺寸大小 * - setlineBreakWithoutSpace : 开启自动换行功能 * - setMaxlinewidth : 文字内容的最大行宽 * - setWIDth : Label尺寸大小,宽 * - setHeight : Label尺寸大小,高 * - setDimensions : Label尺寸大小 **/ //是否开启自动换行功能 voID setlineBreakWithoutSpace(bool breakWithoutSpace); //最大行宽,内容超过Maxlinewidth,就会自动换行 //前提条件: 仅在wIDth==0时,起作用。 // > wIDth == 0; // > setMaxlinewidth(linewidth); // > setlineBreakWithoutSpace(true); //它的效果与下面是类似的. // > setWIDth(linewidth); // > setlineBreakWithoutSpace(true); //只是wIDth==0时,就无法设置文本的对齐方式了. voID setMaxlinewidth(unsigned int maxlinewidth); unsigned int getMaxlinewidth() { return _maxlinewidth;} //设置Label的尺寸大小 //可以理解为Label的文本框大小 //当setlineBreakWithoutSpace(true)时,内容超过wIDth,会自动换行 //并且内容支持文本的对齐方式 //注:设置尺寸大小,使用的是setDimensions,而不是setContentSize ! voID setWIDth(unsigned int wIDth) { setDimensions(wIDth,_labelHeight); } voID setHeight(unsigned int height){ setDimensions(_labelWIDth,height); } voID setDimensions(unsigned int wIDth,unsigned int height); unsigned int getWIDth() const { return _labelWIDth; } unsigned int getHeight() const { return _labelHeight; } const Size& getDimensions() const{ return _labelDimensions; } /** * v3.2 新增 * - setlineHeight : 设置行间距 * - setAdditionalKerning : 设置文字间距 * - getStringLength : 字符串内容长度 */ //设置行间距,不支持system Font voID setlineHeight(float height); float getlineHeight() const; //设置文字间距,不支持system Font voID setAdditionalKerning(float space); float getAdditionalKerning() const; //获取Label的字符串内容长度 int getStringLength() const; /** * 重写Node父类的方法 * - setBlendFunc : 混合模式 * - setScale : 放缩字体大小 * - addChild : 添加子节点 * - getDescription : 显示Label的描述 **/ //设置颜色混合模式 virtual voID setBlendFunc(const BlendFunc &blendFunc) overrIDe; //放缩字体大小(一般用于CharMap、BMFont) virtual voID setScale(float scale) overrIDe; virtual voID setScaleX(float scaleX) overrIDe; virtual voID setScaleY(float scaleY) overrIDe; virtual float getScaleX() const overrIDe; virtual float getScaleY() const overrIDe; //添加子节点 virtual voID addChild(Node * child,int zOrder=0,int tag=0) overrIDe; virtual voID sortAllChildren() overrIDe; //Label描述 virtual std::string getDescription() const overrIDe;};//
【文字渲染效果】
支持三种渲染效果:
Shadow : 阴影
Outline: 轮廓,仅支持TTF
Glow : 发光,仅支持TTF
注:其中Outline与Glow两个效果,只会作用一个。即无法一起使用。
Label*lb=Label::createWithTTF(
lb->setposition(visibleSize/2);
this
->addChild(lb);
lb->enableShadow(color4B::GREEN,Size(10,10));
//阴影
lb->enableOutline(color4B::RED,3);
//轮廓
//lb->enableGlow(color4B::GREEN);//发光
//取消阴影、轮廓、发光效果
//lb->disableEffect();
如图所示: 【对齐方式】
TextHAlignment: 水平对齐方式
- TextHAlignment:left : 左对齐
CENTER : 居中对齐,默认
RIGHT : 右对齐
TextVAlignment: 垂直对齐方式
- TextVAlignment::top : 顶部,默认
CENTER: 中心
BottOM: 底部
仅在设置了Label的尺寸大小setDimensions(wIDth,height),大于显示的字符串内容的尺寸大小,才会起作用。
对齐方式举例,如下几张图片所示:
对齐方式为:
>TextHAlignment:left
TextVAlignment::top
【自动换行】
在3.x中,自动换行有两种方式。(当然你也可以使用C++里的转移字符'\n'进行手动换行)
> 利用lb->setlineBreakWithoutSpace(true),来支持自动换行功能。
> 1. 利用setMaxlinewidth(maxlinewidth),来控制自动换行。
> 2. 利用setDimensions(wIDth,height),来控制自动换行。
1、利用setMaxlinewidth
设置每行显示文字的最大宽度。
注:这种方法仅在Label wIDth == 0的情况下,才会有效。
使用方法:
lb->setlineBreakWithoutSpace(
true
);
lb->setMaxlinewidth(120);
//最大宽度120
如图:
2、利用setDimensions
lb->setWIDth(80);
//设置Label尺寸宽80
//设置了LabelwIDth,这个就无效了
【文字间距】 间距的调整,是在 v3.2 之后才出现的。可以设置文本内容的行间距与文字间距。
注:不支持System Font。
setlineHeight : 设置行间距
setAdditionalKerning: 设置额外文字间距
lb->setlineHeight(80);
lb->setAdditionalKerning(10);
图解:
【单独设置某个字符】
学过2.x中的LabelBMFont的同学,应该知道这个是怎么回事吧?
在3.x中,使用TTF、CharMap、BMFont创建的文字标签,其字符串内容的每个字符都是一个Sprite精灵图片,可以对其进行单独的设置。如精灵放缩、执行动作等。
> lb->getStringLength(): 获取字符串内容的总长度
getLetter(i) : 获取第i个位置上的字符
18
//获取字符串总长度,length=6 cclOG(
"%d"
//获取第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)));
//执行旋转动作
总结 以上是内存溢出为你收集整理的cocos2dx3.2 Label 自动换行,各种label创建方式,描边,阴影,发光等;全部内容,希望文章能够帮你解决cocos2dx3.2 Label 自动换行,各种label创建方式,描边,阴影,发光等;所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
赞
(0)
打赏
微信扫一扫
支付宝扫一扫
cocos2dx进度条笔记
上一篇
2022-05-26
[寒江孤叶丶的Cocos2d-x之旅_37]获取LUA的父类方法
下一篇
2022-05-26
评论列表(0条)