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 &gt;&gt; 1;
			legend.y = stage.stageHeight - legend.height &gt;&gt; 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 &gt;&gt; 1; legend.y = stage.stageHeight - legend.height &gt;&gt; 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來當作字型檔案的簡單範例如下：
字型檔案下載：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 &gt;&gt; 1;
			bmpFontTF.y = stage.stageHeight - bmpFontTF.height &gt;&gt; 1;
			// show it
			addChild(bmpFontTF);
		}
	}
}

Claire's Blog