cocos2dx[2.x](1)--字體標籤CCLabel

原創 YCHK 2020-02-22 05:43

【嘮叨】
CCLabelTTF、CCLabelAtlas、CCLabelBMFont。
cocos2dx提供了三種文字字體的顯示：CCLabelTTF（一般字體）、CCLabelAtlas（自定義字體）、CCLabelBMFont（自定義字體）。接下來給大家講講這三種字體的使用方法。
【Demo下載】 https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E5%AD%97%E4%BD%93%E6%A0%87%E7%AD%BECCLabel
【3.x】
請移步：http://shahdza.blog.51cto.com/2410787/1560612

【CCLabelTTF】
CCLabelTTF是最簡單且使用最方便的字體類，可以使用.ttf格式的字體。其父類爲CCSprite，所以也繼承了CCSprite所有的操作，故也可以將其當做CCSprite來用。
CCLabelTTF每次調用 setString（即改變文字）的時候，一個新的OpenGL紋理將會被創建。這意味着setString和創建一個新的標籤一樣慢。所以，當你需要頻繁的更新顯示的文字內容的時候，儘可能不去使用該對象，而是使用CCLabelAtlas或者是CCLabelBMFont。

1、常用操作

class CC_DLL CCLabelTTF : public CCSprite, public CCLabelProtocol
{
/**
 *     創建CCLabelTTF的三種方法
 */
    //create(要顯示的字符串,字體名稱.ttf,字體大小);
    //create(要顯示的字符串,字體名稱.ttf,字體大小,尺寸大小CCSize,水平對其方式)
    //create(要顯示的字符串,字體名稱.ttf,字體大小,尺寸大小CCSize,水平對其方式,垂直對齊方式)
    static CCLabelTTF* create(const char *string, const char *fontName, float fontSize);
    static CCLabelTTF* create(const char *string, const char *fontName, float fontSize, const CCSize& dimensions, CCTextAlignment hAlignment);
    static CCLabelTTF* create(const char *string, const char *fontName, float fontSize, const CCSize& dimensions, CCTextAlignment hAlignment, CCVerticalTextAlignment vAlignment);


/**
 *     屬性設置
 *     setString , 
 *     setHorizontalAlignment , setVerticalAlignment , 
 *     setDimensions , setFontSize , setFontName
 */
    //顯示的字符串內容
    void setString(const char *label);
    const char* getString(void);

    //水平對齊方式CCTextAlignment::
        //kCCTextAlignmentLeft             左對齊
        //kCCTextAlignmentCenter           居中，默認方式
        //kCCTextAlignmentRight            右對齊
    void setHorizontalAlignment(CCTextAlignment alignment);
    CCTextAlignment getHorizontalAlignment();

    //垂直對齊方式CCVerticalTextAlignment::
        //kCCVerticalTextAlignmentBottom   底部
        //kCCVerticalTextAlignmentCenter   中心
        //kCCVerticalTextAlignmentTop      頂部，默認方式
    void setVerticalAlignment(CCVerticalTextAlignment verticalAlignment);
    CCVerticalTextAlignment getVerticalAlignment();

    //尺寸大小
    void setDimensions(const CCSize &dim);
    CCSize getDimensions();

    //字體大小
    void setFontSize(float fontSize);
    float getFontSize();

    //字體類型名 如Arial,宋體等
    void setFontName(const char *fontName);
    const char* getFontName();


/**
 *     繼承自CCSprite常用函數
 *     更多操作見：http://shahdza.blog.51cto.com/2410787/1539567
 */
    setColor(ccColor3B);  //設置顏色
    setPosition(CCPoint); //設置位置
    setRotation(float);   //旋轉角度,角度制0~360
    setOpacity(float);    //設置透明度
    setScale(float);      //放縮
    setFlipX(float);      //左右翻轉
}

2、代碼舉例

    bool HelloWorld::init()
    {
        if ( !CCLayer::init() )return false;

    //獲取可視區域尺寸大小
        CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();
    //獲取可視區域的原點位置
        CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
    //屏幕正中心位置
        CCPoint midPos = ccp(mysize.width/2, mysize.height/2);

    //創建CCLabelTTF的三種方法
        CCLabelTTF* lb1 = CCLabelTTF::create("aaaaaaaa", "arial", 20);
        CCLabelTTF* lb2 = CCLabelTTF::create("bbbbbbbb", "宋體", 40, CCSizeMake(50,100), CCTextAlignment::kCCTextAlignmentCenter);
        CCLabelTTF* lb3 = CCLabelTTF::create("cccccc", "黑體", 40, CCSizeMake(480,320), CCTextAlignment::kCCTextAlignmentRight, CCVerticalTextAlignment::kCCVerticalTextAlignmentBottom);

    //設置位置,屏幕中心
        lb1->setPosition( midPos );
        lb2->setPosition( midPos );
        lb3->setPosition( midPos );

    //添加到HelloWorld層中
        this->addChild(lb1);
        this->addChild(lb2);
        this->addChild(lb3);

    //其他操作
        lb1->setColor( ccc3(255, 0, 0) ); //設置顏色ccc3
        lb1->setRotation(60.0f);          //旋轉
        lb2->setColor( cocos2d::ccBLUE ); //設置顏色ccBLUE
        lb3->setString("hello world!");   //設置文字內容
    }

3、運行結果
這裏寫圖片描述

4、分析與總結
（1）lb2由於設置了其尺寸大小爲CCSizeMake(50,100)，所以只顯示了一部分的內容。
（2）lb3的對齊方式爲右下角顯示。
（3）CCLabelTTF的錨點爲（0.5,0.5）。

【CCLabelAtlas】
CCLabelAtlas一般常用來顯示數字信息，如分數、排名等。因爲只是數字所以也犯不上使用CCLabelBMFont加載那麼大的文字圖像，所以使用這個比較合適。而資源一般來自一張.png圖片，或.plist文件。不過它也可以用來顯示其他字符，如英文字符。
當然CCLabelAtlas繼承於CCNode類，故可以使用父類的一些函數，如：放縮、旋轉等操作。
並且圖片中每個字符的大小必須是固定的，若要改變字體大小，只能通過放縮來實現。
例如如下圖數字圖片資源：
這裏寫圖片描述

1、常用操作

class CC_DLL CCLabelAtlas : public CCAtlasNode, public CCLabelProtocol
{
/**
 *     創建CCLabelAtlas字體方法
 */
    //create(要顯示的數字串,數字資源圖片png,每個數字的寬,每個數字的高,圖片第一個是什麼數字)
    //從圖片中從左到右，一塊一塊截取。從數字startCharMap開始一一對應。
    //第一塊小圖片對應數字startCharMap；第二塊小圖片對應數字startCharMap+1；第三塊對應startCharMap+2 …… 以此類推。
    //注意：startCharMap爲ASCII碼，即數字'0'爲48。
    static CCLabelAtlas * create(const char *string, const char *charMapFile, unsigned int itemWidth, unsigned int itemHeight, unsigned int startCharMap);


/**
 *     設置字符串內容
 *     注意：內容的文字必須是資源圖片中存在的纔可以！！！
 */
    void setString(const char *label);
    const char* getString(void);
};

2、代碼舉例

    //創建CCLabelTTF的方法
    CCLabelAtlas* lb4 = CCLabelAtlas::create("20140815", "fonts/digit.png", 20, 20, '0');
    //設置位置
    lb4->setPosition(midPos);
    //添加到HelloWorld層中
    this->addChild(lb4);

3、運行結果
這裏寫圖片描述

4、分析與總結
（1）CCLabelAtlas使用的圖片資源的每塊字符的大小必須是固定的，不然會出錯。
（2）CCLabelAtlas常常用來顯示數字信息，如分數、排名等。但也可以用來顯示英文字母。
（3）要改變字體大小，只能通過setScale進行放縮。
（4）錨點爲（0,0）。

【CCLabelBMFont】
CCLabelBMFont文字是最快速最自由的字體類。
CCLabelBMFont的父類是CCSpriteBatchNode，特色就是以佔用更多內存爲代價加快標籤的更新，這與其他任何CCSprite類相似。CCLabelBMFont相當於每次改變只改變了圖片座標，而CCLabelTTF要重新渲染。
這個類使用之前，需要添加好字體文件，包括一個圖片文件（.png）和一個字體座標文件（.fnt），這兩個文件名稱必須一樣。可以下載一個fnt編輯工具來自定義字體。
值得注意的是：它的每個字母或符號都是單獨的一個CCSprite精靈，可以使用getChildByTag(i)來獲取第i個位置上的字符，來對每個字符單獨設置屬性、動作等。
這個類沒辦法指定字體的字號，但可以用Scale屬性進行縮放來調整大小。

1、常用操作

class CC_DLL CCLabelBMFont : public CCSpriteBatchNode, public CCLabelProtocol, public CCRGBAProtocol
{
/**
 *     創建CCLabelBMFont方法
 */
    //create(要顯示的字符串,字體資源名稱.fnt)
    static CCLabelBMFont * create(const char *str, const char *fntFile);


/**
 *     屬性設置
 *     setFntFile , setString ,
 *     setAnchorPoint , setAlignment , setWidth ,
 *     setScale , setColor , setOpacity
 */
    //設置字體資源名稱.fnt
    void setFntFile(const char* fntFile);
    const char* getFntFile();

    //設置內容
    virtual void setString(const char *newString);
    virtual const char* getString(void);

    //設置錨點
    virtual void setAnchorPoint(const CCPoint& var);

    //水平對齊方式CCTextAlignment::
        //kCCTextAlignmentLeft      左對齊
        //kCCTextAlignmentCenter    居中
        //kCCTextAlignmentRight     右對齊
    virtual void setAlignment(CCTextAlignment alignment);

    //設置寬度? 可是我用了好像都不知道是什麼效果...
    virtual void setWidth(float width);

    //放縮
    virtual void setScale(float scale);
    virtual void setScaleX(float scaleX);
    virtual void setScaleY(float scaleY);

    //設置顏色
    virtual void setColor(const ccColor3B& color);
    virtual const ccColor3B& getColor(void);

    //透明度0~255，其中255爲不透明
    virtual void setOpacity(GLubyte opacity);
};

2、代碼舉例

    //創建兩個CCLabelBMFont字體
        CCLabelBMFont* lb5 = CCLabelBMFont::create("hello", "fonts/bitmapFontTest.fnt");
        CCLabelBMFont* lb6 = CCLabelBMFont::create("world", "fonts/bitmapFontTest.fnt");

    //設置位置
        lb5->setPosition( midPos );
        lb6->setPosition( midPos - ccp(0,100) );

    //添加到Layer層中
        this->addChild(lb5);
        this->addChild(lb6);

    //屬性設置
        lb5->setColor(ccRED);  //設置字體顏色爲紅色
        lb6->setString("abc"); //設置內容

    //獲取某個位置的字母,像精靈一樣使用
        CCSprite* lb5_c1 = (CCSprite*)lb5->getChildByTag(0); //獲取第0個字母h
        CCSprite* lb5_c2 = (CCSprite*)lb5->getChildByTag(3); //獲取第3個字母l
        lb5_c1->setColor(ccc3(0,255,0));                     //設置爲綠色
        lb5_c2->setScale(2.0f);                              //放大

3、運行結果
這裏寫圖片描述

4、分析與總結
（1）CCLabelBMFont的每個字符都是一個單獨的CCSprite精靈，可以對每個字符單獨進行設置。
（2）CCLabelBMFont的使用功能是CCLabel中最豐富最靈活的一個。
（3）錨點爲（0.5,0.5）。
轉載網址：http://blog.51cto.com/shahdza/1541002

YCHK
發佈了7 篇原創文章 · 獲贊 1 · 訪問量 7437
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

cocos2dx淺析幾個重要類

目錄 入口類main.cpp 主要控制類AppDelegate.cpp 對象類CCObject 節點類CCNode 導演類CCDirector 場景類CCScene 圖層類CCLayer 精靈類CCSprite 座

YCHK 2020-06-27 09:53:11

Cocos2dx知識點總結

1.Cocos2d-x繪圖API http://blog.csdn.net/w8320273/article/details/37816591 2.Bomb移動端後臺雲服務平臺 http://www.bmob.cn/ 報錯提示

John12138 2020-06-19 05:21:01

cocos2dx[2.x](2)--菜單按鈕CCMenu/CCMenuItem

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](14)--音樂音效SimpleAudioEngine

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](13)--基本繪圖DrawPrimitives

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](4)--觸碰事件Touch

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](8)--按鈕控件CCControlButton

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](9)--編輯框之一CCTextFieldTTF

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](6)--滑塊控件CCControlSlider

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](7)--點九圖CCScale9Sprite

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](10)--編輯框之二CCEditBox

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](11)--滾動視圖CCScrollView

YCHK 2020-02-22 05:43:35

cocos2dx[2.x](5)--開關按鈕CCControlSwitch

YCHK 2020-02-22 05:43:35

cocos2dx第一個程序HelloWorld

YCHK 2020-02-22 05:43:35

cocos Win32移植到Android

YCHK 2020-02-22 05:43:35