一起來玩鳥 Starling Framework（8）BitmapFont

所謂BitmapFont，就是事先將我們會用到的字型，會用到的字，輸出成一張圖片，類似Sprite sheet，以及一個xml格式的Data file，然後我們一次將這文字圖片轉成Texture，upload到GPU，當我們要用到某個文字時，再利用Data file對照將Texture貼上。這樣做的好處是比起我們動態的去產生文字的Texture，BitmapFont只做一次upload Texture到GPU的動作，之後重複利用這個Texture，GPU的負擔比較小；相對的，如果我們動態去產生文字的Texture，upload到GPU的次數多，GPU的cost就比較大。缺點是要先決定我們會用到哪些字？最大的字級多少？圖片儲存文字檔案也比較大。

要產生BitmapFont，我們也需要一些工具，Mac使用者可以使用Glyph Designer，還可以用在iOS的開發上，也有一堆特效可以用。$29.99美金。Windows使用者可以用Bitmap Font Generator，免費，但介面跟功能也陽春許多。我們先下載Bitmap Font Generator來練習。

下載安裝完，打開Bitmap Font Generator，右邊可以勾選要輸出的字元。左上角Options點開，第一個Font settings，選擇字型，Charset選Unicode，設定Size：

 

接著選Options的第二個Export options，Spacing至少2，以免之後Texture貼圖時切到其他文字。寬高要自己手動設定，最好是2的次方，設定太大浪費檔案空間，太小會被切成多個圖檔，這邊要依照實際要輸出的文字多少來調整。ARGB四個Channel預設選項是甚麼我忘記了。Font descriptor選擇XML，Textures選PNG：

 

Options第三個Visualize可以預覽輸出的圖檔，若是圖檔大小有問題就可以回去修改：

最後我們選Options第四個Save bitmap font as...先儲存一個.fnt檔，基本上就是一個.xml檔案，我們先命名成bitmapFont.fnt。圖片會自動儲存成bitmapFont_0.png。如果圖片不只一張，表示圖片尺寸設定太小，請重新調整再輸出。

 

我們在剛剛選擇字型時用了Futura Bk，為了跟原來的Futura Bk區別，可以打開bitmapFont.fnt，將info裡的face改成My Futura Bk。然後我們就可以進入程式部分：

publicclassGame8extendsSprite
{
privatevar _container:Sprite;
[Embed(source ="/assets/bitmapFont.fnt", mimeType="application/octet-stream")]
privatestaticconstBitmapCharsXML:Class;//embed Data file
[Embed(source ="/assets/bitmapFont_0.png")]
privatestaticconstBitmapChars:Class;//embed png

publicfunctionGame8()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);

_container =newSprite();
addChild(_container);
addChild(newStats());

var bitmap:Bitmap=newBitmapChars();
var texture:Texture=Texture.fromBitmap(bitmap);//將字型圖片轉為texture
var xml:XML = XML(newBitmapCharsXML());//將Data file轉成xml

TextField.registerBitmapFont(newBitmapFont(texture, xml));//註冊BitmapFont

var text:TextField=newTextField(500,500,"Hello, BitmapFont","My Futura Bk",100);//新增一個TextField，字型設為我們自定的My Futura

Bk，大小故意設定大於BitmapFont的最大size
text.x =(stage.stageWidth - text.width)>>1;//設定text座標
text.y =(stage.stageHeight - text.height)>>1;//設定text座標
//text.fontSize = BitmapFont.NATIVE_SIZE;//這個設定可以讓字型大小變成原本BitmapFont設定的大小
text.color =0xFF00FFFF;//設定顏色ARGB

_container.addChild(text);//將text加到場景上
}
}

 將圖片embed進來，轉成texture，Data file轉成xml，接著就可以註冊一個BitmapFont：

TextField.registerBitmapFont(new BitmapFont(texture, xml)); 

之後要使用這個BitmapFont就跟一般TextField用法一樣。我們故意新增一個字級很大的TextField，如果這樣發佈結果文字糊糊的，表示成功使用了圖片的資料；反之如果還是很平滑銳利，就表示BitmapFont沒有設定成功。如果確定成功的話再把fontSize改回來，只要小於或等於原本我們設定的BitmapFont大小顯示出來的文字就沒問題。另外可以用這個方式將字級大小設定成BitmapFont的原始大小：

text.fontSize = BitmapFont.NATIVE_SIZE; 

Demo如下：

 

點我或圖看Demo