Cocos2d-JS中的cc.LabelAtlas

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

 

cc.LabelAtlas類圖

若是咱們要展現以下圖所示的Hello World文字，咱們能夠使用cc.LabelAtlas實現。

cc.LabelAtlas實現的Hello World文字

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

[html] view plaincopy

1. var HelloWorldLayer = cc.Layer.extend({  

2.     sprite:null,  

3.     ctor:function () {  

4.           this._super();  

5.             ……  

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

7.             var helloLabel = new cc.LabelAtlas("Hello World",   

8.                 res.charmap_png,  

9.                 48, 66, " ");                                           ①  

10.   

11.   

12.             helloLabel.x = size.width / 2 - helloLabel.getContentSize().width / 2;  

13.             helloLabel.y = size.height - helloLabel.getContentSize().height;  

14.             this.addChild(helloLabel, 5);  

15.             ……  

16.             return true;  

17.     }  

18. });  

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

圖片集文件

爲了防止硬編碼問題，咱們應該使用res.charmap_png表示資源的路徑，變量res.charmap_png是在resource.js中定義的資源名，resource.js代碼以下：

[html] view plaincopy

1. var res = {  

2.     HelloWorld_png : "res/HelloWorld.png",  

3.     CloseNormal_png : "res/CloseNormal.png",  

4.     CloseSelected_png : "res/CloseSelected.png",  

5.     charmap_png : "res/fonts/tuffy_bold_italic-charmap.png"  

6. };  

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

本書交流討論網站：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實戰 JS卷》現已上線，各大商店均已開售：

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

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