Claire's Blog

上一篇：Starling的Display Objects介紹（二） 下一篇：Starling的Display Objects介紹（四） 這篇會介紹下圖裡的starling.display.Button以及starling.display.Sprite Button物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/Button.html 和Flash的SimpleButton的不同點，是它只有兩個狀態的圖檔，也就是upState與downState，而沒有over的狀態。它的disabled樣式可以經由alphaWhenDisabled的屬性去設定Disabled時的圖檔透明度。 另外，按下Button會觸發的事件是Event.TRIGGERED，因此若我們要監聽一個Button按下的事件，可用下面的方式去監聽： 這是starling.display.Button一個簡單的使用範例： 要注意的是，在starling裡面沒有hit area的設計，因為圖片有Bounds和Frame兩個屬性，所以要確定是否是碰到bounds的話，可以覆寫原有的hitTest函數，範例如下： 若是要偵測是否碰到透明區塊，則要使用原生的BitmapData.hitTest去測試，使用方法如下： Sprite物件 Sprite官方手冊在此：http://doc.starling-framework.org/core/starling/display/Sprite.html DisplayObjectContainer官方手冊在此：http://doc.starling-framework.org/core/starling/display/DisplayObjectContainer.html 除了DisplayObjectContainer的功能以外，還多了一個flatten的屬性，這個屬性可以利用一些讓這個Sprite在播放動畫時更加的順暢，但若是開啟了flatten機制，所有之後對畫面的alpha、rotation和位置的改變都無法在畫面上被呈現。所以在使用此一屬性時要更加的小心。 Sprite一個專門用來放許多其他元件的標準容器，它可被偵聽下面這些事件： Event.ADDED: the object was added to a parent. Event.ADDED_TO_STAGE: the object was added to a parent that is connected to the stage,…

上一篇：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檔案的工具： Glyph Designer(適用於Mac) BMFont(適用於Windows) 內嵌字型實作範例 下面我們簡介一下這兩種方式的實作方式： Standard TrueType fonts：也就是一般內嵌字型的方式，將.ttf的文字檔案直接用embed的方式嵌入swf裡。 下面是一個簡單的範例： Bitmap fonts：If you need speed or fancy font effects, use a…

上一篇：Starling Framework簡介 下一篇：Starling的Display Objects介紹（二） Starling framework啟動方式 所有使用Starling framework的應用程式的起始點，都是由一個Starling物件，來創建整個Starling世界（Starling物件說明可見此：Starling），下面是一個最簡單的範例： Starling世界的物件樹 從官方的說明文件裡可以看到在Starling裡，畫面物件的繼承樹是長這樣的： 從上圖可看出在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的物件把元件放到裡面而已，它永遠都會被放在畫面的最上層。 Stage會在創建Starling物件時被自動創建，所以不用自己去建立它。 參考資料 The…

下一篇：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的技術基礎示意圖： Starling運作模式 過去我們很容易因為Stage3D這個名字而誤會這是專門為3D而做的引擎，而不能使用在2D的技術上。3D引擎的運算與2D運算最大的差異點，在於3D畫面是由一個個三角型為基礎，去建構整個畫面。而2D的向量圖形，則是由多個頂點組合而成的複雜多邊型。 要將3D的技術使用在2D上，便是將圖片整理成png或jpg等圖片，然後將圖片視為兩個三角型去繪製物件，再加上貼材質的方式，將人物的圖片貼至範圍裡。這樣便可以利用GPU去執行它最擅長的三角型繪製以及材質貼圖的動作。   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在本質上便已經是完全不同的東西了。在表現的圖層上也並不相同，下圖是圖層的示意圖： 從上圖可以看到，所有原來我們用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裡加入可打字的文字框的方式。 因為starling的textField本身是不能直接設定為可打字的，因此如果想要在場景上加一個可輸入文字的文字欄位，這邊有很詳細的方法介紹：Text Input with Starling framework。 不過要注意，使用nativeOverlay所加進場景裡的物件，也是永遠會在最上層。下面是官網對於Native overlay的說明： Sometimes…