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

一起來玩鳥 Starling Framework(8)BitmapFont - randomclan - [Random]/v@ny
 


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

一起來玩鳥 Starling Framework(8)BitmapFont - randomclan - [Random]/v@ny
 


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

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

一起來玩鳥 Starling Framework(8)BitmapFont - randomclan - [Random]/v@ny
 


我們在剛剛選擇字型時用了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如下:

一起來玩鳥 Starling Framework(8)BitmapFont - randomclan - [Random]/v@ny
 

點我或圖看Demo

你可能感兴趣的:(framework)