cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas

在 cocos2d-x 中有三个类能够在层或精灵中添加文字：

• LabelTTF
• LabelBMFont
• LabelAtlas

LabelTTF 直接支持使用 TTF 字库，能够支持所有的中文，可是效率稍低。LabelBMFont 适合显示特定的文字，经过预先将文字生成图片，提升了效率，可是不能支持所有中文。若是使用的文字很少，组合多，可是文字的编码是连续的，好比数字，或者英文字符，那么 LabelAtlas 更加适合你。

LabelTTF

先说 LabelTTF , TTF（TrueType Font) 是一种字库规范，是 Apple 公司和 Microsoft 公司共同推出的字体文件格式,随着windows的流行，已经变成最经常使用的一种字体文件表示方式。

在 Windows Phone 中使用的时候，咱们须要把字库文件保存在 Resources\fonts 文件夹下面，保证 Cocos2d-x 可以找到字体。下面咱们考虑在程序中使用字体 Consolas 显示一个字符串。

在系统文件夹 C:\Windows\Fonts 中找到 Consolas 字体，选中以后，进行复制。

复制到咱们 Resources\fonts 文件夹中。

特别说明：

在 Andiord 和 iOS 中，代码中经过字体的名称，而不是字体文件的名称来使用字体。可是，在 Windows Phone 中，却不使用真实的字体名称，而是使用字体文件的名称来使用字体。

咱们在前面复制过来的字体文件名称其实是 consola.ttf，为了在后面使用这种字体，你须要将字体文件的名称改成 consolas.ttf 。或者字体名称使用 Consola 。

代码中能够以下使用字体来建立标签。

LabelTTF *label = LabelTTF::create("exp:+1234567", "Consolas", 40);
label->setPosition(visibleSize.width / 2, visibleSize.height / 2);
addChild(label);

或者使用 TTFConfig ，好处是能够重复使用字体的配置信息，不用每次都指定字体名称和尺寸。

TTFConfig ttfConfig("fonts/Consolas.ttf", 24);
auto labelHello = Label::createWithTTF(ttfConfig, "Hello, TTFConfig");
labelHello->setPosition(visibleSize.width / 2, visibleSize.height / 2);
labelHello->setString("Reset String");
addChild(labelHello);

文字是如何显示在 UI 上的呢？实际上 Label 须要从字库中抽取字形，经过字形建立图片纹理，而后才能显示出来。若是字库比较大，好比说中文字库，咱们没有使用字库中全部的文字，那么一个几 M 的字库文件就很浪费空间了，每次的从新生成纹理就更加浪费资源。咱们能够考虑不使用字体文件，而直接准备好文字的图片直接显示在 UI 上。

LabelBMFont

LabelTTF 每次调用 setString （即改变文字）的时候，一个新的 OpenGL 纹理将会被建立.。这意味着setString 和建立一个新的标签同样慢。 因此，当你须要频繁的更新它们的时候，尽量的不用去使用标签对象。 LabelAtlas 或者 LabelBMFont 能够帮助咱们实现这种效果。

首先，咱们使用一个工具来帮助咱们从字库文件中抽取字形，生成咱们须要的图片，这个工具称为 Bitmap Font Generator，能够直接下载到。

如今有两个版本，咱们直接使用最新的 v1.14 beta 来处理。先安装一下。

 

 

 

 

下面启动起来

进行字体设定，咱们使用微软雅黑来支持一下中文。

在弹出的对话框中选择微软雅黑，进行具体的设置。

而后，打开记事本，建立一个文本文件，写入你但愿使用的文字，注意，在保存的使用要选择 Utf-8 格式。

而后，在 Bitmap font generator 的 Edit 菜单中，经过 Select chars form file 来选择你刚刚建立的文本文件，成功以后，你会在 Bitmap font generator 中看到你使用的文字已经被选中了。

如今，能够导出图片了。

看导出的对话框。

Padding，文字的内边框，或者理解为文字的周边留空要多大 作后期样式时这个属性很重要，须要预留空间来给描边、发光等特效使用 好比我预计个人样式要加一个2px的边框，而后加一个右下角2px的投影效果，因此我设定了padding:2px 4px 4px 2px

BitDepth，必须32位，不然没有透明层

Presets，字体初始化的预设的颜色通道设定，也就是说字体的初始颜色设定是什么样的，建议都用白色字，能够直接设定为White text with alpha，即白色字透明底。

Font descript，字体描述文件，可使用text或者xml 也就是fnt文件格式

Textures，纹理图片格式，果断png。

最后，导出图片文件。

终于可使用一下了。

首先，在资源中建立一个 xml 格式的 plist 文件，在其中定义咱们但愿显示的字符串。咱们将这个文件直接保存在 Resources 的目录之下，名为 string.xml.

<?xml version="1.0" encoding="utf-8" ?>
<plist version="1.0">
  <dict>
    <key>name</key>
    <string>你好，Microsoft 雅黑</string>
  </dict>
</plist>

将咱们刚刚生成的两个字体文件也复制到这个目录下。

CCDictionary *strings = CCDictionary::createWithContentsOfFile("string.xml");
const char *charchinese = ((CCString*)strings->objectForKey("name"))->getCString();
LabelBMFont *label = LabelBMFont::create(charchinese, "helloFont.fnt");
label->setPosition(visibleSize.width / 2, visibleSize.height / 2);
addChild(label);

运行程序，就能够看到咱们输出了，显示一样的文字，咱们仅仅须要一张 3.43k 的图片文件就能够了。

若是没法使用，能够查看一下ccConfig.h中的CC_FONT_LABEL_SUPPORT是否enable了。

CCLabelBMFont CCLabelBMFont 至关于每次改变只改变了图片坐标，而CCLabelTTF要从新渲染.这个类使用以前，须要添加好字体文件，包括一个图片文件 (**.png) 和一个 字体坐标文件 （**.fnt）。 在 cocos2d-x的示例项目中有现成的，能够先拿过来练习一下，找的时候注意两个文件的 名称是相同的，只是扩展名不一样。

这个没办法指定字体的字号，但能够用 scale 属性进行缩放来调整大小。就当它是sprite。

LabelAtlas 

若是你用cocos2d-x项目模板建立过项目，那么你已经看过它的效果了，就是左下角显示帧率的数字。 由于帧率一直在变，使用CCLabelTTF的话效率过低，由于只是数字因此也犯不上使用 CCLabelBMFont 加载那么大的文字图像，因此使用这个比较合适。

好比说，咱们准备显示 0-9 十个数字，咱们能够在一张图片中制做好这十个数字。每一个数字都有相同的宽度和高度。将它保存在资源中。别忘了设置复制。

 

比较重要的是，这十个数字要按照 ASCII 顺序排列，咱们要设置第一个字符的 ASCII 编码，这样，Cocos2d-x 就能够直接计算出不一样字符对应的图形了。

CCLabelAtlas* diceCount=CCLabelAtlas::labelWithString("1:", "nums_font.png", 14, 21, '0');

第一个参数：显示的内容：1x，你也许会奇怪为何是1x，由于使用的png图必须是连续的，由于程序内部是议连续的scall码识别的。9的后一位的”:“，因此先实现x就得用”:“代替。

第二个参数：图片的名字

第三个参数：每个数字的宽

第四个参数：每个数字的高

每五个数字：开始字符

LabelAtlas* diceCount = CCLabelAtlas::create("100:", "nums_font.png", 14, 21, '0');
diceCount->setPosition(Point(visibleSize.width - 150, visibleSize.height / 2 - 50));
addChild(diceCount);

 

附录：

Unity3D BMFont使用图片自定义字体（无需字体文件）