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使用圖片自定義字體（無需字體文件）