Cocos2d-x Lua中使用標籤

遊戲場景中的文字包括了靜態文字和動態文字。靜態文字以下圖所示遊戲場景中①號文字「COCOS2DX」，動態文字如圖4-1所示遊戲場景中的②號文字「Hello World」。
靜態文字通常是由美工使用Photoshop繪製在背景圖片上，這種方式的優勢是表現力很豐富，例如：①號文字「COCOS2DX」中的「COCOS」、「2D」和「X」設計的風格不一樣，而動態文字則不能，並且靜態文字沒法經過程序訪問，沒法動態修改內容。
動態文字通常是須要經過程序訪問，須要動態修改內容。Cocos2d-x Lua能夠經過標籤類實現。

場景中的文字

下面咱們重點介紹Cocos2d-x Lua中標籤類，Cocos2d-x Lua中標籤類主要有三種：LabelTTF、LabelAtlas和LabelBMFont。此外，在Cocos2d-x 3.x以後又推出了新的標籤類Label。
LabelTTF
LabelTTF是使用系統中的字體，它是最簡單的標籤類。LabelTTF類圖以下圖所示，能夠LabelTTF繼承了Node類，具備Node的基本特性。此外還實現了LabelProtocol接口。

LabelTTF類圖

若是咱們要展現圖中所示的Hello World文字，咱們可使用LabelTTF實現。

LabelTTF實現的Hello World文字

LabelTTF實現的Hello World文字主要代碼以下：

[html] view plaincopy

1. function GameScene:createLayer()  

2.   

3.   

4.     local layer = cc.Layer:create()  

5.     // 建立並初始化標籤  

6.     local label = cc.LabelTTF:create("Hello World", "Arial", 64)                        ①  

7.     label:setPosition(cc.p(size.width/2, size.height - label:getContentSize().height))  

8.   

9.   

10.     layer:addChild(label, 1)  

11.     local sprite = cc.Sprite:create("HelloWorld.png")      

12.     sprite:setPosition(cc.p(size.width/2,   

13.                                     size.height/2))  

14.     layer:addChild(sprite, 0)  

15.   

16.   

17.     return layer  

18. end  

上述代碼第①行是建立一個LabelTTF對象，create函數的第一個參數是要顯示的文字，第二個參數是系統字體名，第三個參數是字體的大小，事實上該create函數省略了三個參數，create函數的完整定義以下：

[html] view plaincopy

1. cc.LabelTTF:create (text,             

2.     fontName,   

3.     fontSize,   

4.     dimensions=cc.size(0,0),    --在屏幕上佔用的區域大小,cc.size(0,0)表示按照字體大小顯示  

5.     hAlignment= cc.TEXT_ALIGNMENT_LEFT,         -- 水平對齊,默認值是靠右對齊  

6.     vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP)     -- 垂直對齊,默認值是頂對齊  

其中後三個參數有默認值，若是不指定就會使用默認值。
LabelAtlas
LabelAtlas是圖片集標籤，其中的Atlas本意是「地圖集」、「圖片集」，這種標籤顯示的文字是從一個圖片集中取出的，所以使用LabelAtlas須要額外加載圖片集文件。LabelAtlas 比LabelTTF快不少。LabelAtlas 中的每一個字符必須有固定的高度和寬度。
LabelAtlas類圖以下圖所示，LabelAtlas間接地繼承了Node類，具備Node的基本特性，它還直接繼承了AtlasNode。此外還實現了LabelProtocol接口。

LabelAtlas類圖

若是咱們要展現圖中所示的Hello World文字，咱們可使用LabelAtlas實現。

LabelAtlas實現的Hello World文字

LabelAtlas實現的Hello World文字主要代碼以下：

[html] view plaincopy

1. function GameScene:createLayer()  

2.     local layer = cc.Layer:create()  

3.     local label = cc.LabelAtlas:_create("HelloWorld",   

4.                         "fonts/tuffy_bold_italic-charmap.png", 48, 66, string.byte(" "))                ①  

5.     label:setPosition(cc.p(size.width/2  - label:getContentSize().width / 2,  

6.                            size.height - label:getContentSize().height))  

7.     layer:addChild(label, 1)  

8.       

9.     local sprite = cc.Sprite:create("HelloWorld.png")      

10.     sprite:setPosition(cc.p(size.width/2, size.height/2))  

11.     layer:addChild(sprite, 0)  

12.   

13.   

14.     return layer  

15. end  

上述代碼第①行是建立一個LabelAtlas對象，create函數的第一個參數是要顯示的文字，第二個參數是圖片集文件（見如圖所示），第三個參數是字符高度，第四個參數是字符寬度，第五個參數是開始字符。

圖片集文件

使用LabelAtlas須要注意的是圖片集文件須要放置在Resources目錄下。
LabelBMFont
LabelBMFont是位圖字體標籤，須要添加字體文件：包括一個圖片集（.png）和一個字體座標文件（.fnt）。LabelBMFont比LabelTTF快不少。LabelBMFont中的每一個字符的寬度是可變的。
LabelBMFont類圖以下圖所示，能夠LabelBMFont間接地繼承了Node類，具備Node的基本特性，此外還實現了LabelProtocol接口。

LabelBMFont類圖

若是咱們要展現下圖所示的Hello World文字，咱們可使用LabelBMFont實現。

LabelBMFont實現的Hello World文字

LabelBMFont實現的Hello World文字主要代碼以下：

[html] view plaincopy

1. function GameScene:createLayer()  

2.     local layer = cc.Layer:create()  

3.     local label = cc.LabelBMFont:create("HelloWorld", "fonts/BMFont.fnt")               ①  

4.     label:setPosition(cc.p(size.width/2,  

5.                            size.height - label:getContentSize().height))     

6.     layer:addChild(label, 1)  

7.     local sprite = cc.Sprite:create("HelloWorld.png")      

8.     sprite:setPosition(cc.p(size.width/2, size.height/2))  

9.     layer:addChild(sprite, 0)  

10.     return layer  

11. end  

上述代碼第①行是建立一個LabelBMFont對象，create函數的第一個參數是要顯示的文字，第二個參數是圖片集文件。圖片集文件BMFont.fnt以下圖所示，對應還有一個字體座標文件BMFont.fnt。

圖片集文件

座標文件BMFont.fnt代碼以下：

[html] view plaincopy

1. info face="AmericanTypewriter" size=64 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2  

2. common lineHeight=73 base=58 scaleW=512 scaleH=512 pages=1 packed=0  

3. page id=0 file="BMFont.png"  

4. chars count=95  

5. char id=124 x=2 y=2 width=9 height=68 xoffset=14 yoffset=9 xadvance=32 page=0 chnl=0 letter="|"  

6. char id=41 x=13 y=2 width=28 height=63 xoffset=1 yoffset=11 xadvance=29 page=0 chnl=0 letter=")"  

7. char id=40 x=43 y=2 width=28 height=63 xoffset=4 yoffset=11 xadvance=29 page=0 chnl=0 letter="("  

8. ... ...  

9. char id=32 x=200 y=366 width=0 height=0 xoffset=16 yoffset=78 xadvance=16 page=0 chnl=0 letter="space"  

使用LabelBMFont須要注意的是圖片集文件和座標文件須要放置在Resources目錄下，文件命名相同。圖片集合和座標文件是能夠經過位圖字體工具製做而成的，因爲位圖字體工具的使用請參考本系列叢書的工具卷（《Cocos2d-x實戰：工具卷》）。
Cocos2d-x 3.x標籤類Label
Cocos2d-x 3.x後推出了新的標籤類Label，這種標籤經過使用FreeType[ FreeType庫是一個徹底免費（開源）的、高質量的且可移植的字體引擎，它提供統一的接口來訪問多種字體格式文件。——引自於百度百科 http://baike.baidu.com/view/4579855.htm
]來使它在不一樣的平臺上有相同的視覺效果。因爲使用更快的緩存代理，它的渲染也將更加快速。Label提供了描邊和陰影等特性。
Label類的類圖以下圖所示。

Label類圖

建立Label類靜態create函數經常使用的有以下幾個：

[html] view plaincopy

1. cc.Label:createWithSystemFont(text,                 -- 是要顯示的文字        

2.         font,                                                   -- 系統字體名  

3.         fontSize,                                       -- 字體的大小  

4.         dimensions = cc.size(0,0),                          -- 可省略，參考LabelTTF定義  

5.         vAlignment= cc.TEXT_ALIGNMENT_LEFT,             -- 可省略，參考LabelTTF定義  

6.         vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP      -- 可省略，參考LabelTTF定義  

7. )   

8.   

9.   

10. cc.Label:createWithTTF(const std::string & text,  

11.         fontFile,                                       -- 字體文件  

12.         fontSize,  

13.         dimensions = cc.size(0,0),                

14.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,   

15.         vAlignment= cc.VERTICAL_TEXT_ALIGNMENT_TOP   

16.     )         

17.   

18.   

19. cc.Label:createWithTTF(ttfConfig,                       -- 字體配置信息  

20.         text,  

21.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,  

22.         int maxLineWidth = 0                            -- 可省略，標籤的最大寬度  

23.     )  

24.   

25.   

26. cc.Label:createWithBMFont(const std::string& bmfontFilePath,    -- 位圖字體文件  

27.         text,                             

28.         hAlignment= cc.TEXT_ALIGNMENT_LEFT,   

29.         int maxLineWidth = 0,                             

30.         imageOffset = cc.p(0,0)                             -- 可省略，在位圖中的偏移量  

31.     )     

其中createWithSystemFont是建立系統字體標籤對象，createWithTTF是建立TTF字體標籤對象，createWithBMFont是建立位圖字體標籤對象。
createWithBMFont
下面咱們經過一個實例介紹一下，它們的使用。這個實例以下圖所示。

Label類實例

下面咱們看看HelloWorldScene.cpp中init函數以下： 

[html] view plaincopy

1. function GameScene:createLayer()  

2.     local layer = cc.Layer:create()  

3.     local label1 = cc.Label:createWithSystemFont("世界你好1 ", "Arial", 36)                 ①  

4.     label1:setPosition(cc.p(size.width/2, size.height - 100))     

5.     layer:addChild(label1, 1)  

6.     local label2 = cc.Label:createWithTTF("世界你好2", "fonts/STLITI.ttf", 36)          ②  

7.     label2:setPosition(cc.p(size.width/2, size.height - 200))  

8.     layer:addChild(label2, 1)  

9.     local label3 = cc.Label:createWithBMFont ("fonts/bitmapFontChinese.fnt", "中國")      ③  

10.     label3:setPosition(cc.p(size.width/2, size.height - 300))  

11.     layer:addChild(label3, 1)  

12.     local ttfConfig  = {}                                                   ④  

13.     ttfConfig.fontFilePath="fonts/Marker Felt.ttf"  

14.     ttfConfig.fontSize = 32  

15.     local label4 = cc.Label:createWithTTF(ttfConfig, "Hello World4")                    ⑤  

16.     label4:setPosition(cc.p(size.width/2, size.height - 400))  

17.     layer:addChild(label4 , 1)  

18.     ttfConfig.outlineSize = 4                                               ⑥  

19.     local label5 = cc.Label:createWithTTF(ttfConfig, "Hello World5")                    ⑦  

20.     label5:setPosition(cc.p(size.width/2, size.height - 500))     

21.     label5:enableShadow(cc.c4b(255,255,255,128), cc.size(4, -4))                    ⑧  

22.     label5:setColor(cc.c3b(255, 0, 0))                                      ⑨  

23.     layer:addChild(label5, 1)  

24.     return layer  

25. end  

在上面的代碼中第①行是經過createWithSystemFont函數建立Label對象，第②行代碼是經過createWithTTF是建立TTF字體標籤對象，第③行代碼是createWithBMFont是建立位圖字體標籤對象。
第④行代碼local ttfConfig = {}是聲明一個TTFConfig變量，TTFConfig的屬性以下：

[html] view plaincopy

1. fontFilePath                                        -- 字體文件路徑  

2. fontSize,                                           -- 字體大小  

3. glyphs = cc.GLYPHCOLLECTION_DYNAMIC,            -- 字體庫類型  

4. customGlyphs                                    -- 自定義字體庫  

5. outlineSize                                         -- 字體描邊  

6. distanceFieldEnabled                            -- 開啓距離字段字體開關  

第⑤行代碼cc.Label:createWithTTF(ttfConfig, "Hello World4")是經過指定TTFConfig建立TTF字體標籤。第⑥行代碼ttfConfig.outlineSize = 4設置TTFConfig的描邊字段。第⑦行代碼cc.Label:createWithTTF(ttfConfig, "Hello World5")是從新建立TTF字體標籤。

第⑧行代碼label5:enableShadow(cc.c4b(255,255,255,128), cc.size(4, -4))是設置標籤的陰影效果。第⑨行代碼label5:setColor(cc.c3b(255, 0, 0))是設置標籤的顏色。

更多內容請關注最新Cocos圖書《Cocos2d-x實戰：Lua卷——Cocos2d-lua開發》

本書交流討論網站：http://www.cocoagame.net

歡迎加入Cocos2d-x技術討論羣：257760386

更多精彩視頻課程請關注智捷課堂Cocos課程：http://v.51work6.com

智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

《Cocos2d-x實戰 Lua卷》現已上線，各大商店均已開售：

京東：http://item.jd.com/11659698.html

歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息