Starling的Display Objects介紹（二）

上一篇：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檔案的工具：

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

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. The Starling Manual » Displaying Text
2. TextField API
3. Starting with Starling – Ep 10: Text and Fonts