2011年11月18日 星期五

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

沒有留言:

張貼留言