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

尊重知识版权，文章转载于：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 
        
        @H_267_301@
          4 
         
          5

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

2、使用Texture2D创建

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

@H_267_301@ 4

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

3、使用.plist创建

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

如下所示：

@H_267_301@ 4

@H_755_403@ 11

           // 
         
           <?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来缩放调整大小。

@H_267_301@ 4

           // 
         
           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的字符串内容。

主要函数如下：

只看楼主回复倒序查看回复

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

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