Cocos2d-JS中的cc.LabelTTF

cc.LabelTTF是使用系統中的字體，它是最簡單的標籤類。cc.LabelTTF類圖以下圖所示，能夠cc.LabelTTF繼承了cc.Node類，具備cc.Node的基本特性。

LabelTTF類圖

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

cc.LabelTTF實現的Hello World文字

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

[html] view plaincopy

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

2.     sprite:null,  

3.     ctor:function () {  

4.         //////////////////////////////  

5.         // 1. super init first  

6.         this._super();  

7.             ……  

8.         var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);                   ①  

9.         helloLabel.x = size.width / 2;  

10.         helloLabel.y = 0;  

11.   

12.   

13.         this.addChild(helloLabel, 5);  

14.           ……  

15.         return true;  

16.     }  

17. });  

上述代碼第①行是建立一個cc.LabelTTF對象，cc.LabelTTF類的構造函數定義以下：
ctor(text, fontName, fontSize, dimensions, hAlignment, vAlignment)
text參數是要顯示的文字，fontSize參數是字體，它能夠是系統字體名，例如本例中的Arial，也能夠是自定義的字體文件，字體文件應該放在res文件夾或子文件夾中，以下圖所示，咱們的TTF字體文件是Marker Felt.ttf，使用Marker Felt.ttf字體的代碼以下：
var helloLabel = new cc.LabelTTF("Hello World", "Marker Felt", 38);
Marker Felt是與Marker Felt.ttf字體文件對於的字體文件名，該名稱是咱們在src/resource.js文件中定義的，src/resource.js代碼以下：

[html] view plaincopy

1. var g_resources = [  

2.     //fonts  

3.     {  

4.         type: "font",                                                   ①  

5.         name: "Marker Felt",                                                ②  

6.         srcs: ["res/fonts/Marker Felt.ttf"]                                     ③  

7.     }  

8.   

9.   

10. ];  

g_resources數組變量是用來保存須要加載的資源集合，字體文件也是一種資源文件，也須要在場景啓動時候加載，代碼第①～③行是建立字體資源加載項目，其中第①行代碼是指定加載項目的類型，第②行是字體文件名，這個名字是程序中使用的名字，咱們上面的實例就使用了這個名字，第③行是字體文件的路徑，一個字體能夠能由多個字體文件構成，所以srcs配置項是一個數組。
注意  自定義的字體文件不能在JSB本地方式運行中正常顯示，而系統字體（只要是運行的操做系統安裝了該字體）能夠在Web瀏覽器方式運行和JBS本地方式運行中正常顯示。

TTF字體文件位置

參數dimensions標籤內容大小，若是標籤不能徹底顯示在指定的大小內，標籤將被截掉部分，默認值爲cc.size(0,0)，它表示標籤恰好顯示在指定的大小內。參數hAlignment 表示標籤在dimensions指定大小內水平對齊的方式，默認值是cc.TEXT_ALIGNMENT_LEFT，表示水平右對齊。參數vAlignment表示標籤在dimensions指定大小內垂直對齊的方式，默認值是cc.VERTICAL_TEXT_ALIGNMENT_TOP，表示垂直頂對齊。

更多內容請關注最新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課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息