字体历史

在OpenGL的世界里，文字也是图像。在cocos中，一个Label其实就包含了一个或者多个Sprite。
在早期的计算机中，显示文字的方法是，将一种字体中的所有字符的纹理存储在一张大图中，然后根据需要显示的字符在精灵表中找到对应的位图显示到屏幕上，这就是点阵字。
显然这不能满足现代的需求，比如不同大小、文字间距、加粗、字体颜色、阴影、模糊，换行。而且对字符集较大的文字支持不友好，比如汉字有数万个字符，集成到一张精灵表中显然是不现实的，而且很多的文字可能很少用到，会浪费大量内存。
轮廓字体，是通过某种统一的协议，来对字体的每个字符进行描述，然后计算机可以借助该协议的库根据字符的描述信息在程序运行时动态生成字符的纹理进行显示。cocos引擎就采用了FreeType库来解析TrueType字体（TTF）。

FreeType字体引擎库

字体包含了一系列字符的字形描述的文件，而字体引擎则负责根据字符的字形描述信息、屏幕分辨率生成合适大小的纹理，其实就是光栅化的过程。

FreeType已被广泛用于Linux、IOS、Android、ChromeOS等平台，cocos也是。

字体文件

要生成字符的纹理，不仅需要字形描述信息，还有很多其他信息。一个字体文件包含的信息如下：

  • 字形描述
    • 每个字符都对应一个。
  • 字符映射表：Charmap
    • 字符到字形的映射，通过字符值找到字形描述。
    • 字符有多种编码，一个字体文件可能包含多个字符映射表，一个TrueType字体一般都包含一个苹果特殊风格编码的字符映射表，一个Unicode编码的字符映射表。
  • 字符度量
    • 如何放置（组织）字符，字符可不是像砖块，一个个简单拼凑起来，不然会很难看，比如字母a、g的底部并不是在同一水平线上。
  • 其他信息

网格对齐、字形微调（kerning）

字符度量

字符水平布局

点击查看【processon】

字符垂直布局

点击查看【processon】

  • bounding box
    • bbox，边界框，刚好包裹住字符，通过xMin，yMin，xMax，yMax来确定。
  • bearingX：左跨距
    • 原点orign到bbox左边的距离。水平布局是正数，垂直布局是负数。
  • bearingY：上跨距
    • 原点oring到bbox上边距的距离，水平布局是正数，垂直布局是负数
  • advanceX：步进宽度
    • 渲染完一个字形后，前进该字形的一个advanceX渲染下一个字形。
  • advanceY：步进高度
  • width：字符宽度
    • 字体坐标未缩放时，等于xMax-xMin，可能被网格对齐修改。

  • height：字符高度

    • 字体坐标未缩放时，等于yMax-yMin，可能被网格对齐修改。

      字形解析

      FreeType从解析字形到生成字符纹理的过程如下：

    • 字形缩放

      • 对字形中的所有点进行缩放，直至字形调整到指定大小，注意这可不是应用层的文字缩放，对于TTF字体来说，相同文字在不同尺寸上，字形会有变化，如果是生硬的缩放那文字会很难看。
    • 网格对齐
      • 对缩放后的字形轮廓进行网格对齐
    • 字距微调
      • 对网格对齐的轮廓进行字距微调。

        cocos字体

        UML类图

        点击查看【processon】

        FontAtlas

        字体的“部分字符”的纹理集。我们不可能说要用到汉字，加载一个汉字字体文件，就加载所有汉字的纹理，最好的方式是，需要绘制什么字符就创建什么字符的纹理，我们可以通过GlyphCollection来决定加载哪些字符的纹理。
        根据FontAtlas，Label就能够绘制文字了，当然这些文字必须是包含在FontAtlas中，也就是已经创建了纹理的字符。 ```cpp struct FontLetterDefinition { // 描述了字符在精灵表中的纹理坐标、
        1.                     // 设计分辨率大小、以及相对应的纹理
        float U; float V; float width; float height; float offsetX; float offsetY; int textureID; bool validDefinition; int xAdvance; };

class CC_DLL FontAtlas : public Ref { …… protected:

  1. //精灵表
  2. //key:        pageindex，页索引，字体可能有多张精灵表，比如FontFreeType，字符较多尺寸较大，将分成多张纹理
  3. //            FontCharmap、FontFNT一般都是一张精灵表就足够。
  4. //value:    字符的纹理集，注意一张纹理包含了多个字符，并不是一个字符的纹理。
  5. std::unordered_map<ssize_t, Texture2D*>             _atlasTextures;
  7. //保存每个字符对应的FontLetterDefinition
  8. std::unordered_map<char32_t, FontLetterDefinition>  _letterDefinitions;

};

  1. <a name="ezlYG"></a>
  2. ## Font（abstract）
  3. 是个抽象类，表示加载到内存中的字体。必须实现能创建字符纹理的方法createFontAtlas。
  4. ```cpp
  5. class CC_DLL Font : public Ref {
  6. public:
  8.     //创建 GlyphCollection 字符集合中字符的纹理。
  9.     virtual FontAtlas* createFontAtlas() = 0;
  11.     virtual int* getHorizontalKerningForTextUTF32(
  12.         const std::u32string& text, int &outNumLetters) const = 0;
  13. };

FontFreeType

TrueType字体（TTF），由FreeType字体库进行解析。
该类包含了TTF字体配置信息，注意在创建它的时候是加载了TTF字体配置信息，而并没有生成文字的纹理，纹理是在需要绘制具体字符时，实时动态解析字体并生成纹理。

  1. class CC_DLL FontFreeType : public Font
  2. {
  3. public:
  4.     static FontFreeType* create(const std::string &fontName, float fontSize, GlyphCollection glyphs,
  5.         const char *customGlyphs,bool distanceFieldEnabled = false, float outline = 0);
  7. private:
  8.     static const char* _glyphASCII;        //ASCII字符集
  9.         // \"!#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`
  10.         // abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿À
  11.         // ÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþ "
  13.     static const char* _glyphNEHE;        //键盘字符集
  14.         // !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghi
  15.         // jklmnopqrstuvwxyz{|}~ ";
  17.     static FT_Library _FTlibrary;        //FreeType字体引擎库实例，全局共享一个
  18.     static bool _FTInitialized;            //必须先初始化字体引擎库。
  20.     FT_Face _fontRef;                    // 一个face对应一个字体，比如Arial、Arial Italic是两种不同的外观。
  21.     FT_Stroker _stroker;                // 用于描边
  22.     FT_Encoding _encoding;                // 当前系统环境采用哪些字符编码，这决定了使用哪张字符映射表。
  24.     std::string _fontName;                // 字体文件路径，可以是相对路径
  25.     bool _distanceFieldEnabled;            // 用于发光特效
  26.     float _outlineSize;                    // 描边特效
  27.     int _lineHeight;                    // 行高
  28.     FontAtlas* _fontAtlas;                // 字符纹理集
  30.     GlyphCollection _usedGlyphs;        // 字符集类型
  31.     std::string _customGlyphs;            // 自定义的字符集，字符集类型是CUSTOM
  33.     typedef struct _DataRef
  34.     {
  35.         Data data;
  36.         unsigned int referenceCount;
  37.     } DataRef;
  38.     // 缓存字体文件数据
  39.     static std::unordered_map<std::string, DataRef> s_cacheFontData;
  40. };
  42. // 加载一个TTF字体
  43. FontFreeType * FontFreeType::create(const std::string &fontName, float fontSize, 
  44.                                     GlyphCollection glyphs, const char *customGlyphs,
  45.                                     bool distanceFieldEnabled /* = false */,
  46.                                     float outline /* = 0 */) {
  47.     //初始化字体引擎库及一些相关模块如用于描边的Stroker
  48.     FontFreeType *tempFont =  new (std::nothrow) FontFreeType(distanceFieldEnabled,outline);
  50.     //设置字体的字符集，默认是ASCII
  51.     tempFont->setGlyphCollection(glyphs, customGlyphs);
  52.     //enum class GlyphCollection {
  53.     //    DYNAMIC,    //动态设置字符集，一般用于被使用的字符不可预知，比如输入框输入字符。
  54.     //    NEHE,        //键盘字符集
  55.     //    ASCII,        //ASCII字符集，比键盘更多一点
  56.     //    CUSTOM        //自定义字符集，一般用于被使用到的字符可预知，可以有效减少内存占用。
  57.     //};
  59.     //加载字体，创建FT_Face、选择编码（charmap字符映射表），设置字体大小。
  60.     if (!tempFont->createFontObject(fontName, fontSize)) {
  61.         delete tempFont;
  62.         return nullptr;
  63.     }
  64. }
  66. FontFreeType::FontFreeType(bool distanceFieldEnabled /* = false */, float outline /* = 0 */) {
  67.     //如果要设置描边，就加载Stroker模块
  68.     if (outline > 0.0f) {
  69.         ......
  70.         FT_Stroker_New(FontFreeType::getFTLibrary(), &_stroker);
  71.         ......
  72.     }
  73. }
  75. // 加载字体
  76. bool FontFreeType::createFontObject(const std::string &fontName, float fontSize) {
  77.     FT_Face face;     //必须选择字体中的一个外观，比如Arial还是Arail Italic
  79.     // 字体文件数据加载到内存会被缓存起来
  80.     // 首先查找缓存中的字体文件数据，否则加载字体数据到内存，并缓存起来。
  81.     auto it = s_cacheFontData.find(fontName);
  82.     if (it != s_cacheFontData.end()) {
  83.         (*it).second.referenceCount += 1;
  84.     }
  85.     else {
  86.         s_cacheFontData[fontName].referenceCount = 1;
  87.         s_cacheFontData[fontName].data = FileUtils::getInstance()->getDataFromFile(fontName);    
  88.     }
  90.     //创建FT_Face
  91.     if (FT_New_Memory_Face(getFTLibrary(), s_cacheFontData[fontName].data.getBytes(), s_cacheFontData[fontName].data.getSize(), 0, &face ))
  92.         return false;
  94.     // 选择charmap字符映射表，选择了UNICODE编码的表。
  95.     if (FT_Select_Charmap(face, FT_ENCODING_UNICODE)){
  96.         ......
  97.     }
  99.     // 设置字体大小
  100.     if (FT_Set_Char_Size(face, fontSizePoints, fontSizePoints, dpi, dpi)) return false;
  101.     ......
  102. }
  104. //创建当前字符集的字符纹理
  105. FontAtlas * FontFreeType::createFontAtlas()
  106. {
  107.     if (_fontAtlas == nullptr) {
  108.         _fontAtlas = new (std::nothrow) FontAtlas(*this);
  109.         if (_fontAtlas && _usedGlyphs != GlyphCollection::DYNAMIC) {
  110.             std::u32string utf32;
  111.             //获取到字符集
  112.             if (StringUtils::UTF8ToUTF32(getGlyphCollection(), utf32)) {
  113.                 //生成字符集的纹理
  114.                 _fontAtlas->prepareLetterDefinitions(utf32);
  115.             }
  116.         }
  117. //        this->autorelease();
  118.     }
  120.     return _fontAtlas;
  121. }
  123. // A function used to load a single glyph into the glyph slot of a face object, 
  124. // according to its character code.
  125. unsigned char* FontFreeType::getGlyphBitmap(uint64_t theChar, long &outWidth, 
  126.                                             long &outHeight, Rect &outRect,
  127.                                             int &xAdvance){
  128.     ......
  129. }
  131. //设置字符集
  132. void FontFreeType::setGlyphCollection(GlyphCollection glyphs, const char* customGlyphs /* = nullptr */) {
  133.     _usedGlyphs = glyphs;
  134.     if (glyphs == GlyphCollection::CUSTOM) {
  135.         _customGlyphs = customGlyphs;
  136.     }
  137. }
  139. //获取字符集
  140. const char* FontFreeType::getGlyphCollection() const {
  141.     const char* glyphCollection = nullptr;
  142.     switch (_usedGlyphs) {
  143.     case cocos2d::GlyphCollection::DYNAMIC:
  144.         break;
  145.     case cocos2d::GlyphCollection::NEHE:
  146.         glyphCollection = _glyphNEHE;
  147.         break;
  148.     case cocos2d::GlyphCollection::ASCII:
  149.         glyphCollection = _glyphASCII;
  150.         break;
  151.     case cocos2d::GlyphCollection::CUSTOM:
  152.         glyphCollection = _customGlyphs.c_str();
  153.         break;
  154.     default:
  155.         break;
  156.     }
  157.     return glyphCollection;
  158. }

FontFnt

FontFreeType是通过FreeType引擎库动态解析轮廓字体生成精灵表来绘制文字。这个在渲染上有一定性能影响。
而FontFnt则将这一步工作由程序外部提前完成（GlyphDesigner工具），在创建的时候即由外部提供字符的精灵表，以及包含的字符的度量信息，这些数据都在一个.fnt文件中。
和FontFreeType相比，少了根据字符动态解析轮廓字体生成精灵表的过程，性能上要快，和绘制普通精灵差不多。但是可想而知，在灵活性上也打折扣，无法改变字体，包含的字符也有限，比如像汉字，我们不可能把所有的汉字字符都生成精灵表，那将占用很大内存，而且很多字符可能用不到，浪费内存。
优点是可以借助GlyphDesigner工具很方便的调整字体颜色、字体特效（发光、加粗、边框）。
image.png

  1. class CC_DLL FontFNT : public Font {
  2. public:
  3.     //创建的时候只需要提供.fnt文件，包含字符的精灵表以及字符的度量信息。
  4.     static FontFNT * create(const std::string& fntFilePath, const Vec2& imageOffset = Vec2::ZERO);
  6. protected:
  7.     BMFontConfiguration * _configuration;
  8.     Vec2                   _imageOffset;
  9.     //User defined font size
  10.     float  _fontSize;
  11. };
  13. // 全局缓存了.fnt的配置数据
  14. static Map<std::string, BMFontConfiguration*>* s_configurations = nullptr;
  16. FontFNT * FontFNT::create(const std::string& fntFilePath, 
  17.                           const Vec2& imageOffset /* = Vec2::ZERO */) {
  19.     //加载的.fnt配置数据
  20.     BMFontConfiguration *newConf = FNTConfigLoadFile(fntFilePath);
  22.     // 加载字符的精灵表
  23.     Texture2D *tempTexture = Director::getInstance()->getTextureCache()->addImage(newConf->getAtlasName());
  25.     ......
  26. }
  28. FontAtlas * FontFNT::createFontAtlas() {
  30.     FontAtlas *tempAtlas = new (std::nothrow) FontAtlas(*this);
  31.     if (tempAtlas == nullptr)
  32.         return nullptr;
  35.     for (auto&& e : _configuration->_fontDefDictionary) {
  36.         BMFontDef& fontDef = e.second;
  38.         FontLetterDefinition tempDefinition;
  39.         ......
  40.         //LetterDefinition：字符在精灵表中的位置等信息。
  41.         tempAtlas->addLetterDefinition(fontDef.charID,tempDefinition);
  42.     }
  44.     // add the texture (only one texture for now)
  45.     Texture2D *tempTexture = Director::getInstance()->getTextureCache()
  46.         ->addImage(_configuration->getAtlasName());
  47.     ......    
  48.     // add the texture
  49.     tempAtlas->addTexture(tempTexture, 0);
  50.     ......
  51. }
  53. //.fnt文件的数据
  54. class CC_DLL BMFontConfiguration : public Ref {
  55.     // FIXME: Creating a public interface so that the bitmapFontArray[] is accessible
  56. public://@public
  57.     // BMFont definitions
  58.     std::unordered_map<int /* key */, BMFontDef /* fontDef */> _fontDefDictionary;
  60.     //! FNTConfig: Common Height Should be signed (issue #1343)
  61.     int _commonHeight;
  62.     //! Padding
  63.     BMFontPadding    _padding;
  64.     //! atlas name
  65.     std::string _atlasName;
  66.     //! values for kerning
  67.     std::unordered_map<uint64_t /* key */, int /* amount */> _kerningDictionary;
  69.     // Character Set defines the letters that actually exist in the font
  70.     std::set<unsigned int> *_characterSet;
  71.     //! Font Size
  72.     int _fontSize;
  73. }

编辑工具

Bitmap Font编辑工具

  • http://glyphdesigner.71squared.com/ (Commercial, Mac OS X)
  • http://www.n4te.com/hiero/hiero.jnlp (Free, Java)
  • http://slick.cokeandcode.com/demos/hiero.jnlp (Free, Java)

  • http://www.angelcode.com/products/bmfont/ (Free, Windows only)

    FontCharmap

    FontFnt相对于FontFreeType，简化了生成字符精灵表和度量信息的过程。根据度量信息和精灵表来绘制文字。
    而FontCharmap相对于FontFnt则更进一步简化，简化在度量信息上，每个字符的尺寸相等，字符都是整齐的并列排列，并没有上面复杂的字符度量信息，这样几乎就没有度量信息的解析工作，只需要一张字符的精灵表和字符的大小就可以了，设定精灵表中第一个字符的索引值，只需要按照索引偏移值即可获得指定字符的纹理。 ```cpp class FontCharMap : public Font {
    public: static FontCharMap * create(const std::string& charMapFile, //精灵表文件

    1.                           int itemWidth,                         //字符尺寸，即精灵表中元素尺寸
    2.                           int itemHeight, 
    3.                           int startCharMap);                    //第一个字符的索引值
    4.                                                               //即精灵表中的第一个元素索引值

    static FontCharMap create(Texture2D texture, 

    1.                           int itemWidth, 
    2.                           int 
    3.                           itemHeight, 
    4.                           int startCharMap);

    //也可以通过plist配置文件来加载，它里面其实就包含了上面参数的信息。 static FontCharMap * create(const std::string& plistFile); };

FontAtlas FontCharMap::createFontAtlas() { FontAtlas tempAtlas = new (std::nothrow) FontAtlas(*this);

  1. FontLetterDefinition tempDefinition;
  2. ......
  3. int charId = _mapStartChar;
  4. for (int row = 0; row < itemsPerColumn; ++row) {
  5.     for (int col = 0; col < itemsPerRow; ++col) {
  6.         ......
  7.         tempAtlas->addLetterDefinition(charId, tempDefinition);
  8.     }
  9. }
  10. tempAtlas->addTexture(_texture,0);
  11. return tempAtlas;

}

  1. <a name="F5E0N"></a>
  2. ## FontAtlasCache
  3. 由FontAtlasCache统一管理FontAtlas，就像TextureCache管理Texture一样。如果FontAtlas已存在，就直接返回，否则创建FontAtlas实例。
  4. ```cpp
  5. class CC_DLL FontAtlasCache
  6. {  
  7. public:
  8.     //获取/创建TTF的FontAtlas
  9.     static FontAtlas* getFontAtlasTTF(const _ttfConfig* config);
  11.     //获取/创建.fnt的FontAtlas
  12.     static FontAtlas* getFontAtlasFNT(const std::string& fontFileName, const Vec2& imageOffset = Vec2::ZERO);
  14.     //获取/创建charmap的FontAtlas
  15.     static FontAtlas* getFontAtlasCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
  16.     static FontAtlas* getFontAtlasCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
  17.     static FontAtlas* getFontAtlasCharMap(const std::string& plistFile);
  19.     static bool releaseFontAtlas(FontAtlas *atlas);
  21.     /** Removes cached data.
  22.      It will purge the textures atlas and if multiple texture exist in one FontAtlas.
  23.      */
  24.     static void purgeCachedData();
  26.     /** Release current FNT texture and reload it.
  27.      CAUTION : All component use this font texture should be reset font name, though the file name is same!
  28.                otherwise, it will cause program crash!
  29.     */
  30.     static void reloadFontAtlasFNT(const std::string& fontFileName, const Vec2& imageOffset = Vec2::ZERO);
  32.     /** Unload all texture atlas texture create by special file name.
  33.      CAUTION : All component use this font texture should be reset font name, though the file name is same!
  34.                otherwise, it will cause program crash!
  35.     */
  36.     static void unloadFontAtlasTTF(const std::string& fontFileName);
  38. private:
  39.     // key:        字体文件的全路径+其他参数的合成
  40.     //            它唯一确定了FontAtlas，即key不同，那将使用全新的FontAtlas
  41.     //            比如TTF文字，绘制的文字尺寸不同也将导致key不同，而创建新的FontAtlas，进而导致创建新的纹理！
  42.     //            所以使用TTF字体时，要尽量少使用不同尺寸的文字。
  43.     // value:     对应创建的FontAtlas字符纹理集（精灵表集）
  44.     static std::unordered_map<std::string, FontAtlas *> _atlasMap;
  45. };
  47. FontAtlas* FontAtlasCache::getFontAtlasTTF(const _ttfConfig* config) {
  49.     //ttf字体文件路径
  50.     auto realFontFilename = FileUtils::getInstance()->getNewFilename(config->fontFilePath);  // resolves real file path, to prevent storing multiple atlases for the same file.
  52.     //从下面我们可以看到，生成ttf的key的因子。
  53.     //key = useDistanceField + fontSize + outlineSize + realFontFilename组成
  54.     //上面的任意一个因素的不同，都将导致创建不同的FontAtlas。
  55.     std::string key;
  56.     char keyPrefix[ATLAS_MAP_KEY_PREFIX_BUFFER_SIZE];
  57.     snprintf(keyPrefix, ATLAS_MAP_KEY_PREFIX_BUFFER_SIZE, useDistanceField ? 
  58.              "df %.2f %d " : "%.2f %d ", config->fontSize, config->outlineSize);
  59.     std::string atlasName(keyPrefix);
  60.     atlasName += realFontFilename;
  62.     auto it = _atlasMap.find(atlasName);
  64.     if ( it == _atlasMap.end() ) {
  65.         auto font = FontFreeType::create(realFontFilename, config->fontSize, config->glyphs,
  66.             config->customGlyphs, useDistanceField, config->outlineSize);
  67.         ......
  68.         auto tempAtlas = font->createFontAtlas();
  69.         ......
  70.         }
  71.     }
  72.     else
  73.         return it->second;
  75.     return nullptr;
  76. }
  78. FontAtlas* FontAtlasCache::getFontAtlasFNT(const std::string& fontFileName, 
  79.                                            const Vec2& imageOffset /* = Vec2::ZERO */) {
  81.     // 从下面我们可以看出，FNT文字的key的参考因子
  82.     // key = imageOffset + realFontFilename
  83.     // imageOffset用于计算字符在精灵表中的坐标（FontLetterDefinition）
  84.     char keyPrefix[ATLAS_MAP_KEY_PREFIX_BUFFER_SIZE];
  85.     snprintf(keyPrefix, ATLAS_MAP_KEY_PREFIX_BUFFER_SIZE, "%.2f %.2f ", imageOffset.x, imageOffset.y);
  86.     std::string atlasName(keyPrefix);
  87.     atlasName += realFontFilename;
  89.     auto it = _atlasMap.find(atlasName);
  90.     if ( it == _atlasMap.end() ) {
  91.         auto font = FontFNT::create(realFontFilename, imageOffset);
  92.         ......
  93.         auto tempAtlas = font->createFontAtlas();
  94.         ......
  95.     }
  96.     else
  97.         return it->second;
  99.     return nullptr;
  100. }
  102. FontAtlas* FontAtlasCache::getFontAtlasCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap) {
  103.     //charmap比简单，不多做解释
  104.     char key[ATLAS_MAP_KEY_PREFIX_BUFFER_SIZE];
  105.     sprintf(key,"name:%u_%d_%d_%d",texture->getName(),itemWidth,itemHeight,startCharMap);
  106.     std::string atlasName = key;
  108.     auto it = _atlasMap.find(atlasName);
  109.     if ( it == _atlasMap.end() ) {
  110.         auto font = FontCharMap::create(texture,itemWidth,itemHeight,startCharMap);
  111.         ......
  112.         auto tempAtlas = font->createFontAtlas();
  113.         ......
  114.     }
  115.     else
  116.         return it->second;
  118.     return nullptr;
  119. }

Label

通过前面的学习我们已经知道，绘制文字的本质就是绘制Sprite精灵，很多的文字字符的纹理组成一张大的纹理（精灵表），这里我们就很自然的想到，如果绘制的文字字符的纹理都在一张大纹理上，岂不是可以利用SpriteBatchNode大大提高效率？答案是很明显的，cocos确实采用了这种方案。

  1. class Label : public Node {
  2.     ......
  3. protected:
  4.     ......
  5.     Vector<SpriteBatchNode*> _batchNodes;
  6.         // 一个SpriteBatchNode下的所有Sprite共享同一个Texture
  7.         // 为什么是数组不是就一个？因为可能字符尺寸太大或者数量太多，而分成了多张精灵表。
  8.         // 这种情况针对的是TTF字体，即动态生成的轮廓字体。
  9.     ......
  10. }
  12. void Label::onDraw(const Mat4& transform, bool /*transformUpdated*/) {
  13.     ......
  14.     for (auto&& batchNode : _batchNodes) {
  16.         //每个SpriteBatchNode绘制同一张精灵表中部分文字。
  17.         batchNode->getTextureAtlas()->drawQuads();
  18.     }
  19. }

创建方法

  1. class Label : public Node {
  3.     // Allocates and initializes a Label, base on platform-dependent API
  4.     // 这是底层调用了platform平台的API创建字符纹理。
  5.     static Label* createWithSystemFont(const std::string& text, const std::string& font, float fontSize,
  6.         const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
  7.         TextVAlignment vAlignment = TextVAlignment::TOP);
  9.     // Allocates and initializes a Label, base on FreeType2
  10.     // True Type Font绘制文字。
  11.     static Label * createWithTTF(const std::string& text, const std::string& fontFilePath, float fontSize,
  12.         const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
  13.         TextVAlignment vAlignment = TextVAlignment::TOP);
  15.     // 同上
  16.     static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, 
  17.         TextHAlignment hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0);
  19.     // FontFnt文字，
  20.     static Label* createWithBMFont(const std::string& bmfontPath, const std::string& text,
  21.         const TextHAlignment& hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0,
  22.         const Vec2& imageOffset = Vec2::ZERO);
  24.     // FontCharmap文字
  25.     static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
  26.     static Label * createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
  27.     static Label * createWithCharMap(const std::string& plistFile);
  28. }

createWithSystemFont

系统字体和TTF、Bitmap Font、Charmap不同，它是由通过系统API直接返回一张指定文字字符的纹理，这比charmap都简单，只有一张字符的纹理，直接进行绘制就行了，同时也就限制了很多功能，比如文字特效等。

  1. void Label::updateContent() {
  2.     if (_systemFontDirty) {
  3.         //系统字体并不是走SpriteBatchNode路线。
  4.         if (_fontAtlas) {
  5.             _batchNodes.clear();
  6.             CC_SAFE_RELEASE_NULL(_reusedLetter);
  7.             FontAtlasCache::releaseFontAtlas(_fontAtlas);
  8.             _fontAtlas = nullptr;
  9.         }
  10.         _systemFontDirty = false;
  11.     }
  13.     ......
  14.     else {
  15.         auto fontDef = _getFontDefinition();
  16.         // 直接就是创建了一个Sprite
  17.         createSpriteForSystemFont(fontDef);
  18.         if (_shadowEnabled) {
  19.             createShadowSpriteForSystemFont(fontDef);
  20.         }
  21.     }
  23. void Label::createSpriteForSystemFont(const FontDefinition& fontDef) {
  24.     //STRING_TEXTURE：表示调用底层系统API，根据文字符创建一张它的纹理。
  25.     _currentLabelType = LabelType::STRING_TEXTURE;
  27.     auto texture = new (std::nothrow) Texture2D;
  29.     // 比如显示文字 abc，通过这一句就创建了一张abc字样的纹理，直接绘制即可
  30.     // 这里调用了底层系统API，所以这是平台相关的（IOS、Android、Windows）
  31.     texture->initWithString(_utf8Text.c_str(), fontDef);
  33.     _textSprite = Sprite::createWithTexture(texture);
  34.     ......
  35. }
  37. void Label::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags) {
  38.     ......
  39.     if (_systemFontDirty || _contentDirty) {
  40.         updateContent();
  41.     }
  42.     ......
  43.     if (!_children.empty()) {
  44.         ......        
  45.         this->drawSelf(visibleByCamera, renderer, flags);
  46.         ......            
  47.     }
  48.     else {
  49.         this->drawSelf(visibleByCamera, renderer, flags);
  50.     }
  51.     ......
  52. }
  54. void Label::drawSelf(bool visibleByCamera, Renderer* renderer, uint32_t flags) {
  55.     if (_textSprite) {    
  57.         //系统字体，其实就是绘制这个_textSprite精灵节点
  59.         if (_shadowNode) {
  60.             _shadowNode->visit(renderer, _modelViewTransform, flags);
  61.         }
  62.         _textSprite->visit(renderer, _modelViewTransform, flags);
  63.     }
  64.     ......
  65. }

Label常用API

待完成，这只是API的调用，日后再补充完善。