在3.x中,废弃了2.x里的LabelTTF、LabelAtlas、LabelBMFont三个字体类,取而代之的是全新的字体标签Label关于cocos2d-x label字符串不同大小的改变实际上Label是将三个字体类进行了融合,进行统一的管理与渲染,这使得创建字体标签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。

创建方式如下:

  1. //
  2.     static Label* createWithSystemFont(
  3.         const std::string& text,                   //字符串内容
  4.         const std::string& font,           //字体(字体名称、或字体文件)
  5.         float fontSize,                                   //字号                           
  6.         const Size& dimensions = Size::ZERO, //label的尺寸大小,默认不设置尺寸
  7.         TextHAlignment hAlignment = TextHAlignment::LEFT, //水平对齐方式,默认左对齐::LEFT
  8.         TextVAlignment vAlignment = 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、方式一:与SystemFont创建类似

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


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

2.1、TTFConfig配置

  1. //
  2.     typedef struct _ttfConfig 
  3.     {
  4.         std::string fontFilePath;  //字体文件路径,如 "fonts/Arial.ttf"
  5.         int fontSize;              //字体大小,默认"12"
  6.         GlyphCollection glyphs;    //使用的字符集,默认"DYNAMIC"
  7.         const char *customGlyphs;
  8.         bool distanceFieldEnabled; //是否让字体紧凑,默认false
  9.         int outlineSize;           //字体轮廓大小,默认"0"
  10.           
  11.         //构造函数
  12.         _ttfConfig(
  13.             const char* filePath = "",
  14.             int size = 12,
  15.             const GlyphCollection& glyphCollection = GlyphCollection::DYNAMIC,
  16.             const char *customGlyphCollection = nullptr,
  17.             bool useDistanceField = false,
  18.             int outline = 0
  19.         );
  20.     }TTFConfig;
  21. //


2.2、使用TTFConfig创建TTF

  1. //
  2.     typedef struct _ttfConfig 
  3.     {
  4.         std::string fontFilePath;  //字体文件路径,如 "fonts/Arial.ttf"
  5.         int fontSize;              //字体大小,默认"12"
  6.         GlyphCollection glyphs;    //使用的字符集,默认"DYNAMIC"
  7.         const char *customGlyphs;
  8.         bool distanceFieldEnabled; //是否让字体紧凑,默认false
  9.         int outlineSize;           //字体轮廓大小,默认"0"
  10.           
  11.         //构造函数
  12.         _ttfConfig(
  13.             const char* filePath = "",
  14.             int size = 12,
  15.             const GlyphCollection& glyphCollection = GlyphCollection::DYNAMIC,
  16.             const char *customGlyphCollection = nullptr,
  17.             bool useDistanceField = false,
  18.             int outline = 0
  19.         );
  20.     }TTFConfig;
  21. //

使用举例:

  1. //
  2.     TTFConfig ttfConfig;
  3.     ttfConfig.fontFilePath = "fonts/Marker Felt.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.     static Label* createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
  7.     static Label* createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
  8.     static Label* createWithCharMap(const std::string& plistFile);
  9. //