cocos2dx3.2 Label 自动换行,各种label创建方式,描边,阴影,发光等;

cocos2dx3.2 Label 自动换行,各种label创建方式,描边,阴影,发光等;,第1张

概述原文地址:http://shahdza.blog.51cto.com/2410787/1560612 【唠叨】     在3.x中,废弃了2.x里的LabelTTF、LabelAtlas、LabelBMFont三个字体类,取而代之的是全新的字体标签Label。     实际上Label是将三个字体类进行了融合,进行统一的管理与渲染,这使得创建字体标签Label的方式更加统一,更加方便。     本

原文地址:http://shahdza.blog.51cto.com/2410787/1560612


【唠叨】

在3.x中,废弃了2.x里的LabelTTFLabelAtlasLabelBMFont三个字体类,取而代之的是全新的字体标签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 ); //

使用举例:

4 //使用系统的字体名称"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中,使用TTFCharMapBMFont创建的文字标签,其字符串内容的每个字符都是一个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创建方式,描边,阴影,发光等;所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1066769.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)