Cocos2d-x 3.0final 终结者系列教程14-L新abel-Cocos2d-x公文

目 录

1. 新文本标签类Label
2. 其它文本标签
3. 字体制作工具使用介绍
4. 小结

https://github.com/chukong/cocos-docs/blob/master/manual/framework/native/v3/text-label/zh.md

欢迎大家斧正错误，提交PR。

在游戏开发中，文字起了很关键的数据。游戏介绍、游戏中的提示以及对话等都须要用到文字，Cocos2d-x中给文字渲染提供了灵活的机制。既能够用系统文字，也能够使用自己定义渲染字体。

另外。文本标签还可用来初始化菜单。

在开发中，我们最经常使用的4种文本标签是：Label, LabelAtlas, LabelTTF和LabelBMFont。当中3.0尤其提倡使用Lable取代LabelTTF和LabelBMFont，由于Label在渲染速度上较其快。下面我们具体解说下它们的用法。

新文本标签类Label

3.0中你能够使用Label类创建LabelTTF和LabelBMFont中随意一种标签，与他们2种不同的是。新标签类继承于SpriteBatchNode类，这样一来大大提高了渲染速度。

下面代码列举几种创建Label的方法：

auto newLabel1 = Label::create("New Label", "Arial", 30);
  auto newLabel2 = Label::createWithBMFont("bitmapFontTest.fnt", "New Label");
  newLabel1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
  newLabel2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));
  addChild(newLabel1);
  addChild(newLabel2);
  TTFConfig ttfConfig;
  ttfConfig.fontSize = 30;
  ttfConfig.fontFilePath = "Paint Boy.ttf";
  auto label2 = Label::createWithTTF(ttfConfig, "New Label");
  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y + 100));
  addChild(label2);

上面的样例中，我们使用新标签类创建了一个LabelTTF标签和LabelBMFont标签：

• create方法默认创建一个LabelTTF标签，參数也和创建LabelTTF标签一样
• createWithBMFont方法创建一个LabelBMFont标签，第一个參数为文件名称，第二个參数为要显示的内容
• createWithTTF方法使用.ttf文件来创建一个LabelTTF标签，须要注意的是要设置字体大小必须先配置好TTFConfig

其它文本标签

以上介绍了新标签类后，我们来看下曾经的标签类。虽然3.0使用了新标签类。可是为了向下兼容，一些曾经的标签类仍然能够使用。

图片文字LabelAtlas

LabelAtlas类是使用图片作为文字，该类直接使用图片初始化文字对象。此类支持两种文件类型来初始化：

• PNG文件
• plist文件

下面代码使用两种不同文件初始化一个文字对象：

auto label1 = LabelAtlas::create("PNG Test", "tuffy_bold_italic-charmap.png", 48, 64, ' ');
  label1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
  addChild(label1);

  auto label2 = LabelAtlas::create("Plist Test", "tuffy_bold_italic-charmap.plist");
  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));
  addChild(label2);

以下解释下LabelAtlas::create()的5个參数：

• 第一个參数：标签要显示的内容
• 第二个參数：图片资源的名称
• 第三个參数：每一个字符的宽度。这个是在制作图片的时候自己设置的。上面代码中的字符宽度为48px，是制图时确定的
• 第四个參数：每一个字符的高度，同理，我们使用的图的每一个字符高度为64px
• 第五个參数：開始字符，该參数帮助找到第一个字符

系统字体LabelTTF

LabelTTF类使用系统中自带的字体，假设创建LabelTTF对象时未给出字体名字或者给出的名字系统中不存在，则使用引擎默认字体初始化对象。

引擎提供两种方式创建LableTTF:

• 用LabelTTF类的create方法创建
• 用Label类的createWithTTF方法创建，可是Label类是通过.ttf文件来创建的

下面代码分别使用LabelTTF和Label来创建Label:

auto label1 = LabelTTF::create("Create with LabelTTF", "Arial", 30);
  label1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
  addChild(label1);

  TTFConfig ttfConfig;
  ttfConfig.fontSize = 30;
  ttfConfig.fontFilePath = "Paint Boy.ttf";
  auto label2 = Label::createWithTTF(ttfConfig, "Create with Label");  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));  addChild(label2);

字体图集LabelBMFont

LabelBMFont类是一个基于位图的字体图集。是一个包括全部你须要于坐标数据一起显示在屏幕上的字符的图像，它同意字符从主图中剪切出来。

下面代码用来创建LabelBMFont对象：

auto label = LabelBMFont::create("BMFont Test", "bitmapFontTest.fnt");
    label->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
    addChild(label);

字体制作工具使用介绍

Cocos2d-x支持很多使用fnt文件格式的位图字体。以下介绍下怎样使用Glyph Designer一款Mac下的字体设计器来创建字体图集（Windows下可使用Hiero和BMFont）：

• 步骤一：启动Glyph Designer,选择File->New，在左上的搜索框中键入须要的字体集名（这里使用”Helvetica”）
• 步骤二：设置字体尺寸为32，默认情况下Glyph Designer自己主动调整字体图集尺寸为最小可能值以适配全部可能的图像。

• 步骤三：在右边Glyph Fill里面选择颜色
• 步骤四：在Included Glyph里面点击NEHEbutton。在此区域键入你所须要用到的字符
• 步骤五：点击Export导出文件
• 步骤六：选择导出文件类型

下图展示了整个步骤

小结

在游戏开发中，标准字体不须要频繁更改时使用LabelTTF很合适。在须要定制文字或者在频繁改变文字内容时须要使用LabelBMFont。

但3.0的新标签类为你攻克了这个问题，你无须再考虑选择那种标签，仅仅需使用新标签类就可以。

文字标签类的另外一个作用是能够初始化菜单，关于菜单的使用方法在此不做具体解说，以下代码使用文字标签初始化菜单：

auto label = LabelBMFont::create("BMFont Test", "bitmapFontTest.fnt");
    auto menuItemLabel = MenuItemLabel::create(label);
    auto menu = Menu::create(menuItemLabel, NULL);
    menu->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));
    addChild(menu);