上一篇：Starling的Display Objects介紹（一）
下一篇：Starling的Display Objects介紹（三）
這篇會介紹下圖裡的starling.text.TextField
TextField物件介紹
官方手冊請見此：http://doc.starling-framework.org/core/starling/text/TextField.html
下面是一個最簡單的使用範例：
package {
import starling.display.Sprite;
import starling.events.Event;
import starling.text.TextField;
public class Game extends Sprite {
public function Game() {
addEventListener(Event.ADDED_TO_STAGE, onAdded);
}
private function onAdded (e:Event):void {
// create the TextField object
var legend:TextField = new TextField(300, 300, "簡單的文字範例", "Verdana", 38, 0xFFFFFF);
// centers the text on stage
legend.x = stage.stageWidth - legend.width >> 1;
legend.y = stage.stageHeight - legend.height >> 1;
// show it
addChild(legend);
}
}
}
內嵌字型方式比較
在Starling裡的TextField可以用兩種方式去嵌入特殊字型，如下圖所示：
從上圖我們可以發現，原始的字體嵌入方式，在1到2的部份，將字型從ttf裡抽取出來壓成Bitmap Snapshot，這部份會需要使用到CPU來做運算。因為會多一個程序，在效能上，會比右邊的方式慢一些。Bitmap Font則是使用一份字型列表的圖檔（如下圖），去比對xml的字型資訊檔，它完全只會用到GPU的運算，在效能上優於傳統字體嵌入的方式。
字型範例下載：fontRegular
但是若我們要求字體在各種解析度都要能夠有很高的解析，由於原始的字型嵌入方式是即時將字型轉換成Bitmap圖檔，在各種大小都可以有良好的表現。而若我們想要使用不同大小的Bitmap字型，則需要在產生文字圖檔時就決定要使用那些大小的字型，而不能在執行時才決定要顯示的文字大小為何。
在下面的Bitmap Font產生工具裡都可以有設定的選項，包括要使用那些文字、字體、等等…，以及字型要叫什麼都可以在產生時設定好。
Bitmap Font產生工具
這邊有幾個可以產生Bitmap文字圖檔及.fnt檔案的工具：
- Glyph Designer(適用於Mac)
- BMFont(適用於Windows)
內嵌字型實作範例
下面我們簡介一下這兩種方式的實作方式：
- Standard TrueType fonts：也就是一般內嵌字型的方式，將.ttf的文字檔案直接用embed的方式嵌入swf裡。
下面是一個簡單的範例：package { import flash.text.Font; import starling.display.Sprite; import starling.events.Event; import starling.text.TextField; public class Game extends Sprite { [Embed(source='/../media/fonts/Abduction.ttf', embedAsCFF='false', fontName='Abduction')] public static var Abduction:Class; public function Game() { addEventListener(Event.ADDED_TO_STAGE, onAdded); } private function onAdded (e:Event):void { // create the font var font:Font = new Abduction(); // create the TextField object var legend:TextField = new TextField(300, 300, "使用內嵌字型的簡單範例!", font.fontName, 38, 0xFFFFFF); // centers the text on stage legend.x = stage.stageWidth - legend.width >> 1; legend.y = stage.stageHeight - legend.height >> 1; // show it addChild(legend); } } }  - Bitmap fonts：If you need speed or fancy font effects, use a bitmap font instead. That is a font that has its glyphs rendered to a texture atlas. To use it, first register the font with the method registerBitmapFont, and then pass the font name to the corresponding property of the text field.
一個使用Bitmap來當作字型檔案的簡單範例如下：
字型檔案下載：fontRegularpackage { import flash.display.Bitmap; import starling.display.Sprite; import starling.events.Event; import starling.text.BitmapFont; import starling.text.TextField; import starling.textures.Texture; import starling.utils.Color; public class Game extends Sprite { [Embed(source = "../media/fonts/fontRegular.png")] private static const BitmapChars:Class; [Embed(source="../media/fonts/fontRegular.fnt", mimeType="application/octet-stream")] private static const BritannicXML:Class; public function Game() { addEventListener(Event.ADDED_TO_STAGE, onAdded); } private function onAdded (e:Event):void { // creates the embedded bitmap (spritesheet file) var bitmap:Bitmap = new BitmapChars(); // creates a texture out of it var texture:Texture = Texture.fromBitmap(bitmap); // create the XML file describing the glyphes position on the spritesheet var xml:XML = XML(new BritannicXML()); // register the bitmap font to make it available to TextField TextField.registerBitmapFont(new BitmapFont(texture, xml)); // create the TextField object var bmpFontTF:TextField = new TextField(400, 400, "使用內嵌字型的簡單範例!", "BritannicBold", 10); // the native bitmap font size, no scaling bmpFontTF.fontSize = BitmapFont.NATIVE_SIZE; // use white to use the texture as it is (no tinting) bmpFontTF.color = Color.WHITE; // centers the text on stage bmpFontTF.x = stage.stageWidth - bmpFontTF.width >> 1; bmpFontTF.y = stage.stageHeight - bmpFontTF.height >> 1; // show it addChild(bmpFontTF); } } }
