加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

cocos2d-x 3.x label 功能详解,包括行列间距等细节问题

发布时间:2020-12-14 16:33:40 所属栏目:百科 来源:网络整理
导读:尊重知识版权,文章转载于:http://www.taikr.com/group/2/thread/1869 这次主要介绍一下关于 cocos2d-x 3.x label自动换行 的问题,详细的总结一下Cocos2d-x中新字体标签Label ,总结如下: 在3.x中,Label支持四种方式的标签创建。并新增了阴影Shadow、轮

尊重知识版权,文章转载于:http://www.taikr.com/group/2/thread/1869

这次主要介绍一下关于cocos2d-x 3.x label自动换行的问题,详细的总结一下Cocos2d-x中新字体标签Label,总结如下:

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

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

  • 创建TTF:createWithTTF(原LabelTTF)

  • 创建CharMap:createWithCharMap(原LabelAtlas)

  • 创建BMFont:createWithBMFont(原LabelBMFont)

  • Label的属性与方法

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

  • 对齐方式:TextHAlignment、TextVAlignment

  • Label的尺寸大小

  • 自动换行

  • 行间距、文字间距

  • 单独设置某个字符

PS:关于图片资源,请在Cocos2dx给出的官方样例cpp-tests中寻找。


【createWithSystemFont】

创建系统原生字体的API。

创建方式如下:

//
static Label* createWithSystemFont(
const std::string& text,//字符串内容
const std::string& font,//字体(字体名称、或字体文件)
float fontSize,//字号
const Size& dimensions = Size::ZERO,//label的尺寸大小,默认不设置尺寸
TextHAlignment hAlignment = TextHAlignment::LEFT,//水平对齐方式,默认左对齐::LEFT
TextVAlignment vAlignment = TextVAlignment::TOP //垂直对齐方式,默认顶部 ::TOP
);
//


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


【createWithTTF】

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

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

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

1、方式一:与SystemFont创建类似

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

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

2.1、TTFConfig配置


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

//

2.2、使用TTFConfig创建TTF

staticLabel*createWithTTF(

constTTFConfig&ttfConfig,//TTFConfig配置
conststd::string&text,//字符串内容
TextHAlignmentalignment=TextHAlignment::LEFT,
intmaxLineWidth=0//最大文本行宽,0表示不设置。可用于自动换行只用
);

//


使用举例:


TTFConfigttfConfig;

ttfConfig.fontFilePath="fonts/MarkerFelt.ttf";//必须配置
ttfConfig.fontSize=12;
ttfConfig.distanceFieldEnabled=false;
ttfConfig.outlineSize=0;
ttfConfig.glyphs=GlyphCollection::DYNAMIC;
ttfConfig.customGlyphs=nullptr;
//使用TTFConfig配置,来创建TTF
Label*lb3=Label::createWithTTF(ttfConfig,"123abc");

//

【createWithCharMap】

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

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

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

创建CharMap有三种方式:

  • 使用.png图片创建

  • 使用纹理Texture2D创建

  • 使用.plist创建

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

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

注:startCharMap为ASCII码,即:数字'0'为48。

//charMapFile:字符资源图片png
//itemWidth:每个字符的宽
//itemHeight:每个字符的高
//startCharMap:图片第一个是什么字符
staticLabel*createWithCharMap(conststd::string&charMapFile,intitemWidth,intitemHeight,intstartCharMap);
staticLabel*createWithCharMap(Texture2D*texture,intstartCharMap);
staticLabel*createWithCharMap(conststd::string&plistFile);
//

0、字符图片资源

digit.png:200*20(每个数字20*20)。

1、使用.png创建

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

2、使用Texture2D创建

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

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

3、使用.plist创建

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

如下所示:

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

使用plist创建CharMap的方法:

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


【createWithBMFont】

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

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

值得注意的是:

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

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

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

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

使用举例:

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

【Label的属性与方法】

Label继承于:

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

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

主要函数如下:


77
只看楼主回复 倒序查看回复
1回复
  • 2楼 08她的巷 12-29
    /
    classCC_DLLLabel:publicSpriteBatchNode,publicLabelProtocol
    {
    /**
    *字体设置
    *-setSystemFontName:字体(字体名字、字体文件)
    *-setSystemFontSize:字体大小
    *-setString:字符串内容
    *-setTextColor:文字内容颜色
    **/
    //设置SystemFont类型的字体(字体名字、字体文件)
    //设置SystemFont类型的字体大小
    //请不要用于其他Label类型!(TTF、CharMap、BMFont)
    virtualvoidsetSystemFontName(conststd::string&systemFont);
    virtualvoidsetSystemFontSize(floatfontSize);
    virtualconststd::string&getSystemFontName()const{return_systemFont;}
    virtualfloatgetSystemFontSize()const{return_systemFontSize;}
    //改变字符串内容并重新渲染
    //注:如果你没有为Label设置TTF/BMFont/CharMap,会产生很大的开销
    virtualvoidsetString(conststd::string&text)override;
    virtualconststd::string&getString()constoverride{return_originalUTF8String;}
    //设置文字颜色,仅支持TTF和SystemFont
    //注:区别Node节点的颜色
    //Node::setColor:Color3B
    //Label::setTextColor:Color4B
    virtualvoidsetTextColor(constColor4B&color);
    constColor4B&getTextColor()const{return_textColor;}
    /**
    *获取Label的某个字符
    *-getLetter
    *-不支持SystemFont
    **/
    //不支持SystemFont
    virtualSprite*getLetter(intlettetIndex);
    /**
    *文字渲染效果
    *-Shadow:阴影
    *-Outline:轮廓,仅支持TTF
    *-Glow:发光,仅支持TTF
    **/
    //阴影Shadow(阴影颜色,相对Label的偏移,模糊度)
    //注:其中blurRadius在3.2中并未实现
    virtualvoidenableShadow(constColor4B&shadowColor=Color4B::BLACK,constSize&offset=Size(2,-2),intblurRadius=0);
    //轮廓Outline,仅支持TTF(轮廓颜色,轮廓粗细)
    virtualvoidenableOutline(constColor4B&outlineColor,intoutlineSize=-1);
    //发光Glow,仅支持TTF
    virtualvoidenableGlow(constColor4B&glowColor);
    //取消阴影/轮廓/发光渲染效果
    virtualvoiddisableEffect();
    /**
    *对齐方式
    *>TextHAlignment:水平对齐方式
    *-TextHAlignment:LEFT:左对齐
    *-TextHAlignment:CENTER:居中对齐,默认
    *-TextHAlignment:RIGHT:右对齐
    *>TextVAlignment:垂直对齐方式
    *-TextVAlignment::TOP:顶部,默认
    *-TextVAlignment::CENTER:中心
    *-TextVAlignment::BOTTOM:底部
    **/
    //设置对齐方式
    voidsetAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
    voidsetAlignment(TextHAlignmenthAlignment,TextVAlignmentvAlignment);
    TextHAlignmentgetTextAlignment()const{return_hAlignment;}
    //设置水平对齐方式
    voidsetHorizontalAlignment(TextHAlignmenthAlignment){setAlignment(hAlignment,_vAlignment);}
    TextHAlignmentgetHorizontalAlignment()const{return_hAlignment;}
    //设置垂直对齐方式
    voidsetVerticalAlignment(TextVAlignmentvAlignment){setAlignment(_hAlignment,vAlignment);}
    TextVAlignmentgetVerticalAlignment()const{return_vAlignment;}
    /**
    *Label尺寸大小
    *-setLineBreakWithoutSpace:开启自动换行功能
    *-setMaxLineWidth:文字内容的最大行宽
    *-setWidth:Label尺寸大小,宽
    *-setHeight:Label尺寸大小,高
    *-setDimensions:Label尺寸大小
    **/
    //是否开启自动换行功能
    voidsetLineBreakWithoutSpace(boolbreakWithoutSpace);
    //最大行宽,内容超过MaxLineWidth,就会自动换行
    //前提条件:仅在width==0时,起作用。
    //>width==0;
    //>setMaxLineWidth(lineWidth);
    //>setLineBreakWithoutSpace(true);
    //它的效果与下面是类似的.
    //>setWidth(lineWidth);
    //>setLineBreakWithoutSpace(true);
    //只是width==0时,就无法设置文本的对齐方式了.
    voidsetMaxLineWidth(unsignedintmaxLineWidth);
    unsignedintgetMaxLineWidth(){return_maxLineWidth;}
    //设置Label的尺寸大小
    //可以理解为Label的文本框大小
    //当setLineBreakWithoutSpace(true)时,内容超过width,会自动换行
    //并且内容支持文本的对齐方式
    //注:设置尺寸大小,使用的是setDimensions,而不是setContentSize!
    voidsetWidth(unsignedintwidth){setDimensions(width,_labelHeight);}
    voidsetHeight(unsignedintheight){setDimensions(_labelWidth,height);}
    voidsetDimensions(unsignedintwidth,unsignedintheight);
    unsignedintgetWidth()const{return_labelWidth;}
    unsignedintgetHeight()const{return_labelHeight;}
    constSize&getDimensions()const{return_labelDimensions;}
    /**
    *v3.2新增
    *-setLineHeight:设置行间距
    *-setAdditionalKerning:设置文字间距
    *-getStringLength:字符串内容长度
    */
    //设置行间距,不支持systemfont
    voidsetLineHeight(floatheight);
    floatgetLineHeight()const;
    //设置文字间距,不支持systemfont
    voidsetAdditionalKerning(floatspace);
    floatgetAdditionalKerning()const;
    //获取Label的字符串内容长度
    intgetStringLength()const;
    /**
    *重写Node父类的方法
    *-setBlendFunc:混合模式
    *-setScale:放缩字体大小
    *-addChild:添加子节点
    *-getDescription:显示Label的描述
    **/
    //设置颜色混合模式
    virtualvoidsetBlendFunc(constBlendFunc&blendFunc)override;
    //放缩字体大小(一般用于CharMap、BMFont)
    virtualvoidsetScale(floatscale)override;
    virtualvoidsetScaleX(floatscaleX)override;
    virtualvoidsetScaleY(floatscaleY)override;
    virtualfloatgetScaleX()constoverride;
    virtualfloatgetScaleY()constoverride;
    //添加子节点
    virtualvoidaddChild(Node*child,intzOrder=0,inttag=0)override;
    virtualvoidsortAllChildren()override;
    //Label描述
    virtualstd::stringgetDescription()constoverride;
    };
    //

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读