Claire's Blog

上一篇：Starling的Display Objects介紹（三） 下一篇：Starling的Display Objects介紹（五） 這篇會介紹下圖裡的starling.display.Quad以及starling.display.Image Quad物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/Quad.html A Quad represents a rectangle with a uniform color or a color gradient. 每一個端點都可以設定一個顏色，會呈現線性漸層。要顯示一個線性的漸變色，需要把一個色值設置給頂點0和頂點1，然後另一個顏色給頂點2和頂點3。 頂點位置是這樣安排的：: 0 – 1 | / | 2 – 3 在這個物件裡面，可以看到一個叫做mVertexData的屬性。在Starling Framework簡介的地方曾經說過，Starling是基於Stage3D而建的，關於3D渲染基礎原理請見此：3D渲染基礎原理，VertexData官方介紹。所謂3D其實是一組3維的坐標，經由矩陣轉換，將之投影到2D螢幕上，計算其在2D畫面上的2D坐標，如下圖所示： 在Starling裡面，因為是2D遊戲，則是使用正交投影的方式，直接去掉z軸的值，來將頂點坐標從3維轉至2維。但操作原理不變，這邊的則是要輸入四邊型的頂點數據。正交投影示意如下圖： 下面是產生寬高各為200,200的方塊的簡單範例： Image物件介紹 官方手冊在此：http://doc.starling-framework.org/core/starling/display/Image.html 一個圖片（Image）其實就是一個四邊形上面映射了一個紋理（Texture），以下圖來說，兩個三角形是Quad的範圍，而Texture就是藍色衣服的娃娃的PNG圖檔，代表貼圖的材質。 Image相當於Flash的Bitmap類的Starling版本。但是Starling是用Texture來代替BitmapData來為圖像提供像素數據。 要顯示一個Texture，需要把它映射到一個四邊形上，而這就是Image這個類所實現的功能。…

上一篇：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按下的事件，可用下面的方式去監聽： menuContainer.addEventListener(Event.TRIGGERED, onTriggered); private function onTriggered(e:Event):void { // outputs : [object Sprite] [object Button] trace ( e.currentTarget, e.target ); // outputs : triggered! trace ("triggered!"); } 這是starling.display.Button一個簡單的使用範例： package { import flash.display.Bitmap; import…

上一篇：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…

上一篇：Starling Framework簡介 下一篇：Starling的Display Objects介紹（二） Starling framework啟動方式 所有使用Starling framework的應用程式的起始點，都是由一個Starling物件，來創建整個Starling世界（Starling物件說明可見此：Starling），下面是一個最簡單的範例： package{ import starling.core.Starling; import starling.display.Sprite; [SWF(width="1280", height="752", frameRate="60", backgroundColor="#000000")] public class Startup extends Sprite { private var mStarling:Starling; public function Startup() { // 建立Starling物件 mStarling = new Starling(Game, stage); // start it!…

下一篇：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 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);…