【教程分享】Cocos2dx 3.0 -- 有freeType做靠山的Label

cocos2dx 3.0版本之前，我們一直都是用CCLabelTTF，CCLabelBMFont,CCLabelAtlas來創建文本標籤，但是！3.0版本放出來後...看到這裏你心裏是不是又顫抖了一下？別害怕嘛，我要說的是：3.0版本出來後這些標籤也都是還可以用的啦，只是說我們有了更好的選擇。

cocos2dx3.0添加了一種新的文本標籤，這種標籤不同的地方有：使用freetype來使它在不同的平臺上有相同的視覺效果；由於使用更快的緩存代理，它的渲染也將更加快速；同時它還提供了繪邊、陰影等特性。

所以因爲Label，我決定離開LabelTTF和LabelBMFont（這個開頭你猜到了麼？）
---------------------------------------------------
常用的接口一覽（因爲很多接口都與LabelTTFT等一樣，所以就列一些我所瞭解的“異類”）
<pre class="brush:cpp; toolbar: true; auto-links: false;">//創建普通的文本標籤，效果和CCLabelTTF::create(...);一樣。TTFConfig是什麼？下面會介紹
static Label * create(const std::string& text, const std::string& fontName, float fontSize,
        const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);

//通過讀取TTFConfig配置的方式創建標籤，
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = TextHAlignment::LEFT, int lineWidth = 0);

//使用.fnt的方式創建標籤，類似CCLabelBMFont:create();    
static Label* createWithBMFont(const std::string& bmfontFilePath, const std::string& text,
        const TextHAlignment& alignment = TextHAlignment::LEFT, int lineWidth = 0, 
        const Point& imageOffset = Point::ZERO);

//使用.png的方式創建標籤，類似CCLabelAtlas::create();
static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);

virtual void enableShadow(const Color3B& shadowColor = Color3B::BLACK,const Size &offset = Size(2,-2), float opacity = 0.75f, int blurRadius = 0);
virtual void enableOutline(const Color4B& outlineColor,int outlineSize = -1);//只支持TTF
virtual void enableGlow(const Color3B& glowColor);//只支持 TTF 

virtual void disableEffect();//取消所有特效

//特效的種類有一下四種：
enum class LabelEffect {

    NORMAL, //普通標籤（純粹的、脫離了低級趣味的label）
    OUTLINE, //文藝標籤（有描邊）
    SHADOW, //2B標籤  （有陰影）
    GLOW //土豪標籤（有熒光）

};</pre>稍微提一下一個新東西：TTFConfig
<pre class="brush:cpp; toolbar: true; auto-links: false;">//TTFConfig 是一個結構體，裏面包含了你要創建一個ttf的label常用配置，如下所示
typedef struct _ttfConfig
{
    std::string fontFilePath;   //文件路徑
    int fontSize;     //字體大小，默認12
    GlyphCollection glyphs;     //使用的字符集，默認DYNAMIC
    const char *customGlyphs;   //呵呵
    bool distanceFieldEnabled;  //我對這個的理解是：是否讓文字顯得緊湊？默認爲false
int outlineSize;   //字體描邊的大小，默認爲0

//構造函數
    ...
//注意：當outlineSize初始化的值大於0時，distanceFieldEnabled則爲false
}TTFConfig;

//GlyphCollection有四種類型：
enum class GlyphCollection {
    DYNAMIC,
    NEHE,
    ASCII,
    CUSTOM
};</pre>下面簡單介紹Label的用法

1、使用.ttf
1）創建

複製代碼

1. TTFConfig config2("fonts/Marker Felt.ttf",30);//初始化TTFConfig，第一個參數爲字庫的路徑，第二個參數爲字體大小
   auto label2 = Label::createWithTTF(config2,"createWithTTF",TextHAlignment::LEFT);//創建label，並向左對其
   label2->setPosition(Point(visibleSize.width/2,300));
   label2->setAnchorPoint(Point::ANCHOR_MIDDLE);//設置錨點居中
   this->addChild(label2,2);

當然了，也可以用Label創建普通的標籤，效果和用CCLabelTTF::create()的一樣

複製代碼

1. auto label4 = Label::create("create","Marker Felt",30);//

效果如圖所示：

2）另字體看起來緊湊點，也就是設置distanceFieldEnabled = true
直接修改config裏的distanceFieldEnabled，方式如下：

複製代碼

1. TTFConfig config2("fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五個參數爲true

3）設置glow（熒光）效果，（我也不知道該怎麼描述glow這詞...）

複製代碼

1. label2->enableGlow(Color3B::GREEN);//熒光顏色爲綠色
   

效果如圖所示。這裏有個地方要注意下，想要顯示熒光效果，必須令distanceFieldEnabled = true，否則看不到效果。

4）設置描邊

複製代碼

1. label2->enableOutline(Color4B(255,125,0,255),8);//第一個參數爲描邊的顏色，第二個參數爲描邊的大小

效果如圖所示。注意，使用描邊效果後，distanceFieldEnabled 將變成 false，這也意味着在有描邊的情況下是顯示不了熒光效果的（我想太多了...)

5）設置陰影

複製代碼

1. label2->enableShadow(Color3B::RED,Size(2,-2),0.2,0.5);//第一個參數爲陰影顏色，第二個參數爲陰影相對於標籤的座標，第三個參數設置透明度，第四個參數與模糊有關
   

2、使用.fnt 的label
1）創建

複製代碼

1. auto label3 = Label::createWithBMFont("fonts/bitmapFontTest.fnt", "createWithBMFont");
   label3->setPosition(Point(visibleSize.width/2,250));
   label3->setAnchorPoint(Point::ANCHOR_MIDDLE);
   this->addChild(label3,2);
   label3->enableShadow();
   

[attachment=67602] 
2）設置陰影（描邊和熒光只能用在.ttf 上）

複製代碼

1. label3->enableShadow(Color3B::RED);

效果如圖，可以與上圖對比一下。
[attachment=67603] 
3、使用.png
加入我們有這麼一張圖，使用方法如下：
[attachment=67604] 
1）創建

複製代碼

1. auto label4= Label::createWithCharMap("fonts/costFont.png",30,44,'/');//參數分別爲：路徑;每個字符的寬和高，起始字符
   label4->setPosition(Point(visibleSize.width/2,200));
   label4->setAnchorPoint(Point::ANCHOR_MIDDLE);
   label4->setString("10");//設置顯示的內容爲”10“this->addChild(label4,2);

[attachment=67605] 
2）設置陰影

複製代碼

1. label4->enableShadow(Color3B::RED);

[attachment=67606] 
4、取消所有特效

複製代碼

1. label->disableEffect();//取消所有特效

恩，就介紹到這裏。具體的用法可以參考testCpp。這篇博文內容雖比較簡單，但卻是極耗精力的....