Starling的Display Objects介紹(一)

上一篇:Starling Framework簡介
下一篇:Starling的Display Objects介紹(二)

Starling framework啟動方式

所有使用Starling framework的應用程式的起始點,都是由一個Starling物件,來創建整個Starling世界(Starling物件說明可見此:Starling),下面是一個最簡單的範例:

Starling世界的物件樹

官方的說明文件裡可以看到在Starling裡,畫面物件的繼承樹是長這樣的:
class_hierarchy
從上圖可看出在Starling裡面,DisplayObject是一切畫面物件的祖先,繼承於EventDispatcher。

DisplayObject物件介紹

官方手冊請見此:http://doc.starling-framework.org/core/starling/display/DisplayObject.html

這是所有物件樹的根物件,他的子孫包含像Quad、Image、MovieClip,這一邊是在做動畫影片的。另一邊像是DisplayObjectContainer則是放物件的容器,顧名思義,它可以再加入其他的DisplayObject在裡面。反向來說,在Starling世界裡面的MovieClip,是沒有辦法使用addChild的,它只能像是一個動畫影片一樣的單純被播放、控制位置、旋轉、或偵測碰撞,而無法在MovieClip裡面加入其他的MovieClip

在Starling的DisplayObject其實只是一個abstract class,他沒有辦法被直接new出來,一定要被繼承並實作這兩個方法:

從上面的繼承樹我們可以發現MovieClip與DisplayObjectContainer是採用不一樣的碰撞偵測方法以及圖形render方式的。

在Starling裡的DisplayObject則有偵測多點觸控,以及設定物件坐標、及與不同層DisplayObjectContent的坐標轉換功能。

Stage物件介紹

官方手冊請見此:http://doc.starling-framework.org/core/starling/display/Stage.html

Starling物件有它主場景物件Stage,也就是上圖的Starling.display.Stage,它和flash裡的Stage一樣,是放所有物件的母容器(The Starling stage object, which is the root of the display tree that is rendered)。

這個物件裡面只能夠有繼承於starling.display.DisplayObject的物件,而無法包含任何flash.display.DisplayObject相關的物件,這兩種類別是完全不能兼容的。雖然在Starling裡面,可以用

來加入原生flash物件,但就如我前一篇簡介所說,其實他也只是會取得flash.display.Stage的物件把元件放到裡面而已,它永遠都會被放在畫面的最上層。
螢幕快照 2014-02-01 下午11.45.51

Stage會在創建Starling物件時被自動創建,所以不用自己去建立它。

參考資料

  1. The Starling Manual > Display Objects
  2. Display Object API
  3. Juggler API
  4. Starling API

Starling Framework簡介

下一篇:Starling的Display Objects介紹(一)

Starling的技術基礎

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

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

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

image

Starling運作模式

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

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

 

螢幕快照 2014-02-01 下午11.37.51

Starling簡單範例

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

Main.as

全新的影格運作方式

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

因此我們要知道,上面範例裡面的starling.display.MovieClip與原生的flash.display.MovieClip在本質上便已經是完全不同的東西了。在表現的圖層上也並不相同,下圖是圖層的示意圖:
螢幕快照 2014-02-01 下午11.45.51
從上圖可以看到,所有原來我們用flash.display.*去產生的畫面,一律會被放在最上面那層的『Display List』,而所有stage3D(在這裡也就是Starling)的物件則會放在它下面。另外StageVideo則是可以使用GPU去播放的影片,則會放在最下面一層。

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

螢幕快照 2014-02-07 下午2.42.20

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

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

因為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.

參考資料