瘋狂ios之cocos2d中的文本

在游戲當中經(jīng)常需要添加標簽和文本對此cocos2d提供了強大的文本渲染功能。cocos2d支持所有內(nèi)置的iOS字體以及一些TrueType字體。

在cocos2d中文本渲染功能通常由兩個類實現(xiàn)CCLabelTTF和CCLabelBMFont。下面我們來詳細說明這兩個類在實際項目當中如何使用。

13.12.1CCLabelTTF類

CCLabelTTF類繼承自CCSprite因為其渲染速度相對較慢所以通常用于顯示一些靜態(tài)的標簽和純文本。CCLabelTTF類的常用方法如下。

+(id)labelWithString:(NSString*)string fontName:(NSString*)name fontSize:(CGFloat)size該方法根據(jù)字體名稱和字體大小初始化一個新的標簽對象CCLabelTTF對象將使用CCTexture2D類從文本創(chuàng)建一個紋理圖。

-(id)initWithString:(NSString*)string fontName:(NSString*)name fontSize:(CGFloat)size該方法根據(jù)字體名稱和字體大小初始化一個新的標簽對象CCLabelTTF對象將使用CCTexture2D類從文本創(chuàng)建一個紋理圖。該方法與前一個方法功能大致相似只不過該方法是實例方法需要用CCLabelTTF對象調(diào)用。

-(void) setString:(NSString*)str該方法設(shè)置CCLabelTTF對象的文本內(nèi)容。

接下來我們通過示例演示在項目中如何使用CCLabelTTF類。實現(xiàn)代碼如下。

程序清單codes/13/13.12/LabelTTFTest/LabelTTFTest/HelloWorldLayer.m

-(id) init

{

if( (self=[super init]) ) {

CGSize winSize = [[CCDirector sharedDirector] winSize];

// 使用特定的文本內(nèi)容、字體名稱和字體大小3個參數(shù)創(chuàng)建并初始化一個新的標簽對象

CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World"

fontName:@"Marker Felt" fontSize:64];

label.position = ccp(winSize.width/2,winSize.height/2);

[self addChild:label];

// iOS支持的所有字體

NSArray *fontFamilyNames = [UIFont familyNames];

for (NSString *familyName in fontFamilyNames) {

NSArray *names = [UIFont fontNamesForFamilyName:familyName];

CCLOG(@"%@ = %@",familyName,names);

}

}

return self;

}

單擊“Run”按鈕執(zhí)行LabelTTFTest項目模擬器屏幕正中顯示HelloWorld標簽控制臺輸出如圖13.50所示。

上面代碼首先使用特定的文本內(nèi)容、字體名稱和字體大小3個參數(shù)創(chuàng)建并初始化了一個新的標簽對象然后設(shè)置了標簽在屏幕中的位置并添加為當前層的子節(jié)點最后從UIFont類中查詢出iOS中的所有可用字體并打印在控制臺中。

13.12.2CCLabelBMFont類

使用CCLabelTTF類顯示靜態(tài)的標簽文本很方便但是渲染速度相對較慢并且缺乏靈活性為此cocos2d提供了CCLabelAtlas類和CCLabelBMFont類來替代CCLabelTTF類。由于CCLabelAtlas類相對于CCLabelBMFont類來說過于復(fù)雜所以在實際開發(fā)中通常建議使用CCLabelBMFont類。CCLabelBMFont類和CCLabelTTF類的區(qū)別如下。

CCLabelBMFont類的渲染速度要比CCLabelTTF類快很多。

CCLabelBMFont類來自于圖片文件并且有很多第三方編輯器支持非常靈活。

CCLabelBMFont類支持不同寬度的字符。

所以如果在項目開發(fā)中只是需要使用標準的iOS字體并且不需要經(jīng)常修改標簽的文本內(nèi)容那么使用CCLabelTTF類就可以滿足。但有些時候如果需要使用定制的字體而且需要每一幀都更改文本的內(nèi)容這時就建議使用CCLabelBMFont類。

CCLabelBMFont類繼承自CCSpriteBatchNode并實現(xiàn)了CCLabelProtocol和CCRGBAProtocol兩個協(xié)議。因為繼承自CCSpriteBatchNode所以文本中的每一個字符會被作為一個獨立的CCSprite精靈對象看待每個字符的大小、著色、透明度和旋轉(zhuǎn)角度等屬性都可以被修改。CCLabelBMFont類還可以被當作菜單項的一部分。CCLabelBMFont類有如下兩個特有的屬性。

opacity透明度變量類型是Glubyte。

color顏色變量類型是ccColor3B使用RGB數(shù)值表示的色彩。

那么CCLabelBMFont類如何使用呢因為CCLabelBMFont類繼承自CCSpriteBatchNode并且來自于圖片文件所以其實它的作用就相當于精靈表單而其中的每一個字符則相當于精靈表單中的單個精靈對象。字符是以圖片形式存儲的因此必須使用字體圖集。字體圖集其實就是一張大的圖片其中包含了所有要顯示的字符以及描述字符在字體圖集中位置的坐標數(shù)據(jù)字體圖集可以理解成前面學(xué)習(xí)過的精靈表單。當字符是以圖片形式存儲時也無法直接修改它的大小如果在游戲當中需要使用多種大小不同的字符我們必須為每一種大小創(chuàng)建一個單獨的字體圖集。

cocos2d中使用FNT文件保存位圖字體cocos2d本身并沒有提供創(chuàng)建字體圖集的工具但是有很多第三方工具可以創(chuàng)建字體圖集。cocos2d官方推薦以下幾種創(chuàng)建字體圖集的工具。

qGlyph Designer該軟件為收費的商業(yè)軟件下載地址為http://glyphdesigner. 71squared.com。

qSlick2D Hiero Bitmap Font Generator該軟件為Java開發(fā)的免費軟件下載地址為http://slick.cokeandcode.com/demos/hiero.jnlp。

qHiero該軟件為Java開發(fā)的免費軟件使用簡單下載地址為http://www.n4te.com/ hiero/hiero.jnlp。

本書使用Hiero軟件創(chuàng)建字體圖集它的作用類似于前面創(chuàng)建紋理圖集的Zwoptex。

1. 下載Hiero工具

打開瀏覽器在地址欄輸入http://www.n4te.com/hiero/hiero.jnlp下載Hiero工具。

打開Hiero后主界面顯示如圖13.51所示。

2. 創(chuàng)建字體圖集

在主界面左上方“Font”字體列表框中選擇字體如“Arial Rounded MT Bold”。選擇后上方中間位置的“Sample Text”列表框中會顯示相對應(yīng)的字體樣本。

在上方右側(cè)的“Effects”列表框中可以設(shè)置顏色、輪廓、陰影等。

在下方的“Rendering”區(qū)域切換到“Glyph cache”將“Page width”和“Page height”設(shè)置為256使用最小的2的次方的圖像包含所有需要的文本字符。Hiero將創(chuàng)建一個256*256的字體圖集如圖13.52所示。

單擊左上角的“File”選擇“Save BMFont files”將文件命名為“my.fnt”。Hiero將同時創(chuàng)建一個FNT文件和一個PNG文件FNT文件就類似于使用Zwoptex創(chuàng)建的plist文件。

以上就是使用Hiero制作字體圖集的具體方法。接下來將演示如何使用CCLabelBMFont類在游戲開發(fā)中使用字體圖集。

3. 字體圖集示例

首先創(chuàng)建一個LabelBMFontTest項目選擇“Resources”組并單擊右鍵選擇“Add Files to‘LabelBMFontTest’”將剛才生成的my.fnt和my.png添加到Resoures組當中。接下來在init方法里面添加一段代碼使用LabelBMFontTest操作字體圖集。實現(xiàn)代碼如下。

程序清單codes/13/13.12/LabelBMFontTest/LabelBMFontTest/HelloWorldLayer.m

-(id) init

{

if( (self=[super init]) ) {

CGSize winSize = [[CCDirector sharedDirector] winSize];

// 創(chuàng)建一個標簽使用my.fnt字體圖集

CCLabelBMFont *label = [CCLabelBMFont

labelWithString:@"Hello BMFont" fntFile:@"my.fnt"];

label.position = ccp(winSize.width/2,winSize.height/2);

[self addChild:label];

// CCScaleBy動作2秒后放大2倍

id scaleBy = [CCScaleBy actionWithDuration:2.0f scale:2];

[label runAction:scaleBy];

}

return self;

}

單擊“Run”按鈕執(zhí)行LabelBMFontTest項目模擬器顯示如圖13.53所示。

上面代碼首先用CCLabelBMFont的類方法創(chuàng)建了一個標簽并使用了剛剛在Hiero中生成的my.fnt字體圖集然后將標簽設(shè)置在屏幕正中。接下來讓標簽執(zhí)行一個動作2秒之后放大到原來的2倍。通過觀察發(fā)現(xiàn)標簽放大后字體邊緣會出現(xiàn)鋸齒為什么會出現(xiàn)這種現(xiàn)象呢因為CCLabelBMFont是紋理圖紋理圖類似于位圖位圖在放大時會出現(xiàn)模糊或者失真現(xiàn)象。所以在開發(fā)中使用CCLabelBMFont時不要把縮放比例設(shè)置得過大如果字體標簽需要縮放對于不同大小的字符需要設(shè)置不同的字體圖集。