Starling的Display Objects介紹（二）

上一篇：Starling的Display Objects介紹（一）
下一篇：Starling的Display Objects介紹（三）

這篇會介紹下圖裡的starling.text.TextField

TextField物件介紹

官方手冊請見此：http://doc.starling-framework.org/core/starling/text/TextField.html

下面是一個最簡單的使用範例：

內嵌字型方式比較

在Starling裡的TextField可以用兩種方式去嵌入特殊字型，如下圖所示：

從上圖我們可以發現，原始的字體嵌入方式，在1到2的部份，將字型從ttf裡抽取出來壓成Bitmap Snapshot，這部份會需要使用到CPU來做運算。因為會多一個程序，在效能上，會比右邊的方式慢一些。Bitmap Font則是使用一份字型列表的圖檔（如下圖），去比對xml的字型資訊檔，它完全只會用到GPU的運算，在效能上優於傳統字體嵌入的方式。
字型範例下載：fontRegular

但是若我們要求字體在各種解析度都要能夠有很高的解析，由於原始的字型嵌入方式是即時將字型轉換成Bitmap圖檔，在各種大小都可以有良好的表現。而若我們想要使用不同大小的Bitmap字型，則需要在產生文字圖檔時就決定要使用那些大小的字型，而不能在執行時才決定要顯示的文字大小為何。

在下面的Bitmap Font產生工具裡都可以有設定的選項，包括要使用那些文字、字體、等等…，以及字型要叫什麼都可以在產生時設定好。

Bitmap Font產生工具

這邊有幾個可以產生Bitmap文字圖檔及.fnt檔案的工具：

1. Glyph Designer(適用於Mac)
   
2. BMFont(適用於Windows)
   

內嵌字型實作範例

下面我們簡介一下這兩種方式的實作方式：

1. 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); } } } 

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   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); } } } 

2. 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來當作字型檔案的簡單範例如下：
   字型檔案下載：fontRegular
   
   package { 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); } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

   package { 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); } } }

參考資料

1. The Starling Manual » Displaying Text
2. TextField API
3. Starting with Starling – Ep 10: Text and Fonts