一塊兒來玩鳥 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