Starling Framework簡介

Starling的技術基礎

Starling是基於Stage3D來實作的，因此在學習Starling之前，我建議應該要對Stage3D的特性有基礎的了解。有關於Stage3D的介紹可以看這篇文章：Stage3D運作原理。在這篇文章裡，我們可以知道Stage3D比起OpenGL及DirectX等傳統3D的APIs的優勢與劣勢。

Stage3D會依發佈平台的不同而使用不一樣的GPU運算引擎，例如在mac電腦上所使用的是OpenGL，而在Windows則會視電腦所使用的硬體設備去選擇所使用的基礎技術。值得一提的是，即使遇到不支援的硬體，Stage3D仍然可以使用軟件模式去做3D運算，只是會變得十分的緩慢。這邊有一個簡單的性能比較：Stage3D vs WebGL 性能較量

下圖是Starling的技術基礎示意圖：

Starling運作模式

過去我們很容易因為Stage3D這個名字而誤會這是專門為3D而做的引擎，而不能使用在2D的技術上。3D引擎的運算與2D運算最大的差異點，在於3D畫面是由一個個三角型為基礎，去建構整個畫面。而2D的向量圖形，則是由多個頂點組合而成的複雜多邊型。

要將3D的技術使用在2D上，便是將圖片整理成png或jpg等圖片，然後將圖片視為兩個三角型去繪製物件，再加上貼材質的方式，將人物的圖片貼至範圍裡。這樣便可以利用GPU去執行它最擅長的三角型繪製以及材質貼圖的動作。

Starling簡單範例

這是一個最簡單的Starling Sample：StarlingTest
StarlingTest.as

package
{
	import flash.display.Sprite;

	import starling.core.Starling;

	[SWF(frameRate="60",Width="800",Height="600")]
	public class StarlingTest extends Sprite
	{
		public function StarlingTest()
		{
			var star:Starling = new Starling(Main, stage);
			star.start();
		}
	}
}

Main.as

package
{
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;

	public class Main extends Sprite
	{
		[Embed(source = 'test.xml', mimeType = 'application/octet-stream')]
		private var AtlasXML:Class;

		[Embed(source = 'test.png')]
		private var AtlasTexture:Class;

		public function Main()
		{
			var texture:Texture = Texture.fromBitmap(new AtlasTexture());
			var xml:XML = XML(new AtlasXML());
			var atlas:TextureAtlas = new TextureAtlas(texture, xml);

			var mc:MovieClip = new MovieClip(atlas.getTextures("run"),30);
			addChild(mc);

			Starling.juggler.add(mc);
		}
	}
}

全新的影格運作方式

從上面的Code來看，Flash programmer似乎會覺得好像和原本的程式幾乎一模一樣，其實這是Staring刻意希望讓程式師可以無痛學習Starling，刻意去這樣設計的。在很像的外表下，若我們使用Starling去建置我們的flash程式，不論在影格、圖形渲染方式、碰撞偵測方式、事件傳遞方式等。其實與原生程式，在根本上是完全不一樣的東西。也因為在基本概念上就有很大的不同（starling是以3D去模擬2D的環境，而原有的Flash則是完全使用CPU去做畫面的運算）。我建議所有Flash的開發者還是要以全新的角度去學習這套framework，並且要了解其根本的運作原理，這樣在操作上才不會被它與原生語言的不同之處搞混淆。

因此我們要知道，上面範例裡面的starling.display.MovieClip與原生的flash.display.MovieClip在本質上便已經是完全不同的東西了。在表現的圖層上也並不相同，下圖是圖層的示意圖：

從上圖可以看到，所有原來我們用flash.display.*去產生的畫面，一律會被放在最上面那層的『Display List』，而所有stage3D（在這裡也就是Starling）的物件則會放在它下面。另外StageVideo則是可以使用GPU去播放的影片，則會放在最下面一層。

這也可以看出，若是想要採用starling去開發你的應用程式，不太可能混合starling和原生的flash DisplayObject一起使用，因為原生的flash所產生的畫面會永遠的被放在starling之上（請見註一）。另外，若是使用starling，在嵌入swf至網頁時，一定要將wmode設成direct，starling不支援透明的嵌入方式，否則會跳出如下圖的錯誤訊息。

另外，雖然Starling很多類別的名稱或屬性都很相似，或者一樣，但用法其實也是有很大的不同。這邊是Starling的API手冊：Starling Framework Reference

註一：
我們可以利用nativeOverlay將原生的flash的displayObject放到starling的場景上。
請見下面的範例，下面範例是如何在starling裡加入可打字的文字框的方式。

var textInput:flash.text.TextField = new flash.text.TextField();
textInput.type = TextFieldType.INPUT;
Starling.current.nativeOverlay.addChild(textInput);

因為starling的textField本身是不能直接設定為可打字的，因此如果想要在場景上加一個可輸入文字的文字欄位，這邊有很詳細的方法介紹：Text Input with Starling framework。
不過要注意，使用nativeOverlay所加進場景裡的物件，也是永遠會在最上層。下面是官網對於Native overlay的說明：

Sometimes you will want to display native Flash content on top of Starling. That’s what the nativeOverlay property is for. It returns a Flash Sprite lying directly on top of the Starling content. You can add conventional Flash objects to that overlay.

Beware, though, that conventional Flash content on top of 3D content can lead to performance penalties on some (mobile) platforms. For that reason, always remove all child objects from the overlay when you don’t need them any longer. Starling will remove the overlay from the display list when it’s empty.

Starling的技術基礎

Starling運作模式

Starling簡單範例

全新的影格運作方式

參考資料

2 thoughts on “Starling Framework簡介”