一起來玩鳥 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。然後我們就可以進入程式部分：

public class Game8 extends Sprite 
{
  private var _container:Sprite;
  [Embed(source = "/assets/bitmapFont.fnt", mimeType="application/octet-stream")]
  private static const BitmapCharsXML:Class;//embed Data file
  [Embed(source = "/assets/bitmapFont_0.png")]
  private static const BitmapChars:Class;//embed png

  public function Game8() 
  {
    super();
    addEventListener(Event.ADDED_TO_STAGE, init);
  }

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

    _container = new Sprite();
    addChild(_container);
    addChild(new Stats());

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

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

    var text:TextField = new TextField(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

上一篇：一起來玩鳥　Starling Framework（7）MovieClip
下一篇：一起來玩鳥　Starling Framework（9）Particle