使用 CCLabelBMFont 製作 Bitmap Font 的效果

Bitmap Font 其實就是使用圖片的方式來當作文字，在 cocos2d 中使用 Bitmap Font 必須包含兩個重要的檔案，一個就是所有字型 符號的圖片 fng，另一個就是紀錄文字與對應圖片的設定檔 fnt，其中紀錄對應文字的 ASCII 碼、圖片座標與大小等資訊，下面就是一個在 cocos2d 中使用 Bitmap Font 的簡單示範。

關於製作 Bitmap Font 的軟體實在非常多，這裡就不多做贅述，大家可以參考 cocos2d 官方網站所列出的幾個軟體。

• http://www.n4te.com/hiero/hiero.jnlp (java version)
• http://slick.cokeandcode.com/demos/hiero.jnlp (java version)
• http://www.angelcode.com/products/bmfont/ (windows only)
• http://glyphdesigner.71squared.com/ (Mac only)

我們也準備了本範例所使用的 Bitmap Font 相關檔案 impact64.png 和 impact64.fnt 提供有興趣的讀者下載。

準備好 Bitmap Font 所需的 png 與 fnt 兩的檔案之後，將這兩個檔案拖曳至專案內的 Resources 資料夾下，並在對應的 CCLayer Class 裡輸入以下程式碼即可。

//取得畫面大小
CGSize screenSize = [CCDirector sharedDirector].winSize;

//設定BMP Font
CCLabelBMFont *logoFont;
logoFont = [CCLabelBMFont labelWithString:@"Furnace iOS" fntFile:@"impact64.fnt"];
logoFont.position = ccp(screenSize.width / 2, screenSize.height / 2);
[self addChild: logoFont];

//設定BMP Font
CCLabelBMFont *demoFont;
demoFont = [CCLabelBMFont labelWithString:@"Bitmap Font Demo" fntFile:@"impact64.fnt"];
[demoFont setScale:0.5];
demoFont.position = ccp(screenSize.width / 2, 100);
[self addChild: demoFont];

在上述程式碼中， Bitmap Font 就如同一般的圖片一樣也是可以調整大小，但是由於文字的呈現方式是使用圖片連結的關係，如果輸入的文字在圖片找不到對應的連結，系統可是會出現 crash 的可能。