標有‘Starling’的文章

Starling簡報分享

Starling from Claire Chang Starling簡介 基於Stage3D技術來實作 在Flash Player 11之後的版本才能支援此技術 使用GPU做圖形的運算,讓Flash的效能能夠到之前的1000倍(官方說法)! 易學,使用跟Flash native API類似的類別,方法,架構等,讓原本熟悉Flash的開發者可以很快的上手可發布到多種平台(包括 iOS andAndroid及各種瀏覽器)   3D畫面運作原理 Flash原有的坐標系統:Global Point和Local Point 3D世界的坐標系統:世界坐標到相機坐標的轉換 3D透視變換方法 正交投影 透視投影 比較圖 Stage3D的渲染過程 VertexShader 主要作用就是3D流程中的前半段操作(對頂點進行一系列的矩陣變換) FragmentShader:對這些變換後的頂點(及流程中的光柵化部分)進行渲染 過去主要的3D技術 使用GPU的3D引擎:硬件加速(hardware acceleration) DirectX OpenGL 其他Flash3D引擎:軟件模式(softwar […]

繼續閱讀...

產生TextureAtlas素材的方式

方法一、使用TexturePacker 軟體官網:http://www.codeandweb.com/texturepacker 範例圖檔下載:woman 首先,要先把圖檔整理成多個png圖檔,若是連續的圖檔,則需要在後面加0001~~XXXX之類的數字,固定是四個數字。若是單一圖檔則可以不用加。到時在取圖檔時,例如本範例是woman0001~woman0028,則只需要用woman當前置詞就可以取出全部的動態圖檔了 var woman:MovieClip = new MovieClip(atlas.getTextures(“woman”),30); 而在操作TexturePacker時,最重要的是Data Format要選擇Sparrow/Starling。 索取TexturePacker免費序號 免費序號申請單:http://www.codeandweb.com/request-free-license 首先要說一下這套軟體的開發者真的很用心,當時看到有Blog說如果是有部落格的開發者,可以寫信去申請免費序號。我寫了申請表後,他回信了這封信給我: Hi Claire, Here& […]

繼續閱讀...

Starling的Display Objects介紹(五)

上一篇:Starling的Display Objects介紹(四) 下一篇:產生TextureAtlas素材的方式 這篇會介紹starling.display.MovieClip以及starling.animation.Juggler MovieClip物件介紹 官方手冊在此:http://doc.starling-framework.org/core/starling/display/MovieClip.html 在Starling裡面的MovieClip和原生的MovieClip差異蠻大的,列舉說明如下: 每一個MovieClip都可設定不同的fps(需在new MovieClip時指定):這是因為一般來說在Starling裡的frameRate都會設定的很高,但動畫可能不會有這麼多圖片可跑,因此每一個MovieClip 由一連串的連續圖檔組成:MovieClip是由一連串的動畫圖片(TextureAtlas)輪流播放。 MovieClip裡面無法有任何物件:在Starling裡的MovieClip並不是繼承DisplayObjectContainer,而是繼承於Image,因此 […]

繼續閱讀...

Starling的Display Objects介紹(四)

上一篇: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官方介紹。所 […]

繼續閱讀...

Starling的Display Objects介紹(三)

上一篇: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:Ev […]

繼續閱讀...

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 l […]

繼續閱讀...

Starling的Display Objects介紹(一)

上一篇: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 i […]

繼續閱讀...

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的技術基礎示意圖: Starling運作模式 過去我們很容易因為Stage3D這個名字而誤會這是專門為3D而做的引擎,而不能使用在2D的技術上。3D引擎的運算與2D運算最大的差異點,在於3D畫面是由一個個三角型為基礎,去建構整個畫面。 […]

繼續閱讀...