Cocos2dx遊戲教程（七）：“見縫插針”，Label標籤的使用

在創建第二場景中我們不僅看到了Menu的創建，其中是不是還有如下的創建方式啊？

//關卡數字
 auto levelTTF = Label::createWithCharMap("fonts/label/label_ball.png", 14, 20, '0');
 levelTTF->setString(StringUtils::format("%d", 1));
 levelTTF->setPosition(level->getContentSize() / 2);
 level->addChild(levelTTF);

是不是顯示如下圖裏面的數字呢？

那麼在這一節中將會主要介紹cocos2dx Label的創建方式。

一、Label介紹

cocos2dx 在3.x中，Label支持四種方式的標籤創建。並新增了陰影Shadow、輪廓Outline、發光Glow效果的支持。還支持文字內容的行間距、文字間距、自動換行的設置。

在3.x中，廢棄了2.x裏的CCLabelTTF、CCLabelAtlas、CCLabelBMFont三個字體類，取而代之的是全新的字體標籤Label。
實際上Label是將三個字體類進行了融合，進行統一的管理與渲染，這使得創建字體標籤Label的方式更加統一，更加方便。

如下圖所示，在3.x中支持如下四種創建方式，下面詳細的介紹下創建的方法。

二、Label的創建方式

1、createWithSystemFont
顧名思義，該字體的創建方式是通過系統字體創建
我們看一下函數原型

static Label* createWithSystemFont(const std::string& text, const std::string& font, float fontSize,
    	const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);

使用方式

auto label = Label::createWithSystemFont("hello", "Arial", 24);
label ->setPosition(100, 100);
this->addChild(label );

創建一個“hello”文本，使用“Arial”系統字體，字體大小是24
將label標籤設置在屏幕中（100，100）的位置
將label加入到this指代的對象上

2、createWithTTF
函數原型，有兩種方式哦

static Label * createWithTTF(const std::string& text, const std::string& fontFilePath, float fontSize,
        const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);
        
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, 
        TextHAlignment hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0);

使用方法，以第一個爲例，第二個構造下ttfConfig，和第一種是類似的

auto label = Label::createWithTTF("hello", "fonts/arial.ttf", 24);
label ->setPosition(100, 100);
this->addChild(label );

3、createWithBMFont
函數原型

static Label* createWithBMFont(const std::string& bmfontPath, const std::string& text,
        const TextHAlignment& hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0,
        const Vec2& imageOffset = Vec2::ZERO);

使用方法，

auto label = Label::createWithBMFont("font.fnt","hello");
label ->setPosition(100, 100);
this->addChild(label )

4、createWithCharMap
函數原型，有三種種方式哦

static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
static Label * createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
static Label * createWithCharMap(const std::string& plistFile);

（1）使用png創建，這個大家很熟悉吧，就是我們上面使用的創建方式

//關卡數字
 auto levelTTF = Label::createWithCharMap("fonts/label/label_ball.png", 14, 20, '0');
 levelTTF->setString(StringUtils::format("%d", 1));
 levelTTF->setPosition(level->getContentSize() / 2);
 level->addChild(levelTTF);

（2）使用紋理創建

Texture2D* texture = TextureCache::getInstance()->addImage("fonts/label/label_ball.png");
auto lable = Label::createWithCharMap(texture, 14, 20, '0');
lable->setString("1"); 
label ->setPosition(100, 100);
this->addChild(label )

（3）使用plist創建

auto lable = Label::createWithCharMap("fonts/label_ball.plist");
lable->setString("1");
label ->setPosition(100, 100);
this->addChild(label )

這裏的plist是一種文件格式，裏面記錄了用到字符的圖片名稱，每個字符的寬，高，起始位置，最常見的是第一種和第二種方式，大家可以嘗試用不同的方式使用哦。

通過本節的學習，是不是對Label有所瞭解了呢，下一節讓我們加載下游戲數據，關卡將會從文件中讀取顯示哦